Галерея изображений через плагин Slidesjs на jQuery

Разместил: Al-Sher
Опубликовано: 25 июля 2015

Скачать Отличная галерея, которая занимает мало места и в то же время является вполне функциональной Для начала посмотрите ДЕМО Установка: 1#: После /head на нужных страницах вставляйте:

<script src="/js/slides.min.jquery.js"></script> <script> $(function(){ $('#products').slides({ preload: true, preloadImage: '/images/loading.gif', effect: 'slide, fade', crossfade: true, slideSpeed: 200, fadeSpeed: 500, generateNextPrev: true, generatePagination: false }); }); </script> <link rel="stylesheet" href="/css/global.css">

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<script src="/js/slides.min.jquery.js"></script> <script> $(function(){   $('#products').slides({   preload: true,   preloadImage: '/images/loading.gif',   effect: 'slide, fade',   crossfade: true,   slideSpeed: 200,   fadeSpeed: 500,   generateNextPrev: true,   generatePagination: false   });   });   </script> <link rel="stylesheet" href="/css/global.css">

2#: Следующий код в то место, где будет галерея:

<div id="products_example"> <div id="products"> <div class="slides_container"> <a href="Ссылка" target="_blank" rel="noopener"><img src="Ссылка на большое изображение" width="366"></a> <a href="Ссылка" target="_blank" rel="noopener"><img src="Ссылка на большое изображение" width="366"></a> <a href="Ссылка" target="_blank" rel="noopener"><img src="Ссылка на большое изображение" width="366"></a> <a href="Ссылка" target="_blank" rel="noopener"><img src="Ссылка на большое изображение" width="366"></a> <a href="Ссылка" target="_blank" rel="noopener"><img src="Ссылка на большое изображение" width="366"></a> </div> <ul class="pagination"> <li><a href="#"><img src="Ссылка на маленькое изображение" width="55"></a></li> <li><a href="#"><img src="Ссылка на маленькое изображение" width="55"></a></li> <li><a href="#"><img src="Ссылка на маленькое изображение" width="55"></a></li> <li><a href="#"><img src="Ссылка на маленькое изображение" width="55"></a></li> <li><a href="#"><img src="Ссылка на маленькое изображение" width="55"></a></li> </ul> </div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<div id="products_example"> <div id="products"> <div class="slides_container"> <a href="Ссылка" target="_blank" rel="noopener"><img src="Ссылка на большое изображение" width="366"></a> <a href="Ссылка" target="_blank" rel="noopener"><img src="Ссылка на большое изображение" width="366"></a> <a href="Ссылка" target="_blank" rel="noopener"><img src="Ссылка на большое изображение" width="366"></a> <a href="Ссылка" target="_blank" rel="noopener"><img src="Ссылка на большое изображение" width="366"></a> <a href="Ссылка" target="_blank" rel="noopener"><img src="Ссылка на большое изображение" width="366"></a> </div> <ul class="pagination"> <li><a href="#"><img src="Ссылка на маленькое изображение" width="55"></a></li> <li><a href="#"><img src="Ссылка на маленькое изображение" width="55"></a></li> <li><a href="#"><img src="Ссылка на маленькое изображение" width="55"></a></li> <li><a href="#"><img src="Ссылка на маленькое изображение" width="55"></a></li> <li><a href="#"><img src="Ссылка на маленькое изображение" width="55"></a></li> </ul> </div> </div>

Осталось лишь залить JS файл из прикреплённого архива в папку js, CSS файл в папку css и все картинки в папку images

Автор публикации

не в сети 3 дня

Al-Sher

27

Комментарии: 47Публикации: 59Регистрация: 13-06-2015

Метки: jQuerySlidesjsГалерея

• Следующая публикация Слайдер контента через плагин slideJS на jQuery
• Предыдущая публикация Слайдер изображений через плагин Orbit на jQuery

Вам может также понравиться...

• Слайдер изображений через плагин Barousel на jQuery

  Разместил: Apocalypse 5 июля 2015

  - Apocalypse 5 июля 2015 Last modified 26 декабря 2015

• Стильные спойлеры на CSS3 и jQuery

  Разместил: Apocalypse 13 марта 2016

  - Apocalypse 13 марта 2016 Last modified 15 января 2019

• jQuery Ripples - эффекты разводов на воде при помощи HTML5 и jQuery

  Разместил: Apocalypse 3 октября 2015

  - Apocalypse 3 октября 2015 Last modified 7 декабря 2015

Подписаться

Уведомить о

новых последующих комментариях новых ответах на мои комментарии

Label

{} [+]

Имя*

Email*

Сайт

Δ

Label

{} [+]

Имя*

Email*

Сайт

Δ

8 Комментарий

Старые

Новые

Межтекстовые Отзывы

Посмотреть все комментарии

Участник

old_lotar

2 лет назад

Отличный слайдер!Немного недоработан. После открытия картинки товара в полном формате нет крестика для закрытия этого всплывающего изображения. Кто может предложить варианты доработки?

1

Ответить

Администратор

Apocalypse

2 лет назад

Ответить на  old_lotar

Вообще там картинки открываются в отдельном окне, так что крестики тут не нужны

0

Ответить

Участник

old_lotar

2 лет назад

Ответить на  Apocalypse

Я разве говорил , что окно не открывается ?Я говорил о том - как закрыть окно? Единственный способ - это стрелкой <-- назад в браузере. В демо опубликована не совсем та версия. В нормальной версии клик по большой картинке вызывает увеличенное изображение в новом окне. Вот про него я и говорю.

1

Ответить

Администратор

Apocalypse

2 лет назад

Ответить на  old_lotar

Можно ссылку на "нормальную" версию?

0

Ответить

Участник

old_lotar

2 лет назад

Ответить на  Apocalypse

http://www.seomark.ru/gallery6.html . Кстати, здесь как раз и используется фотография слайдера с "правильным" слайдером.

1

Ответить

Администратор

Apocalypse

2 лет назад

Ответить на  old_lotar

У меня и на этом сайте все изображения открываются в новой вкладке

0

Ответить

Участник

old_lotar

2 лет назад

Ответить на  Apocalypse

Мы друг друга не понимаем. Изображения при клике по большой картинке открываются в новом окне. Однако, чтобы вернуться ИЗ ЭТОГО окна в предыдущий режим, приходится нажимать <-- возврат . Немного неудобно. Если бы был крестик и при клике по нему происходил возврат в предыдущее окно выбора товара.

1

Ответить

Администратор

Apocalypse

2 лет назад

Ответить на  old_lotar

В этом случае проще прикрутить какую-то простую библиотеку для увеличения изображений

0

Ответить