jCarousel руками в Drupal

jcarousel.jpgУ Друпала есть готовый модуль viewscarousel, но он в dev и работает, честно говоря, не очень хорошо. Поэтому было принято решение прикрутить карусельку вручную.

Что для этого требуется:

  • Сам скрипт карусельки - скачать его можно:
    здесь (старая версия - см.прикрепленные файлы)
    из официального сайта _http://sorgalla.com/jcarousel/
    с jquery _http://plugins.jquery.com/project/jcarousel
  • Встроенный в Друпал jquery 1.2.6 сгодится
  • Придется написать запрос (можно воспользоваться Views для этого дела)

Далее придется поработать руками

Для начала необходимо подключить js и css файлы карусельки. Я сделал это добавив в файл темы *.info три строчки

stylesheets[all][] = skin.css
scripts[] = js/scripts.js
scripts[] = js/jquery-jcarousel.js

В файле scripts.js находится сам код, который вызывает карусельку (в примерах с сайта карусели, он в хедере).
На всякий случай привожу его:

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
			wrap: 'circular'
		});
});
function DM_ExtensionEvent(event){
  event.preventDefault();
  var element = event.target; 
  var ev = document.createEvent("Events");
  ev.initEvent("DMasterExtensionEvent", true, false);
  element.dispatchEvent(ev);
};
function convertLinksToDM()
{
  var re = /(?:.([^.]+))?$/;
  var extensions = "EXE,ZIP,RAR,ARJ,Z,GZ,LZH,GZIP,TAR,MP3,AVI,MPG,MPEG,QT,PLJ,ASF,WMA,WMV,MOV,TIF,TIFF,BIN,ACE,ISO,WAV,VQF,OGG,MPE,MPA,RAM,7Z,DOC,PDF,PPT,XLS,DJVU,MSI".split(",");
  for (var i=0;i<document.links.length;i++) {
    var ext = re.exec(document.links[i].href)[1].toUpperCase();
    if (ext.indexOf("?")>0) { ext = ext.split("?")[0] }
    try {
    if (extensions.indexOf(ext) >= 0) {
      document.links[i].addEventListener("click", function (e) { DM_ExtensionEvent(e); }, false);
    }
   } catch(e) { alert("error"); }
  }
};
convertLinksToDM();

После того, как мы это сделали можем создавать блок с необходимыми данными. В моем случае я делал карусельку со ссылками на товары из каталога, а именно с фотографиями продукции, которые ведут на нужную ноду.

<?php
 
echo '<div class="jcarousel-skin-tango">
<div style="position: relative; display: block;" class="jcarousel-container jcarousel-container-horizontal">
<div style="overflow: hidden; position: relative;" class="jcarousel-clip jcarousel-clip-horizontal">
<ul style="overflow: hidden; position: relative; top: 0px; left: -595px; margin: 0px; padding: 0px; width: 850px;" id="mycarousel" class="jcarousel-list jcarousel-list-horizontal">';
 
$sql = "SELECT node.nid AS nid, node.title AS title,
   node_data_field_photo.field_photo_fid AS file_id
 FROM node node 
 LEFT JOIN content_type_catalog node_data_field_photo ON node.vid = node_data_field_photo.vid
 WHERE (node.status <> 0) AND (node.type in ('catalog'))
   ORDER BY node.created DESC LIMIT 10";
$result = db_query($sql);
 
$i = 1;
while ($anode = db_fetch_object($result)) {
 $sqlx = "SELECT files.filename, files.filepath from files WHERE files.fid={'$anode->file_id'}";
 $res = db_query($sqlx);
 $cat_image = db_fetch_object($res);
 
$imagex = theme_imagecache('jcarousel_thumb', $cat_image->filepath);
$path = drupal_get_path_alias("node/".$anode->nid, 'ru');
$node_link = l($imagex, $path, $options = array('html' => TRUE));
 
echo '<li jcarouselindex="'.$i.'" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-'.$i.' jcarousel-item-'.$i.'-horizontal">';
 
echo $node_link;
 
echo "</li>\n";
$i++;
 
}
echo '</ul>';
echo '</div>
<div disabled="false" style="display: block;" class="jcarousel-prev jcarousel-prev-horizontal"></div>
<div disabled="true" style="display: block;" class="jcarousel-next jcarousel-next-horizontal jcarousel-next-disabled jcarousel-next-disabled-horizontal"></div>
</div>
</div>';
 
?>

ВложениеРазмер
jquery-jcarousel.rar4.2 КБ

10 комментариев for 'jCarousel руками в Drupal'

1. Дархан, шрифт кода увеличь -

Дархан, шрифт кода увеличь - ничего не видно)

2. Хорошо. Увеличу

Хорошо. Увеличу

3. спасибо за скрипт карусельки

спасибо за скрипт карусельки

4. Всегда пожалуйста! Рад быть

Всегда пожалуйста! Рад быть полезным

5. Есть вариант сделать в Друпал

Есть вариант сделать в Друпал не карусель , а ротацию изображений, все работает отлично со ссылками либо на страницы сайта либо на другие Интернет адреса

6. Для ротации нод и изображений

Для ротации нод и изображений в Друпале куча модулей http://drupal.org/node/418616

7. Спасибо как раз искал

Спасибо как раз искал карусель под друпал :)

8. Пожалуйста! Рад быть полезным

Пожалуйста! Рад быть полезным ;)

9. http://drupal.org/project/jca

http://drupal.org/project/jcarousel Теперь эта шнягу можно подключить к друпалу как модуль, интегрируется во Вьюсом, работает на ура:)))

10. Ну оно и раньше было, просто

Ну оно и раньше было, просто не было стабильной версии, поэтому глючило нереально

Отправить комментарий

Содержание этого поля является приватным и не предназначено к показу.
CAPTCHA
Этот вопрос задается для того, чтобы выяснить, являетесь ли Вы человеком или представляете из себя автоматическую спам-рассылку.
CAPTCHA на основе изображений
Enter the characters shown in the image.