Главная » Файлы » Прочие скрипты » jQuery |
Красивое переключение стиля отображения картинок на jQuery
23.06.14, 09:07:17 | |
Интересный плагин, который позволяет переключаться между двумя стилями отображения группы картинок: между компактным стилем (все картинки располагаются друг за другом в несколько рядов и колонок с отображением названия) и расширенным стилем (Все картинки выстраиваются в одну колонку с отображением описания картинки) Для начала посмотрите ДЕМО Установка: На страницах, где будет располагаться галерея, после /head вставляйте: Код <script type="text/javascript"> $(document).ready(function(){ $("a.switch_thumb").toggle(function(){ $(this).addClass("swap"); $("ul.display").fadeOut("fast", function() { $(this).fadeIn("fast").addClass("thumb_view"); }); }, function () { $(this).removeClass("swap"); $("ul.display").fadeOut("fast", function() { $(this).fadeIn("fast").removeClass("thumb_view"); }); }); }); </script> <style type="text/css"> ul.display { float: left; width: 756px; margin: 0; padding: 0; list-style: none; border-top: 1px solid #333; border-right: 1px solid #333; background: #222; } ul.display li { float: left; width: 754px; padding: 10px 0; margin: 0; border-top: 1px solid #111; border-right: 1px solid #111; border-bottom: 1px solid #333; border-left: 1px solid #333; color:bababa; } ul.display li a { color: #e7ff61; text-decoration: none; font-size: 0.7em; } ul.display li .content_block { padding: 0 10px; } ul.display li .content_block h2 { margin: 0; padding: 5px; font-weight: normal; font-size: 1.7em; } ul.display li .content_block b { margin: 0; padding: 5px 5px 5px 245px; font-size: 1.2em; } ul.display li .content_block a img{ padding: 5px; border: 2px solid #ccc; background: #fff; margin: 0 15px 0 0; float: left; } ul.thumb_view li{ width: 250px; } ul.thumb_view li h2 { display: inline; } ul.thumb_view li b{ display: none; } ul.thumb_view li .content_block a img { margin: 0 0 10px; } a.switch_thumb { width: 122px; height: 26px; line-height: 26px; padding: 0; margin: 10px 0; display: block; background: url(/images/switch.gif) no-repeat; outline: none; text-indent: -9999px; } a:hover.switch_thumb { filter:alpha(opacity=75); opacity:.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; } a.swap { background-position: left bottom; } </style> Далее следующий код в то место, где будет сама галерея: Код <a href="#" class="switch_thumb">Switch Thumb</a> <ul class="display"> <li> <div class="content_block"> <a href="#"><img src="Ссылка на картинку" alt="" /></a> <h2><a href="#">Название картинки</a></h2> <b class="no">Описание картинки</b> </div> </li> <li> <div class="content_block"> <a href="#"><img src="Ссылка на картинку" alt="" /></a> <h2><a href="#">Название картинки</a></h2> <b class="no">Описание картинки</b> </div> </li> <li> <div class="content_block"> <a href="#"><img src="Ссылка на картинку" alt="" /></a> <h2><a href="#">Название картинки</a></h2> <b class="no">Описание картинки</b> </div> </li> <li> <div class="content_block"> <a href="#"><img src="Ссылка на картинку" alt="" /></a> <h2><a href="#">Название картинки</a></h2> <b class="no">Описание картинки</b> </div> </li> </ul> Далее залейте в папку images картинку из прикреплённого архива Материал подготовлен Apocalypse | |
Просмотров: 419 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |