Маленькая функциональная галерея

Галерея выполнена в стиле минимализма, при этом обладает достаточной функциональностью.Для работы используется библиотека jQuery, которая по умолчанию подключена на сайте системы юКоз.Работать галерея будет на любых страницах, кроме страниц материалов модулей.Тоесть на таких страницах как главная или добавленых через "Управление страницами сайта".Понадобятся изображения с размерами 400x400 или меньше и 75x75 которые будут показаны в галерее.Поэтому может пригодиться программа для изменения изображений которую можно скачать и посмотреть видео как она работает ЗДЕСЬ.Порядок добавления изображений в галерею: src="Здесь изображения 75x75" alt="Здесь изображения 400x400" Установка галереи на страницу: Добавьте весь код из примера в поле через "Панель HTML кодов", всё настроено для работы нужно заменить только изображения на свои.

<style type="text/css">@import url("http://delaisait.ucoz.ru/script/galereya/minigalerya/css/style.css");</style> <div id="msg_slideshow" class="msg_slideshow"> <div id="msg_wrapper" class="msg_wrapper"> </div> <div id="msg_controls" class="msg_controls"> <a href="#" id="msg_grid" class="msg_grid"></a> <a href="#" id="msg_prev" class="msg_prev"></a> <a href="#" id="msg_pause_play" class="msg_pause"></a> <a href="#" id="msg_next" class="msg_next"></a> </div> <div id="msg_thumbs" class="msg_thumbs"> <div class="msg_thumb_wrapper"> <a href="#"> <img src="http://delaisait.ucoz.ru/script/galereya/minigalerya/thumbs/1.jpg" alt="http://delaisait.ucoz.ru/script/galereya/minigalerya/images/1.jpg"/> </a> <a href="#"> <img src="http://delaisait.ucoz.ru/script/galereya/minigalerya/thumbs/2.jpg" alt="http://delaisait.ucoz.ru/script/galereya/minigalerya/images/2.jpg"/> </a> <a href="#"> <img src="http://delaisait.ucoz.ru/script/galereya/minigalerya/thumbs/3.jpg" alt="http://delaisait.ucoz.ru/script/galereya/minigalerya/images/3.jpg"/> </a> <a href="#"> <img src="http://delaisait.ucoz.ru/script/galereya/minigalerya/thumbs/4.jpg" alt="http://delaisait.ucoz.ru/script/galereya/minigalerya/images/4.jpg"/> </a> <a href="#"> <img src="http://delaisait.ucoz.ru/script/galereya/minigalerya/thumbs/5.jpg" alt="http://delaisait.ucoz.ru/script/galereya/minigalerya/images/5.jpg"/> </a> <a href="#"> <img src="http://delaisait.ucoz.ru/script/galereya/minigalerya/thumbs/6.jpg" alt="http://delaisait.ucoz.ru/script/galereya/minigalerya/images/6.jpg"/> </a> </div> <div class="msg_thumb_wrapper" style="display:none;"> <a href="#"> <img src="http://delaisait.ucoz.ru/script/galereya/minigalerya/thumbs/7.jpg" alt="http://delaisait.ucoz.ru/script/galereya/minigalerya/images/7.jpg"/> </a> <a href="#"> <img src="http://delaisait.ucoz.ru/script/galereya/minigalerya/thumbs/8.jpg" alt="http://delaisait.ucoz.ru/script/galereya/minigalerya/images/8.jpg"/> </a> <a href="#"> <img src="http://delaisait.ucoz.ru/script/galereya/minigalerya/thumbs/9.jpg" alt="http://delaisait.ucoz.ru/script/galereya/minigalerya/images/9.jpg"/> </a> <a href="#"> <img src="http://delaisait.ucoz.ru/script/galereya/minigalerya/thumbs/10.jpg" alt="http://delaisait.ucoz.ru/script/galereya/minigalerya/images/10.jpg"/> </a> <a href="#"> <img src="http://delaisait.ucoz.ru/script/galereya/minigalerya/thumbs/11.jpg" alt="http://delaisait.ucoz.ru/script/galereya/minigalerya/images/11.jpg"/> </a> <a href="#"> <img src="http://delaisait.ucoz.ru/script/galereya/minigalerya/thumbs/12.jpg" alt="http://delaisait.ucoz.ru/script/galereya/minigalerya/images/12.jpg"/> </a> </div> <a href="#" id="msg_thumb_next" class="msg_thumb_next"></a> <a href="#" id="msg_thumb_prev" class="msg_thumb_prev"></a> <a href="#" id="msg_thumb_close" class="msg_thumb_close"></a> <span class="msg_loading"></span> </div> </div> <script type="text/javascript" src="http://delaisait.ucoz.ru/script/galereya/minigalerya/js/minigalereya.js"></script>

источник