1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Решение проблем

Работа с jQuery Plugin, а конкретней - с jQuery Cycle

Главные вкладки

Аватар пользователя Litos Litos 4 января 2011 в 21:29

Здравствуйте, товарищи.
Расскажу как я решил проблему с jQuery Plugin, а если точнее - то с jQuery Cycle. С помощью модуля Cycle можно сделать простой ротатор картинок в любом месте, у меня - в блоке справа.

1. С сайта Drupal.org скачал последнюю версию jQuery Plugin

2. После установки зашёл на: http://malsup.com/jquery/cycle/begin.html

3. В нужном месте разместил код

<div class="pics">
    <img src="images/beach1.jpg" width="200" height="200" />
    <img src="images/beach2.jpg" width="200" height="200" />
    <img src="images/beach3.jpg" width="200" height="200" />
</div>

Конечно, этот код взят как пример с сайта, вместо всяких beach*.jpg прописываете свои пути к картинкам.
Для себя, чтобы можно открыть картинку, сделал так:

<div class="pics" id="s1">
<a rel="shadowbox" href="/localhost/sites/default/files/images/rotator/1b.jpg"><img width="200" height="150" alt="" src="/localhost/sites/default/files/images/rotator/1s.jpg" /></a>
<a rel="shadowbox" href="/localhost/sites/default/files/images/rotator/2b.jpg"><img width="200" height="150" alt="" src="/localhost/sites/default/files/images/rotator/2s.jpg" /></a>
<a rel="shadowbox" href="/localhost/sites/default/files/images/rotator/3b.jpg"><img width="200" height="150" alt="" src="/localhost/sites/default/files/images/rotator/3s.jpg" /></a>
</div>

Комментирую свои деяния:
id="s1" - это идентификатор моей группы картинок
rel="shadowbox" - указатель для модуля shadowbox. Для подробностей, прошу посетить соответствующий раздел сайта Drupal.org

4. Этот код помещаем в файл со стилями темы:

.pics {  
    height:  232px;  
    width:   232px;  
    padding: 0;  
    margin:  0;  
}
 
.pics img {  
    padding: 15px;  
    border:  1px solid #ccc;  
    background-color: #eee;  
    width:  200px;
    height: 200px;
    top:  0;
    left: 0
}

5. Выбираем нужный эффект. Пример расчитан на эффект - fade

6. Дальше, перед кодом в пункте 3 помещаем код:

<?php
    jquery_plugin_add('cycle');
?>

Код, включает нужный плагин cycle.

7. Открываем файл page.tpl.php и между тэгами HEAD вставляем код:

<script type="text/javascript">
$.fn.cycle.defaults.speed   = 900;
$.fn.cycle.defaults.timeout = 6000;
</script>

Он отпределяет скорость "прокрутки" картинок

8. И в конце этого же файла, перед кодом:

  <?php print $closure ?>

вставляем наш:

<script type="text/javascript">
$('#s1').cycle();</script>

Этот код и включает цикл ротации для выбранного массива фотографий, в нашем случае это - s1. Как и писал выше.

Всё. Всем приятной работы с Drupal ! Smile

Комментарии

Аватар пользователя Funtik44 Funtik44 23 августа 2011 в 11:56

"Litos" wrote:
Открываем файл page.tpl.php и между тэгами HEAD вставляем код:

<script type="text/javascript">
$.fn.cycle.defaults.speed   = 900;
$.fn.cycle.defaults.timeout = 6000;
</script>

Он отпределяет скорость "прокрутки" картинок

В page.tpl.php нет таких тегов , как быть, просто вверх страницы вставить?

"Litos" wrote:
И в конце этого же файла, перед кодом:

<?php print $closure ?>

вставляем наш:

<script type="text/javascript">
$('#s1').cycle();</script>

Этот код и включает цикл ротации для выбранного массива фотографий, в нашем случае это - s1. Как и писал выше.


В моей теме в page.tpl.php нет такого кода:
<?php print $closure ?>
Как поступить в таком случае?

Аватар пользователя AndrewFall AndrewFall 10 ноября 2015 в 11:47

Юра, здравствуйте!
Подскажите, пожалуйста, я установил модуль jQuery plugins 6.x-1.10, и разместил код...

<div class="pics">
    <img src="images/beach1.jpg" width="200" height="200" />
    <img src="images/beach2.jpg" width="200" height="200" />
    <img src="images/beach3.jpg" width="200" height="200" />
</div>

...в теле материала на главной. Повставлял остальные куски кода как вы указали, один только вопрос - я выбрал FADE, но куда его вставить?

В итоге мой сайт превратился вот в это Sad
Подскажите, пожалуйста, что я мог сделать не так?

Аватар пользователя Litos Litos 7 октября 2011 в 10:05

Здравствуйте!

<?php
    jquery_plugin_add('cycle');
?>

Вот здесь надо. Только вместо cycle, пишите FADE.
Когда создаёте материал не забудьте выбрать формат ввода - PHP code.
Если его нет в списке, то включите модуль PHP filter.