Слайдер для InstantCMS
Задача: создать слайдер для InstantCMS на основе jQuery.Carousel
Решение:
Скачать слайдер для InstantCMS Демо пример
1) Распаковываем архив со слайдером в папку /includes/myphp/
2) Создаем новый модуль в админке InstantCMS (Модули > Создать модуль).
3) Задаем название модуля и выбираем его позицию в разделах сайта. В поле содержимое модуля вставляем: {ФАЙЛ=slider.php}
4) Создаем фотоальбом с названием "Slider" (Компоненты > Фотогалерея) и устанавливаем атрибут "не публиковать".
5) Загружаем в фотоальбом фото, в описание вставляем ссылку на материал.
Редактирование размеров слайдера тут: /includes/myphp/carousel/carousel.css (для данного примера ширина 620px).
Содержание файла slider.php:
<?php
$inDB=cmsDatabase::getInstance();
$sql='SELECT f.file, f.description FROM cms_photo_files AS f JOIN cms_photo_albums AS a ON f.album_id=a.id WHERE a.title="Slider" AND f.published=1 ORDER BY f.title';
$res=$inDB->query($sql) ;
$arr=array();
if($inDB->num_rows($res)){
while($row = $inDB->fetch_assoc($res)){
$arr[ $row['file'] ] = $row['description'];
}
}else return;
?>
<link href="/includes/myphp/carousel/carousel.css" type="text/css" rel="stylesheet" />
<!--<script type="text/javascript" src="/includes/myphp/carousel/jquery-1.7.1.min.js"></script>-->
<script type="text/javascript" src="/includes/myphp/carousel/jquery.carouFredSel.js"></script>
<div class="block-index"><div class="block">
<ul id="index-carousel">
<?php
$s='';
foreach($arr as $k => $v){
preg_match('/href\s*=\s*[\'"]([^\'"]+?)[\'"]/i', $v, $link);
$link=(isset($link[1])) ? $link[1] : '';
$s.='<li><div class="img">';
if($link) $s.='<a href="'.$link.'">';
$s.='<img src="/images/photos/medium/'.$k.'" />';
if($link) $s.='</a>';
$s.='</div><div class="title">'.$v.'</div>';
$s.='</li>';
}
echo $s;
?>
</ul>
<div class="block-pagination">
<div id="index-pagination" class="pagination"></div>
</div>
</div></div>
<script type="text/javascript">
$("#index-carousel").carouFredSel({
items : {width : 400 },
curcular: true,
infinite: false,
auto: 5000,
pagination : "#index-pagination",
scroll: {
pauseOnHover: true
}
});
</script>
Комментарии
Там же визуальный редактор, ссылку нужно ставить через значок на панели. Либо, нажать кнопку Источник, и написать:
<a href="ссылка"><img border=0 src="изображение" /></a>
Не понял о чем вы говорите. При вставке и редактировании изображения в альбоме нет визуального редактора. Скрин http://my-files.ru/zeow/55.jpg
Я тоже не сразу понял о чем вы, но ответ тот же, ссылку в описании фотографии можно поставить, и там есть визуальный реактор, по крайне мере, в InstantCMS v1.8. То что у вас на скрине, это я вижу впервые.
У меня версия 1.10
Как уже сказал, работал только с 1.8. Но почему бы тогда просто не вписать в описание <a href="ссылка">Заголовок</a>
На случай если эта версия преобразует теги, то после строки foreach($arr as $k => $v){ добавьте это $v=html_entity_decode($v);
Заголовок
Содержимое заголовка идет в class="title". а не на ссылку при нажатии на фото.
Дак, я предложил решение, попробуйте, отпишите, что получилось. Другое дело если нужно полностью сделать все под ключ, то платно. А так, подсказываю, направляю. Сделайте скриншоты, что там у вас получилось.
Можно даже так сделать, в описание вписать Заголовок|http://ссылка
убрать из кода эти строки:
preg_match('/href\s*=\s*[\'"]([^\'"]+?)[\'"]/i', $v, $link);
$link=(isset($link[1])) ? $link[1] : '';
вписать это:
list($v, $link)=explode('|', $v);
$v='<a href="'.$link.'">'.$v.'</a>';
Да, можно, почта в контактах.
Благодарю за помощь, решение помогло, значит в 1.10 работает именно так
Откройте сайт в Опере, нажмите Ctrl+Shift+O, и в консоле посмотрите ошибки JavaScript, скопируйте сюда.