Слайдер для InstantCMS

Слайдер для 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>

Комментарии

#1 Александр 2013-01-17 17:48:06
А подскажите, плиз, при вставке ссылки в поле Описание, ссылка не прписывается автоматом к выбранному изображению, а отображается как описание. В чем тут может быть косяк? Спасибо.
#2 Отдел разработки сайтов 2013-01-17 18:30:13
Цитата Александр
А подскажите, плиз, при вставке ссылки в поле Описание, ссылка не прписывается автоматом к выбранному изображению, а отображается как описание. В чем тут может быть косяк?

Там же визуальный редактор, ссылку нужно ставить через значок на панели. Либо, нажать кнопку Источник, и написать:
<a href="ссылка"><img border=0 src="изображение" /></a>
#3 Александр 2013-01-17 20:13:33
Цитата Отдел разработки сайтов
Цитата Александр
А подскажите, плиз, при вставке ссылки в поле Описание, ссылка не прписывается автоматом к выбранному изображению, а отображается как описание. В чем тут может быть косяк?

Там же визуальный редактор, ссылку нужно ставить через значок на панели. Либо, нажать кнопку Источник, и написать:
<a href="ссылка"><img border=0 src="изображение" /></a>


Не понял о чем вы говорите. При вставке и редактировании изображения в альбоме нет визуального редактора. Скрин http://my-files.ru/zeow/55.jpg
#4 Отдел разработки сайтов 2013-01-17 20:27:52
Цитата Александр
Не понял о чем вы говорите. При вставке и редактировании изображения в альбоме нет визуального редактора. Скрин http://my-files.ru/zeow/55.jpg

Я тоже не сразу понял о чем вы, но ответ тот же, ссылку в описании фотографии можно поставить, и там есть визуальный реактор, по крайне мере, в InstantCMS v1.8. То что у вас на скрине, это я вижу впервые.
#5 Александр 2013-01-17 20:31:49
Цитата Отдел разработки сайтов
Цитата Александр
Не понял о чем вы говорите. При вставке и редактировании изображения в альбоме нет визуального редактора. Скрин http://my-files.ru/zeow/55.jpg

Я тоже не сразу понял о чем вы, но ответ тот же, ссылку в описании фотографии можно поставить, и там есть визуальный реактор, по крайне мере, в InstantCMS v1.8. То что у вас на скрине, это я вижу впервые.

У меня версия 1.10
#6 Отдел разработки сайтов 2013-01-17 20:43:06
Цитата Александр
У меня версия 1.10

Как уже сказал, работал только с 1.8. Но почему бы тогда просто не вписать в описание <a href="ссылка">Заголовок</a>
На случай если эта версия преобразует теги, то после строки foreach($arr as $k => $v){ добавьте это $v=html_entity_decode($v);
#7 Александр 2013-01-17 20:45:52
Вы можете предложить какое-нибудь решение? Если надо, заплачу.
#8 Александр 2013-01-17 20:52:32
Вот код:
Заголовок

Содержимое заголовка идет в class="title". а не на ссылку при нажатии на фото.
#9 Отдел разработки сайтов 2013-01-17 20:53:28
Цитата Александр
Вы можете предложить какое-нибудь решение? Если надо, заплачу.

Дак, я предложил решение, попробуйте, отпишите, что получилось. Другое дело если нужно полностью сделать все под ключ, то платно. А так, подсказываю, направляю. Сделайте скриншоты, что там у вас получилось.
#10 Александр 2013-01-17 20:54:18
Вот ссылка http://my-files.ru/raqm/999.jpg
#11 Александр 2013-01-17 20:55:59
С вами можно связаться по скайпу или почте? Не хочу светить домен
#12 Отдел разработки сайтов 2013-01-17 20:59:25
Цитата Александр
Вот ссылка http://my-files.ru/raqm/999.jpg

Можно даже так сделать, в описание вписать Заголовок|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>';

Да, можно, почта в контактах.
#13 Александр 2013-01-17 21:10:29
Цитата Отдел разработки сайтов
Цитата Александр
Вот ссылка http://my-files.ru/raqm/999.jpg

Можно даже так сделать, в описание вписать Заголовок|ссылка
убрать из кода эти строки:
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 работает именно так
#14 0dmin 2014-01-30 14:47:17
у меня показывает всё содержимое альбома и всё. 1.10.3
#15 Отдел разработки сайтов 2014-01-30 16:07:54
Цитата 0dmin
у меня показывает всё содержимое альбома и всё. 1.10.3

Откройте сайт в Опере, нажмите Ctrl+Shift+O, и в консоле посмотрите ошибки JavaScript, скопируйте сюда.

Специалист по видео

8 (929) 264 1523 (Константин)

cashara@bk.ru

Специалист по фото

8 (929) 261 3062 (Дмитрий)

Мультимедиа-студия «Два в кубе» © 2011 - 2015