MZslider - галерея для интернет-магазина
Увы, шаблон недоступен для скачивания или покупки, в связи с обращением правообладателя!
По всем вопросам обращайтесь к Администратору.
По всем вопросам обращайтесь к Администратору.
Установка
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>
<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>
<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>
Настроить оформление галереи, размеры и вид слайдов и миниатюр - можно в файле стилей. Как встроить плагин увеличения, можно понять - изучив установку самого плагина.
Теги:
