Плагин LVSpoiler - спойлеры с динамической загрузкой изображений

  • 440 Ответов
  • 67260 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

Arkadiy

  • *****
  • 5342
  • 440
  • Крепитесь, други.
«Lazy Velo Spoiler» является эволюционной версией плагина «pb_spoiler» от beliyadm.

Главные особенности (опции) нашего плагина:
1. Подгрузка изображений только для открытых и открывающихся спойлеров. Это позволяет оперировать большими массивами изображений не увеличивая нагрузку на сервер и не замедляя загрузку страницы.
На данный момент механизм динамической подгрузки выглядит по-разному для jQuery и MooTools вариантов (в первом случае спойлер сразу открывается, а вместо изображений появляются заглушки в виде прелоадеров, во втором – спойлер открывается после загрузки всех изображений внутри себя, а индикатор загрузки возникает рядом с заголовком спойлера).

2. Опции jQuery и MooTools максимально унифицированы, в результате чего пользователь может безболезненно выбирать любую версию, не теряя настроек и функционала.

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

4. Языковые константы вынесены в ini-файлы, что позволяет легко переводить плагин на нужный язык. В настоящий момент доступны русская и английская версия.

На сегодня плагин существует только для Joomla версии 1.5.20 и выше.  При выборе MooTools-версии необходимо активировать системный плагин MooTools-upgrade.

Правила использования:
В текст статьи необходимо вставить следующую конструкцию:
Код
{spoiler title=Заголовок opened=1}Скрытый текст{/spoiler}
где opened - состояние спойлера при загрузке страницы, 1 - открыт, 0 - закрыт.

В работе помогали:
effrit - доработка mootools-спойлера, английская локализация, свежие идеи
staticlight - английская локализация
Lexx - версия для Joomla 1.7
al-teen - стилевое оформление спойлеров

Системные требования для 1.5 - версия Joomla не менее 1.5.22 и включенный плагин mootools upgrade.

Скачать самые свежие версии можно здесь http://argens.ru/zagruzki/lazy-velo-spoiler


Внизу прикреплены кнопки вставки кода спойлера на страницу для Joomla 1.5 и 1.7 соответственно. Так-же прикреплен спойлер 1.0.7 версии, работающий в 1.5, 1.6 и 1.7.

[вложение удалено Администратором]
« Последнее редактирование: 06.03.2015, 16:08:22 от Arkadiy »

*

Arkadiy

  • *****
  • 5342
  • 440
  • Крепитесь, други.
Обновил версии плагинов до 1.0.6, исправлена работа спойлера в ие 7, 8, частично в 9 (в версии для Joomla 1.7 работает хорошо, а  для Joomla 1.5 только в режиме совместимости). Грешу на более старую версию mootools в 1.5.22, на которой испытывал.

*

gost1k

  • *
  • 9
  • 0
Было бы здорово если спойлер по умолчанию без преписки opened=# устанавливал значение на 0, и вообще отображался на сайте, без добавления. И еще самое главное. Сделать в спойлере что информация внутри него загружается при открытии, можно было бы работать с массивной информацией на сайте, не перегружая загрузку страницы.

*

Arkadiy

  • *****
  • 5342
  • 440
  • Крепитесь, други.
1. Без прописки opened регулярное выражение сбивается, так-что без него никуда.
2. Сколько надо текста, чтобы он поимел сколько-нибудь существенный вес в мегабайтах? Думаю чересчур много чтобы его пихать на одну страницу. Например книжки в электронном виде с чтивом дня на 3-7 имеют вес около мегабайта - двух.

*

effrit

  • *****
  • 7441
  • 815
  • effrit.com
угу, кроме графики что ещё массивным быват? только видео и звук. так тто не сильно актуально.
а вот на счёт дефолтного opened - я тоже изначально его предлагал опциональным сделать, но раз уж Аркадий сделал так, то нехай буде ). в конце концов, есть плагины для организации кнопки, для вставки готовой конструкции в визивиг, так что не сильно критично )

*

Arkadiy

  • *****
  • 5342
  • 440
  • Крепитесь, други.
Можно сделать другой плагин, который при открытии спойлера подтягивает указанную статью (в общем любой контент Joomla), но путать его сюда довольно сложно получится т.к. принципы действия совершенно различные.

*

effrit

  • *****
  • 7441
  • 815
  • effrit.com
спойлеры со статьями вроде видел уже )
с AJAX подкгрзкой хтмла - точно есть на JED.
так что смысла, действительно, мало в усложнеии функционала - это спойлер для.. гхм.. спойлеров :) и картинок.

*

gost1k

  • *
  • 9
  • 0
Ну я столкнулся с такой проблемой.
Тащу видео из контакта. А когда прогружается страница, собственно прогружается и видео, а если там 200+ видео файлов. что сопутно сериалам и аниме, выходит мягко сказать не особо весело. а про opened - просто запарило везде дописывать. причем он идет после названия, править много названий тоже не весело. В принципе склоняюсь к мысли разбивать страницы.

*

Arkadiy

  • *****
  • 5342
  • 440
  • Крепитесь, други.
Переделал тестовую страницу, с настройкой "Показать по" "Нажатию и перейти к УРЛ" jQuery, очень прикольно на больших объемах информации смотрится с подтягиванием заголовка кверху. Mootools тоже подтягивает, но без анимации и часто неверно из-за того, что браузер считает расстояние от заголовка до верха в момент раскрытия одного спойлера и закрытия другого, т.е. в движении. Надо сделать чтобы он это делал после того как спойлеры отработают.

*

effrit

  • *****
  • 7441
  • 815
  • effrit.com

*

Arkadiy

  • *****
  • 5342
  • 440
  • Крепитесь, други.
Если отключить этот эффект, то текст спойлера, если он больше страницы, вообще творит всякие безобразия, на небольших размерах конечно этот эффект будет лишним.

*

Arkadiy

  • *****
  • 5342
  • 440
  • Крепитесь, други.
LVSpoiler1.0.8_j1.5_j1.7.zip опубликован в первом посте этой темы. Добавил font-family для заголовков спойлеров, тени для шрифта заголовка и бокса заголовка. Что получилось смотреть здесь http://argens.ru/demo.html

*

effrit

  • *****
  • 7441
  • 815
  • effrit.com
wfedin, у каждого спойлера итак есть уникальный ID (в рамках статьи):
1_spoiler
2_spoiler
...
если добавить к нему ещё и ID материала, то получется вообще уникальный идешник.


*

wfedin

  • ******
  • 1290
  • 102
Тем проще осталось увязать значение ид и ширины — если неуказано использовать ширину по дефолту
wfedin, у каждого спойлера итак есть уникальный ID (в рамках статьи):
1_spoiler
2_spoiler
...
если добавить к нему ещё и ID материала, то получется вообще уникальный идешник.

Остаётся теперь увязать ид и ширину, если неуказано используем настройки плагина.

*

al-teen

  • *****
  • 2458
  • 213
  • im
Код и CSS этой страницы покажите.У всех нормальное отображение, в том числе и на демо, у одного wfedin не получается.Аркадий, ты случайно специально для него, какую нибудь специальную кривую версию не делал?:)
« Последнее редактирование: 06.10.2011, 19:57:47 от al-teen »

*

Arkadiy

  • *****
  • 5342
  • 440
  • Крепитесь, други.
LVSpoiler_wfedin_editon, само собой :)
Просто если в редакторе вставлять картинку и делать ее выравнивание по правому краю, то оно делается float: right, следовательно все следующее за ним надо отделить clear: both как сделал я на демо, либо если хочется выстроить спойлер не снизу а слева от картинки, то надо задать диву, содержащему спойлер соответствующий марджин справа и все будет нормуль. Я не верстальщик, но азы-то все знать должны.

*

wfedin

  • ******
  • 1290
  • 102
надо задать диву, содержащему спойлер соответствующий марджин справа и все будет нормуль. Я не верстальщик, но азы-то все знать должны.


Или указать диву style="width:56?px" Но мы ведь не о костылях, правда?
Если не можете или невозможно сделать правильное обтекание изображений спойлером без костылей — давно б сказали и разговора небыло. Ато втираете про вёрстку лабуду какую-то.

*

wfedin

  • ******
  • 1290
  • 102
у одного wfedin не получается.Аркадий, ты случайно специально для него, какую нибудь специальную кривую версию не делал?:)
У меня таки всё получается, а вот жена у меня ни HTML ни CSS не знает.

*

Arkadiy

  • *****
  • 5342
  • 440
  • Крепитесь, други.
Но мы ведь не о костылях, правда?
Правда, мы о правилах верстки. Дело не в спойлере.

*

effrit

  • *****
  • 7441
  • 815
  • effrit.com
wfedin, это не лабуда. спойлер ведь не волшебный. он просто берёт часть контента и заключает её в дополнительные блоки.
отсюда и возможные проблемы с уплытием вёрски.
выложи сайт в сеть и дай ссылку, чтобы можно было давать конкретные рекоммендации, а то так погрязнем во взаимообвинениях )

al-teen, человек багрепортит, давай спокойнее относится к подобным сообщениям, иначе никакого отклика не будет от людей )

*

wfedin

  • ******
  • 1290
  • 102
Так о чём уже говорить вроде наконец выяснили что без костыля его не заставить нормально обрабатывать float.
Впринципе я без претензий, плагин и без того супер с минимумом знаний HTML и CSS всё настраивается. А там уж на усмотрение автора.

*

wfedin

  • ******
  • 1290
  • 102
Правда, мы о правилах верстки. Дело не в спойлере.
Может я чего-то непонимаю, но ведь только спойлер не учитывает место занимаемое изображением. При этом текст обтекает изображение как надо, а все рамки лезут не видя  картинки.

*

Arkadiy

  • *****
  • 5342
  • 440
  • Крепитесь, други.
Ну ты вставь туда любой див с любым текстом, заплывет под картинку.
У спойлера нет общего контейнера, по этому не получится в спойлере что-то с этим сделать.

*

al-teen

  • *****
  • 2458
  • 213
  • im
Аркадий, не помню добавлял или нет, когда оформлял.Добавь для раскрывающегося блока overflow: hidden; в цсс.По идее это должно решить проблему

*

Arkadiy

  • *****
  • 5342
  • 440
  • Крепитесь, други.
Так там не только скрытый блок, заголовки тоже лезут под картинку.

*

al-teen

  • *****
  • 2458
  • 213
  • im
Потому что для картинки задано свойство float.Он является условно-абсолютным.А через overflow ограничивается рамками контейнера.Причем сам контейнер тянется в зависимости от подобного блока

*

wfedin

  • ******
  • 1290
  • 102
Аркадий, не помню добавлял или нет, когда оформлял.Добавь для раскрывающегося блока overflow: hidden; в цсс.По идее это должно решить проблему

А с простым дивом сработало. Красиво, + за науку.

*

wfedin

  • ******
  • 1290
  • 102
Ну ты вставь туда любой див с любым текстом, заплывет под картинку.
У спойлера нет общего контейнера, по этому не получится в спойлере что-то с этим сделать.
Нечего возразить, таже ситуция. Помог совет от al-teen

*

wfedin

  • ******
  • 1290
  • 102
al-teen вот светлая голова, одна строчка для jQuery
Код
.thelanguage {overflow:hidden;}
и

Я счастлив!
А мотулз так у меня толком нехотит работать.