+

MZslider - галерея для интернет-магазина

MZslider - галерея для интернет-магазина
Цена: БЕСПЛАТНО
Просмотров: 3546
Добавлено: 05.08.2015
Контакты: Автор (VK) (Онлайн)
Файл добавил: Alan_Writer
Архив шаблона: СКАЧАТЬ
Демо: Смотреть
Информация о материале
Еще одна неплохая галерея, названия у нее не было, поэтому я его придумал, т.к думаю она больше всего полезна будет для интернет магазинов. Здесь нет карусели для миниатюр, нет авто-прокрутки, зато скрипт также мало весит - и главное в него можно встроить плагин ImageZoom для увеличения изображений. Пример работы плагина галереи вместе с ImageZoom - можно посмотреть на демо-странице.

Установка

1. Скачайте архив. Создайте в корне файлового менеджера папку mz-slider, и в нее залейте все содержимое архива.

2. Теперь нужно прописать пути к файлу скрипта и стилей, а также скрипт вызова с настройками. Ставим это все перед </body>:
Код
<link rel="stylesheet" href="/mz-slider/mz-slider.css">
<script type="text/javascript" src="/mz-slider/mz-slider.js"></script>
<script type="text/javascript">
$(function(){
$('#products').slides({
effect: 'slide, fade', // включенные эффекты
crossfade: true, // плавная смена слайдов
slideSpeed: 200, // скорость перелистывания
fadeSpeed: 500, // скорость затухания  
generateNextPrev: true, // вкл/выкл стрелки
generatePagination: false, // вкл/выкл цифры вместо миниатюр
});
});
</script>
** Чтоб было понятно, настройки (то что можно менять или удалять) я специально подписал.

3. Теперь в нужное место вставляете сам блок галереи со слайдами.
Код
<div id="products_example">
<div id="products">
<div class="slides_container">
<!-- слайд 1 --><a href="ссылка, если надо" target="_blank"><img src="сслк на плн избржн 1" width="366" height="290" alt=""></a>
<!-- слайд 2 --><a href="ссылка, если надо" target="_blank"><img src="сслк на плн избржн 2" width="366" height="290" alt=""></a>
<!-- слайд 3 --><a href="ссылка, если надо" target="_blank"><img src="сслк на плн избржн 3" width="366" height="290" alt=""></a>
</div>
<ul class="pagination">
<!-- миниатюра 1 --><li><a href="#"><img src="сслк на умншн избржн 1" width="55" height="41" alt=""></a></li>
<!-- миниатюра 2 --><li><a href="#"><img src="сслк на умншн избржн 2" width="55" height="41" alt=""></a></li>
<!-- миниатюра 3 --><li><a href="#"><img src="сслк на умншн избржн 3" width="55" height="41" alt=""></a></li>
</ul>
</div>
</div>

Настроить оформление галереи, размеры и вид слайдов и миниатюр - можно в файле стилей. Как встроить плагин увеличения, можно понять - изучив установку самого плагина.

Теги: интернет-магазин, галерея, для uCoz, Слайдер, MZslider, увеличение
Комментарии (1)
avatar
1
А как сделать так, что бы изображения уменьшались автоматически?