Главная » Файлы » Прочие скрипты » 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

Категория: jQuery | Добавил: Apocalypse | Теги: красивое, картинок, стиля, переключение, на, отображения, JQuery
Просмотров: 305 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: