| Главная » Файлы » Прочие скрипты » jQuery |
Оригинальная галерея через плагин jswitch на jQuery
| 23.06.14, 14:43:50 | |
 Неплохая галерея с интересным эффектом смены изображений. Есть небольшой минус - неопытные пользователи, плохо разбирающиеся в css навряд ли смогут адаптировать под свои нужды Для начала посмотрите ДЕМО Установка: После /head на нужных страницах вставляйте: Код <script type="text/javascript" src="/js/jquery.jswitch.js"></script> <script> $(document).ready(function(){ $('#myGallery').jswitch({ callback:function(jswitch){ $('#next').click(function(){ jswitch.nextImage(); }); $('#prev').click(function(){ jswitch.prevImage(); }); } }); }); </script> <style> #myGallery{border:4px solid #eee;width:940px;height:360px;overflow:hidden;position:relative;padding:0;margin:0;background:#000;margin:20px;} .controls{text-indent:-10000px;background:url(/images/controls.png) no-repeat;width:30px;height:56px;display:block;position:absolute;} .controls#prev{margin-top:160px;margin-left:-10px;} .controls#next{background-position:-30px 0;margin-top:-230px;margin-left:970px;} </style> Следующий код в то место, где будет сама галерея: Код <a href="#" class="controls" id="prev"> Prev image</a> <div id="myGallery"> <ul> <li><img src="Ссылка на картинку" alt="" /></li> <li><img src="Ссылка на картинку" alt="" /></li> <li><img src="Ссылка на картинку" alt="" /></li> <li><img src="Ссылка на картинку" alt="" /></li> <li><img src="Ссылка на картинку" alt="" /></li> </ul> </div> <a href="#" class="controls" id="next">Next image</a> Осталось лишь залить скрипт из прикреплённого архива в папку js и картинку в папку images Материал подготовлен Apocalypse | |
| Просмотров: 1290 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |