Главная » 2012»Октябрь»17 » Галерея с комментированием отдельных изображений в Drupal 7
05:16
Галерея с комментированием отдельных изображений в Drupal 7
Итак, что необходимо :
количество изображений галереи может быть произвольным
При клике на изображении необходимо показать его полный вариант
Комментирование как отдельных комментариев, так и галереи
Обращу внимание на то, что последнее у меня пока реализовано лишь на стадии неотображения комментариев галереи в фотках, Но это дело техники - при загрузке страницы галереи добавить комментариям фоток класс hidden, а при выводе комментов фото - вернуть такие элементы назад :-)
Использованы модули :
Multiupload Filefield Widget
Multiupload Imagefield Widget
Views (для вывода списка галерей)
Ctools (для запуска Views)
Colorbox
Создан тип "галерея", а в нем - поле изображения (машинное имя - field_image, тип - изображение. виджет - multiupload, формат вывода - colorbox)
Далее, для фильтрации комментариев создано текстовое поле imageSrc, а в таблицу стилей добавлен такой код :
Code
.field-name-field-imagesrc { display: none; }
Потом модифицирован файл jquery.colorbox.js (в настройках Colorbox установите использование несжатого варианта).
Нас интересует функция publicMethod.load, а именно - её завершение. В принципе, код помещения комментариев в всплывающее окно можно поместить просто в конец добавляемого ей onload, но опыт дал такой результат - размеры криво считает. Так что приюзал setTimeout :
Code
publicMethod.load = function (launched) { ... //не меняем } else if (isImage(href)) { $(photo = new Image()) .addClass(prefix + 'Photo') .error(function () { settings.title = false; prep($tag(div, 'Error').html(settings.imgError)); }) .load(function () { ... // Код не меняем
// Внедрённый код setTimeout(function(){ //Комменты показываем только в галерее if($("body.node-type-gallery").size()>0) { lcontent = $("#cboxLoadedContent"); //В качестве фильтра по значнию поля ImageSrc - адрес картинки imageURL = lcontent.find("img").attr("src"); commentsBlock = $("#comments").clone(); //Подставим его в форму отправки комментария commentsBlock.find(".field-name-field-imagesrc input").val(imageURL); //Проходим по комментам, вырезая неугодные :-) commentsArr = commentsBlock.find(".comment"); for(i=0;i<commentsArr.size();i++) { obj = commentsArr.eq(i); if( obj.html().indexOf(imageURL)==-1) obj.remove(); }