jCarousel руками в Drupal
Опубликовано Dark в Втр, 01.06.2010 - 12:12
У Друпала есть готовый модуль 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.rar | 4.2 КБ |

10 комментариев for 'jCarousel руками в Drupal'
1. Дархан, шрифт кода увеличь -
Дархан, шрифт кода увеличь - ничего не видно)
2. Хорошо. Увеличу
Хорошо. Увеличу
3. спасибо за скрипт карусельки
спасибо за скрипт карусельки
4. Всегда пожалуйста! Рад быть
Всегда пожалуйста! Рад быть полезным
5. Есть вариант сделать в Друпал
Есть вариант сделать в Друпал не карусель , а ротацию изображений, все работает отлично со ссылками либо на страницы сайта либо на другие Интернет адреса
6. Для ротации нод и изображений
Для ротации нод и изображений в Друпале куча модулей http://drupal.org/node/418616
7. Спасибо как раз искал
Спасибо как раз искал карусель под друпал :)
8. Пожалуйста! Рад быть полезным
Пожалуйста! Рад быть полезным ;)
9. http://drupal.org/project/jca
10. Ну оно и раньше было, просто
Ну оно и раньше было, просто не было стабильной версии, поэтому глючило нереально
Отправить комментарий