Виджет "Таблица картинок"

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО

Виджет для InstantCMS 2.x

#1 17 августа 2014 в 01:11

Всем привет!

В дополнении к серии своих постов дополнений для InstantCMS 2.x (тут и тут) спешу поделиться следующим виджетом — "Таблица картинок".

К сожалению, выложить пример его работы на демосайт у меня пока нет возможности, поэтому постараюсь объяснить "на пальцах"...

Из названия понятно, что виджет выводит ряд картинок в виде таблицы. Картинки динамически меняются с различными анимационными эффектами. Клик по одной из картинок ведет на страницу ее просмотра (photos/view/{id-картинки}) с комментариями и голосованием. Варианты эффектов смены картинок настраиваются в разделе "Опции" виджета. Там же выбирается из какого альбома показывать картинки, а также несколько других параметров.

Установка производится стандартным способом: Панель администрирования → Компоненты → Установить пакет дополнения, затем выбираем заранее скачанный пакет с виджетом и следуем инструкциям по установке. Тут написано немного подробнее.

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

Если у кого есть предложения и пожелания буду рад их выслушать.

#2 18 августа 2014 в 22:56

Судя по количеству просмотров и ответов тема либо неинтересна либо непонятно раскрыта.

Я немного обновил стили к виджету: фон картинок не черный, а прозрачный (так ближе к шаблону получается IMHO), но если кто хочет может раскомментировать строку /* background: #000; */. Также добавил обработку hover, чтобы картинки видней подсвечивались, так сказать обратная связь пользователю)) И исправил большой отступ снизу в стандартной обертке виджета.
Файл установки перезалил.

Что из себя представляют рабочие картинки можно посмотреть на видео:
www.youtube.com/watch?v=B9U1PkgqjkAP.S. жду фидбека от потенциальных пользователей =)

Прикрепленный файл

imagegridWidgetinstall_4e29a.zip 30 Кб

#3 19 августа 2014 в 04:44

Установил на локальный комп. Работают оба варианта. Эффекты показываются, переходы на просмотр фото осуществляются. Всё неплохо.
Осталось непонятным как настраивается вывод количества картинок. При установке виджета в тело страницы а потом в сайдбар, показывается разное их количество. Хотя в опциях ничего не менялось.

Упс… Сейчас добавил фото в альбом, количество отображаемых картинок увеличилось, эффекты работают, но переходы на просмотр картинок не осуществляются. Странно...
После перезапуска сервера и очистки кеша браузера работа виджета было восстановилась. Однако при перемещении виджета в сайдбар опять таже беда — при клике на картинку переход на просмотр фото не происходит. Странно...

И всё же, как настраивается количество выводимых картинок?

Сегодня в 07:25

#4 19 августа 2014 в 19:56

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

Click

По дефолту в теле страницы выводится 21 картинка (3 строки по 7 штук в каждой), а для сайдбара 8 картинок (2 строки по 4 шт). Это для виджета без стандартной обертки, т.е. без заголовка и тела виджета. При этом если картинок в альбоме меньше чем требуется для показа, то количество выводимых уменьшится на требуемое количество строк. Если же картинок очень мало, что даже и одну строку не получается заполнить, то выводится половина строки, но это не совсем красиво смотрится.

Предполагалось, что никому не захочется менять количество выводимых картинок вручную. Функционал заложен, осталось реализовать опции. Если же есть желание, то на данный момент это можно сделать правкой шаблона (файл templates\default\controllers\content\widgets\imagegrid\imagegrid.tpl.php)
внизу в тело скрипта добавляем следующее:

 
<script type="text/javascript">    
        $(function() {
            $( '#ri-grid' ).gridrotator({
 
                w768            : { // в теле страницы
                    rows    : 3, // <- количество строк
                    columns : 7 // <- количество столбцов (картинок в строке)
                },
 
                w320            : { // для сайдбара
                    rows    : 2,
                    columns : 4
                },
 
                step            : <?php echo $step ?>,
                maxStep         : <?php echo $max_step ?>,
                preventClick    : true,
                animType        : <?php echo $animation_type ?>,
                animSpeed       : <?php echo $animation_speed ?>,
                interval        : <?php echo $interval ?>,
                slideshow       : true,
                onhover         : false,
                nochange        : []
            });
 
        });
    </script>

#5 19 августа 2014 в 20:02

Однако при перемещении виджета в сайдбар опять таже беда — при клике на картинку переход на просмотр фото не происходит. Странно...
Click

Честно говоря очень странно! Выводимые картинки это ссылки на компонент photos/view/<id_картинки>, это можно посмотреть в шаблоне виджета.
Варианта 2: либо неверные ссылки, тогда должен выводить ошибку 404, либо конфликтует компонент фотографий, в этом случае даже не знаю что делать, нужно детально смотреть что и как в вашей системе.

#6 19 августа 2014 в 20:10

еслиб это управление было бы вынесено в меню виджета было бы супер, и было бы воще мега если б из админки также можно было бы задавать размер фоток

http://aksucity.net

#7 19 августа 2014 в 20:27

SE7EN, на выходные вынесу в меню опций виджета. А вот с размером картинок не получится. Размер автоматически подстраивается под отведенное пространство по ширине. Т.е. чтобы увеличить размер нужно задать меньшее количество картинок в строке, например не 7 а 6 или 5.
Виджет, как и шаблон инстанта, адаптированный — подстраивается под разрешение экрана =)

#8 19 августа 2014 в 20:34

Судя по количеству просмотров и ответов тема либо неинтересна либо непонятно раскрыта
Val

Уважемый Val, тема очень интересна и я бы даже купил — но не под вторую ветку…

#9 19 августа 2014 в 20:44

ALreD, я присоединился к сообществу не задолго до выхода двойки, решил для себя что буду делать свой проект на ней. Поэтому изучаю что к чему и параллельно выкладываю наработки.
Конечно "движок" еще очень молодой, но довольно перспективный. А с появлением магазина и выходом все новых и новых компонентов и виджетов, он быстро достигнет функционала первой ветки.

#10 19 августа 2014 в 21:25

Val, Ваше решение более чем уважаемо! Но смею заметить, что категорическое большинство реально работающих проектов базируется на первой ветке. И столь интереные решения как Ваше представленное тут, поимело бы интерес намного более широкий, будь оно в двух вариантах. Это просто мысли в слух без попытки навязать Вам мое мнение)

#11 19 августа 2014 в 23:23

ALreD, как появится достаточно свободного времени обязательно реализую!

#12 20 августа 2014 в 00:36

Val спасибо, красивая и полезная штука!
Поставил на дефолтный шаблон. Обнаружил следующие проблемы:
1. При установке виджета в тело страницы, показывается 2 картинки из альбома, где лежит 4.
При этом страница с картинкой открывается после 5 — 10 кликов.
2. При одновременной установке виджета в тело страницы и сайдбар, в теле страницы отображается 1 картинка (из того же альбома с 4-мя картинками). В сайдбаре виджет вообще не показывается.
3. При удалении виджета из тела страницы, виджет в сайдбаре начинает отображаться, но при этом не работают эффекты,
и при клике на картинку переход на страницу с альбомом не происходит.

#13 20 августа 2014 в 08:22

Alexprofi, спасибо за обнаруженные недостатки ))

1. Я уже отвечал в 4 посте, что при малом количестве картинок (а по умолчанию требуется 22 картинки) выводятся не все строки, а только количество строк которые полностью могут быть заполненными картинками. Или же, если картинок очень мало (как раз случай из 4 приведенных вами картинок), то выводится только половина из них (в нашем примере 2 штуки). Это необходимо для того чтобы обеспечить динамичность картинок, они должны менять друг друга. А если вывести все картинки, то менять их будет нечем, они уже все на экране )). Это как раз и получается в приведенной вами 3 проблеме. На экране показываются все картинки, которые нечем менять, и, как-бы, не работают эффекты.
Другое дело, что по логике, как я писал, должно было показываться 2 картинки а не 4! Буду разбираться =)

Почему переход происходит только после 5-10 кликов — не знаю, также нужно будет смотреть и исправлять!
А вот со вторым пунктом, сходу, не все так просто… протестирую дома и посмотрю в чем может быть причина и как это можно допилить…

#14 20 августа 2014 в 10:47

Val, спасибо за разработку и за подробные объяснения. С настройкой вывода количества картинок всё стало понятно. И по мне так всё прекрасно было бы даже и без управления количеством и размером фоток из админки, хотя по фэн-шую, конечно, лучше с ней.
Однако, главная проблема при тестировании у меня не устраняется — переход на просмотр фото при клике на картинку у меня по-прежнему не происходит. После нескольких удалений и установок виджета заново, виджет сначала работает без проблем, а потом (после добавления картинок либо после переноса в сайдбар или, наоборот, в тело страницы) эта проблема появляется вновь. Переход только иногда происходит при клике на картинку, но по какому-то случайному принципу, после многочисленных кликов на виджет, на разные фотки. Закономерность выявить не удалось.
Alexprofi тоже описал похожую ошибку.

Ссылки в виджете рабочие. Если на картинку кликнуть правой кнопкой и выбрать "Открыть в новом окне", то страница с фото открывается без проблем. Но вот на клик левой кнопой — не реагирует сразу. Иногда только срабатывает сразу, если угадаешь на какое фото нажать. Как в игре в напёрстки )))
Уточню, что виджет тестировался на локальном компе с OpenServer. Чистая установка ICMS 2.1.1 с дефолтным шаблоном. Ни в систему, ни в шаблон никаких правок не вносилось. Других компонентов не устанавливалось.
Задумка виджета хорошая. Очень украшает сайт.

#15 22 августа 2014 в 22:05

Виджет доработан в соответствии с пожеланиями. Ошибки исправлены, остался правда косячёк с выводом более 2-х виджетов на одной странице zst

Нужно разбираться.
Тема перенесена сюда.

Универсальный каталог вставка

Доска объявлений 1.10.

Виджет "Таблица картинок"

Похожие темы

[ЕСТЬ РЕШЕНИЕ] Вывод картинок при миграции с первой ветки

Оптимизация таблицы _ratings

Редактирование данных в админке в таблице вывода списка контента. Возможно?

запрос на создание столбца в таблице при создании поля

[ЕСТЬ РЕШЕНИЕ] В какой таблице хранятся настройки виджетов?

Стиль таблиц в виджете

InstantCMS Team

О проекте

Поддержка

Дополнения