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

olaf

  • Захожу иногда
  • 225
  • 23 / 0
Рассматривал разные варианты инструментов для создания всплывающих изображений и галерей.
Нашел модуль и плагин sigplus (могут работать отдельно). Скачать можно тут.
Позволяют:
- делать отдельные всплывающие изображения и галереи,
- можно сделать что угодно и как угодно - масса настроек, подгружает jquery из CDN.
- на странице sigplus подробная документация и демо.
Сделал небольшую инструкцию (только по основным возможностям) для "конечных" пользователей сайта, привожу ниже.
ИНСТРУКЦИЯ
1. Создание Галереи изображений
Галерея изображений реализуется в виде слайдеров. Полноразмерные изображения выводятся в семи вариантах всплывающих окон. Прокрутка миниатюр в слайдере может быть вертикальная или горизонтальная. Элементы навигации – кнопки и ссылки позволяют переходить к следующим группам изображений, а также к началу и концу галереи. В материал, Галерея встраивается при помощи кода {gallery}путь к файлам галереи{/gallery}, пример:
Код
{gallery}school/nagrad{/gallery}
school/nagrad – относительный адрес папки, где хранятся изображения.
Вставка Галереи изображений на страницу
1) Для вставки галереи изображений откройте статью в редакторе.
2) В Менеджере изображений создайте папку для изображений Галереи, например myfolder.
3) В папку myfolder загрузите файлы (в форматах .jpg .png .gif, размером не более 640х640px) с вашего компьютера.
4) В тексте статьи вставьте метку Галереи {gallery}myfolder{/gallery}.
Всплывающие названия и описания к изображениям
Галерею можно дополнить всплывающими названиями и описаниями к изображениям. При наведении курсора название появится на фоне изображения, описание – во всплывающем окне.
Создайте на своём компьютере файл labels.txt в кодировке UTF-8 и загрузите в папку myfolder. Файл labels.txt содержит список с указанием имени графического файла, названия и описание для каждого изображения.
Формат записи: Имя файла|Название изображения|Описание изображения
Пример файла labels.txt:
cherry.jpg|Вишня|Спелая вишня
pears.jpg|Груши|Сочные груши
Для оформления Галереи можно задать огромное количество параметров, например:
{gallery width=100 height=100 maxcount=4 rows=2 cols=3 alignment=center orientation=horizontal navigation=top lightbox=none download=yes}birds{/gallery}
Часто используемые параметры и возможные значения.
1) Размещение:
– layout = fixed | flow – размещение в отдельном блоке (по умолчанию) или в тексте (по типу картинка - буква в тексте)
– rows, cols – число рядов и колонок для размещения, orientation = horizontal | vertical, максимальное кол-во изображений – maxcount
– alignment = left|center|right|before|after|left-float|right-float|before-float|after-float|left-clear|right-clear|before-clear|after-clear – выравнивание относительно текста (для вставки в текст используйте выравнивание с float)
– width, height – ширина и высота изображений, download = yes | no возможность скачать изображение, crop = 1 | 0 – возможность обрезки краев изображения
2) Границы:
– borderwidth   = ширина границ вокруг каждой миниатюры в [px]
– bordercolor =  цвет границ в  hexadecimal от 000000 до FFFFFF
– borderstyle = стиль границ default|none|dotted|dashed|solid|double|groove|ridge|inset|outset
– padding = ширина границ вокруг каждой миниатюры до границ в [px]
– margin = поля вокруг каждой миниатюры за границами в [px].
3)Панель навигации:
– navigation = top | bottom | both размещение панели навигации
– buttons = 1 | 0 показывать или нет клавиши <  <  > > в панели навигации
– links = 1 | 0 показывать или нет слова Предыдущий Следующий в панели навигации.
– counter = 1 | 0 нумерация страниц
– overlay = 1 | 0 показывать или нет стрелки навигации поверх крайних миниатюр.
4) Слайдер миниатюр
– slider = none | boxplus.slider | boxplus.carousel | boxplus.transition – вид слайдера
– animation = скорость [ms] анимации миниатюр (по умолчанию 0 – без анимации).
Примеры для разных видов слайдеров:
– slider = boxplus.slider slider:opacity=0.5  - прозрачность миниатюр
– slider=boxplus.carousel slider:positioning=center slider:edges=blurred – полупрозрачные миниатюры крайние (positioning=center, или левые positioning=right)
5) Внешний вид всплывающего окна
lightbox= none|boxplus|boxplus.hover|fancybox|prettyphoto| sexylightbox| slimbox| slimbox2
Примеры для разных видов всплывающих окон:
– lightbox=boxplus lightbox:thumbs=outside – навигационные картинки за пределами всплывающего окна
– lightbox=boxplus.hover – всплывание при наведении
2. Создание всплывающих одиночных изображений
1) Вставьте в самом начале текста метку {gallery /}, которая указывает, что изображения в тексте будут «всплывать».
2) В Менеджере изображений выбирите изображение и заполните поле «Альтернативный текст», укажите уменьшенный размер в полях «Размеры». Скопируйте путь к изображению из поля «URL» и нажмите Вставить.
3) Выделив изображение, создайте ссылку инструментом  Вставить/Редактировать ссылку. В поле «URL» вставьте, скопированный путь к изображению, в поле «Заглавие» впишите описание изображения.
В гипертексте это выглядит так:
Код
<a href="/images/stories/boxplus/boxpluslogo.jpg" title="Ягода">
<img alt="Вишня" src="/images/stories/fruit/vishnja.jpg" width="75" height="56" /></a>
! Всплывающее и вставленное в текст изображения в приведенном примере могут быть разными или одинаковыми.
Чтобы сделать текстовую ссылку на всплывающее изображение:
Выполните п.1, если не сделали это раннее. Затем выделите часть текста - будущей ссылки и, пользуясь инструментом Вставить/Редактировать ссылку, выбирите файл изображения, которое будет всплывать, и внесите описание изображения в поле «Заглавие».
В гипертексте это выглядит так:
Код
<a href="/images/stories/boxplus/logo.jpg"  title="Лого-Ягода">Текст</a>
3. Проблемы в работе галереи
В основном связаны с неправильной настройкой использования jquery.
Для предотвращения "глюков" галереи, библиотеку jquery желательно загружать один раз,
и не использовать программы, требующие разные версии jquery.
Ваш шаблон, какие-нибудь модули или плагины могут тоже загружать jquery,
поэтому надо разрешить загрузку, например шаблону, отключив её в sigplus и других модулях и плагинах.
« Последнее редактирование: 20.08.2017, 21:38:57 от olaf »
*

Web-Simple

  • Захожу иногда
  • 274
  • 1 / 0
Цитировать
ИНСТРУКЦИЯ
1. Создание всплывающих изображений
1) Вставьте в самом начале текста метку {gallery /}, которая указывает, что изображения в тексте будут «всплывать».
2) В Менеджере изображений выберите изображение и заполните поле «Альтернативный текст», укажите уменьшенный размер в полях «Размеры». Скопируйте путь к изображению из поля «URL» и нажмите Вставить.
3) Выделив изображение, создайте ссылку инструментом  Вставить/Редактировать ссылку. В поле «URL» вставьте, скопированный путь к изображению, в поле «Заглавие» впишите описание изображения.
Вы вообще сами пробовали этот способ? Он не работает, описания можно прописать только в файле labels.txt, да и то криво (т.е. либо alt, либо title)
*

pulka

  • Захожу иногда
  • 63
  • 0 / 1
 У меня вопрос такой. Как заставить плагин корректно работать в режиме "карусель" в IE7? Везде нормально, а именно в нем отображение не корректное. Ощущение, что путает местами строки и столбцы. В итоге на поле только стрелочка, при нажатии на которую пролетает мимо что-то в виде столбца с 2 (но скорее всего 3) картинками.
*

oleg-great

  • Захожу иногда
  • 50
  • 0 / 0
 А сколько фотографий можно подписывать cherry.jpg|Вишня|Спелая вишня. А то я одну подписываю, всё нормально, делаешь все (187) показывает ошибку "500 PHP regular expression limit reached (pcre.backtrack_limit)". Что есть предел?
« Последнее редактирование: 12.02.2012, 22:42:48 от oleg-great »
*

pulka

  • Захожу иногда
  • 63
  • 0 / 1
 У меня галерея не работает в IE8 в режиме совместимости. Подскажите как исправить этот глюк.
*

atria

  • Новичок
  • 5
  • 0 / 0
Создайте на своём компьютере файл labels.txt в кодировке UTF-8 и загрузите в папку myfolder. Файл labels.txt содержит список с указанием имени графического файла, названия и описание для каждого изображения.
Формат записи: Имя файла|Название изображения|Описание изображения
Пример файла labels.txt:
cherry.jpg|Вишня|Спелая вишня
pears.jpg|Груши|Сочные груши



Не включаются у меня почему то описания картинок...
Может какие-то хитрости есть?
« Последнее редактирование: 21.02.2012, 18:31:13 от atria »
*

atria

  • Новичок
  • 5
  • 0 / 0
Аха, есть...
Особенно для блондинок-расширения картинок надо соблюдать...
ссори -сама спросила сама ответила

*

pulka

  • Захожу иногда
  • 63
  • 0 / 1
 Спасибо! В понедельник обязательно попробую!
*

Nazgard

  • Осваиваюсь на форуме
  • 14
  • 0 / 0
Подскажите пожалуйста как сделать так чтоб не выводилось поле caption в теме boxplus, а тон считывает его из фоток и у меня везде подписывается название фотоаппарата?
*

olaf

  • Захожу иногда
  • 225
  • 23 / 0
Вы вообще сами пробовали этот способ? Он не работает, описания можно прописать только в файле labels.txt, да и то криво (т.е. либо alt, либо title)
Вот код:
Код
{gallery /}
<p>
 <a title="г. Ижевск, ул. Пушкинская, 245" href="images/stories/info/map.jpg">
   <img style="margin: 0px 0px 0px 20px; float: right;" title="г. Ижевск, ул. Пушкинская, 245" src="images/stories/info/map.jpg" alt="г. Ижевск, ул. Пушкинская, 245" width="250" height="141" />
  </a> ...
продолжение текста...
На всякий случай, для разных браузеров в примере прописаны title и alt.
Строка style="margin: 0px 0px 0px 20px; float: right;" используется для выравнивания фото вправо.
В других примерах сайтов из первого поста тоже сделаны единичные всплывающие изображения, а не только галереи...
Ниже пример
Код
<a href="/images/stories/about/map.jpg" title="Проезд по федеральной трассе Казань-Пермь. Из Ижевска: от Южной автостанции - авт.109, от  остановки ул.Гагарина - авт.151а до деревни  Лудорвай (музей в 2 км от деревни)">
 <img width="180" height="158" style="margin: 6px; float: left;" alt="Местоположение музея Лудорвай" src="/images/stories/about/map.jpg">
</a>
Тут title использован в качестве описания изображения, а alt в качестве названия.
« Последнее редактирование: 20.08.2017, 21:44:11 от olaf »
*

tutrus13

  • Осваиваюсь на форуме
  • 17
  • 0 / 0
Здравствуйте. Использую данную галерею на своем сайте и вот возник вопрос- при выводе на странице нескольких галерей- многие фотографии размазывает- вот как здесь- http://caravan-dom.com/arenda/arenda-pritsepov-dach/, но если каждая галерея отдельно на странице. то все нормально http://caravan-dom.com/arenda-beyerland-sprinter-nl.html  . У кого- то было такое? Как с этим бороться?
*

olaf

  • Захожу иногда
  • 225
  • 23 / 0
при выводе на странице нескольких галерей- многие фотографии размазывает- вот как здесь- http://caravan-dom.com/arenda/arenda-pritsepov-dach/, но если каждая галерея отдельно на странице. то все нормально http://caravan-dom.com/arenda-beyerland-sprinter-nl.html  . У кого- то было такое? Как с этим бороться?
У вас в третьей галерее вставляются тумбнейлы существенно меньше, чем в первых двух. Видимо раньше вы делали их меньшего размера, такими они в кэше и остались. Вот пример http://caravan-dom.com/cache/thumbs/c36466d443bd6687a09202e3cc8b3c2b.jpg До нового размера растягивается картинка, но качество, конечно, портится. Надо удалить старые тумбнейлы и все! Галерея сама создаст новые.
*

asirr

  • Новичок
  • 6
  • 0 / 0
Здравствуйте! Подскажите пожалуйста. При создании единичных всплывающих изображений плагин создает тумбнейл, но при этом загружается полное изображение (информация об изображении: размер 156,48 КБ (160 231 байт) ; размеры 1 000px × 667px (в масштабе 200px × 133px)
Свойства тумбнейла, созданного в галерее - размер 5,79 КБ (5 933 байт) ; размеры 150px × 100px.

т.е. если на странице много единичных всплывающих изображений, не объединенных в галерею, то размер страницы серьезно увеличивается.
Вопрос: это так и должно быть? я что-то не так делаю? как это можно исправить?
Спасибо.
*

olaf

  • Захожу иногда
  • 225
  • 23 / 0
т.е. если на странице много единичных всплывающих изображений, не объединенных в галерею, то размер страницы серьезно увеличивается.
Вопрос: это так и должно быть? я что-то не так делаю? как это можно исправить?
Чем больше изображений, тем больше размер. И это не исправить!? Но можно 1) уменьшить размеры оригиналов, 2) оптимизировать качество самих изображений (например у jpg вполне достаточно 70% качества), 3) настроить в sigplus-е использование кэша, убрать в настройках лишнее и использовать CDN, 4) большие изображения в любом случае не грузятся сразу, а только по запросу, посмотрите как это происходит, например, вот тут 5 отдельных изображений http://udmitalmas.ru/kollektiv.html.
*

asirr

  • Новичок
  • 6
  • 0 / 0
Спасибо за ответ.
Цитировать
4) большие изображения в любом случае не грузятся сразу, а только по запросу, посмотрите как это происходит, например, вот тут 5 отдельных изображений http://udmitalmas.ru/kollektiv.html.
Но все-таки непонятно. У вас тоже изображения грузятся в полном размере, но просто на экран выводятся в уменьшенном масштабе.
Например: 276px × 420px (в масштабе 100px × 145px)
То есть если у меня полное изображение размерами 1 000px × 667px и весом 156,48 КБ, то оно загружается полностью, но выводится в масштабе 200px × 133px (http://gora-zion.com/index.php/novosti/sobytiya)

Вариант - делать два изображения: одно - маленькое вставлять в текст, а ссылку делать на большое.

Пожалуйста, подскажите, где настроить прозрачность, как у вас на http://ludorvay.izhnet.ru/excurs.html
И можно ли сделать всплывающие подписи, как в галерее, только к отдельным изображениям?
И еще...
Цитировать
3) настроить в sigplus-е использование кэша, убрать в настройках лишнее и использовать CDN
Что лишнее? и какой CDN? Там в настройках их предлагается несколько.
Спасибо огромное за помощь. Это мой первый сайт, поэтому не судите строго...
*

olaf

  • Захожу иногда
  • 225
  • 23 / 0
У вас тоже изображения грузятся в полном размере, но просто на экран выводятся в уменьшенном масштабе.
Пожалуйста, подскажите, где настроить прозрачность, как у вас на http://ludorvay.izhnet.ru/excurs.html
И можно ли сделать всплывающие подписи, как в галерее, только к отдельным изображениям?
И еще...Что лишнее? и какой CDN? Там в настройках их предлагается несколько.
1)Грузятся только маленькие изображения, а большие подгружаются по запросу, при нажатии на маленькие.
Вот смотрите - http://dshi8.izhnet.ru/fotootchety.html галерей много, а грузится все быстро.
2)Вот все параметры из примера с прозрачностью http://ludorvay.izhnet.ru/excurs.html
{gallery slideshow=3000 overlay=1 margin=2 width=130 height=130 alignment=right-clear slider=boxplus.carousel slider:opacity=0.8 slider:edges=blurred slider:positioning=left}путь к файлам{/gallery}
За прозрачность отвечает opacity=0.8 (от 0 до 1)
3) К сожалению, всплывающие подписи к отдельным изображениям стандартные для картинок, а не такие, как к галереям.
4) У меня стоит Google CDN, но можно и другие попробоавать. А лишнее по вашему усмотрению, например многоязычную поддержку можно убрать.
*

tigra-uki

  • Давно я тут
  • 559
  • 11 / 0
  • Joom'лiстка
Столкнулась с тем, что не хочет брать информацию из labels.txt
Даже если там всего описания для 2-х картинок...(с расширением файлов-картинок все ок)
Как Вы думаете, может ли это зависеть от выбранного типа Lightbox?
Слишком сконцентрированное внимание необходимо разбавлять действием.
*

dimentor

  • Осваиваюсь на форуме
  • 11
  • 0 / 0
Спасибо тебе добрый человек за инструкцию!  :D
*

Rishat116

  • Осваиваюсь на форуме
  • 18
  • 1 / 0
  • Творческая личность
помогите пожалуйста. Раньше галерея нормально работала, но (не знаю после чего) появилась на фотографиях надпись "Download File" в черном прямоугольнике.
В чем может быть проблема? Как убрать эту надпись и черный прямоугольник?

Посмотреть можно здесь

*

typer

  • Осваиваюсь на форуме
  • 32
  • 2 / 1
 промучился с этим долбаным квадратом
В чем может быть проблема? Как убрать эту надпись и черный прямоугольник?

Посмотреть можно здесь


[/quote]

пол ночи убил что бы понять, весь код перелапатил, глюк оказался из за виджеткита
*

Rimka82

  • Осваиваюсь на форуме
  • 13
  • 0 / 0
Здравствуйте! Хороший плагин, вчера только установила, все работало... Сегодня решила поменять несколько изображений.. Оказалось, что два изображения в миниатюрах отображаются некорректно. Но когда открываешь полноразмерные изображения, все работает. Изображения .gif, но с другими проблем нет. Все делала одним способом, сохраняла одинаково, да и вчера одно из "проблемных" изображений отображалось нормально. В чем может быть проблема и как исправить? Пока же пришлось отказаться от анимации и делать в jpg.
*

tkulneva

  • Захожу иногда
  • 181
  • 4 / 0
  • Танюшка
Отличная инструкция! Спасибо!

Подскажите, а как правильно сделать так, чтобы изображения были разными? Я не очень поняла из текста :(

Вот, мне надо, чтобы картинка была одна, а при нажатии на нее всплывала другая картинка большого размера?

Заранее благодарю за ответ.
*

PUNK57

  • Захожу иногда
  • 231
  • 5 / 3
Во всех браузерах отображается по разному.в некоторых не пашет.Посоветуйте кто знает как имправить
« Последнее редактирование: 13.11.2012, 18:57:45 от PUNK57 »
*

Mikhail01

  • Новичок
  • 2
  • 0 / 0
Пользуюсь плагином давно, нравится, решил поделиться

меняющиеся картинки
{gallery width=180 height=180 slider=boxplus.transition animation=4000}zippo{/gallery}
пример http://www.lasergift.ru/zippo

разные изображения между превьюшкой и всплывающим окном. делаем картинку для превьюшки и грузим ее в директорию превью с заменой уже сформированных. Так избавляюсь от водяного знака на превьюшках

http://www.lasergift.ru/engrave
*

YOzhik

  • Захожу иногда
  • 74
  • 1 / 0
  • я ёжик, я упал в реку
Цитировать
В папку myfolder загрузите файлы (в форматах .jpg .png .gif, размером не более 640х640px) с вашего компьютера.
Почему противопоказание свыше 640х640? Вроде неплохо работает и с большими размерами...

Есть еще вопрос: кто-нибудь знает как в boxplus, во всплывающем окне то есть, совсем убрать первьюшки изображений?, и как следствие - чтобы плагин не создавал папку "thumbs" ?
*

Yuriy

  • Осваиваюсь на форуме
  • 24
  • 0 / 0
Подскажите начинающему, у меня Joomla 1.5, поставил плагин фотогалерею Sigplus, активировал его в плагинах, в статье написал тег {gallery}spyopa{/gallery}, но на сайте не показывает фото, а пишет ошибку [sigplus] Critical error: Image gallery folder spyopa is expected to be a path relative to the image base folder specified in the administration back-end. Если перевести гуглом, то [sigplus] Критическая ошибка: Картинная галерея папку spyopa как ожидается, будет относительный путь к папке изображений базы, указанной в админке. Наверняка кто то сталкивался, подскажите в чём причина пожалуйста.
*

eu4ria

  • Захожу иногда
  • 138
  • 4 / 0
плагин и модуль использую давно и на многих сайтах - очень доволен.  ^-^

но есть вопрос по улучшению. у меня при нажатии на миниатюру, оригинал открывается в Lightbox.
при просмотре на Ipad  можно ли  добавить возможность "пролистывания" фото справа-налево и обратно? интересует всякие ссылки на примеры как подобное пролистывание можно реализовать, да и возможно ли вообще.
есть кнопки для следущей и предыдущей фотки, но именно такие вот пожелания встречаются очень часто.
навигационные стрелки видны только, когда курсор над правой или левой частью изображения, а в iPad такое не сделаешь - поэтому люди пытаются пальцем листать, а не заложена такая возможность :(
*

darkghost

  • Живу я здесь
  • 2212
  • 97 / 0
Подскажите начинающему, у меня Joomla 1.5, поставил плагин фотогалерею Sigplus, активировал его в плагинах, в статье написал тег {gallery}spyopa{/gallery}, но на сайте не показывает фото, а пишет ошибку [sigplus] Critical error: Image gallery folder spyopa is expected to be a path relative to the image base folder specified in the administration back-end. Если перевести гуглом, то [sigplus] Критическая ошибка: Картинная галерея папку spyopa как ожидается, будет относительный путь к папке изображений базы, указанной в админке. Наверняка кто то сталкивался, подскажите в чём причина пожалуйста.
вроде тут http://joomlaforum.ru/index.php/topic,159223.0.html что-то говорили о критической ошибке
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Модуль для отображения курсов валют

Автор Геон

Ответов: 2
Просмотров: 311
Последний ответ 03.02.2024, 22:19:02
от Геон
Multilingual Virtual Keyboard for Joomla 5 [решено]

Автор creative3d

Ответов: 2
Просмотров: 266
Последний ответ 28.01.2024, 12:49:40
от creative3d
News Calendar Joomla 3.0 - html5 - Rus

Автор leo78

Ответов: 26
Просмотров: 12940
Последний ответ 21.11.2023, 18:32:21
от Bommbba
Модуль «Image Show gk4», не отображается ни картинка, ни текст

Автор kaasin

Ответов: 1
Просмотров: 1954
Последний ответ 13.05.2023, 15:42:15
от anastasya96
Плагин StopKids для маркировки сайта знаком 18+ для Joomla 1.5-3.x

Автор ecolora

Ответов: 40
Просмотров: 19671
Последний ответ 19.03.2023, 18:55:08
от ecolora