Быстрая галерея на jquery без плагинов

Я не очень люблю создавать «велосипеды» для сайтов, то есть собственные разработки, если есть уже готовые решения. Но, в некоторых случаях, все же приходится. Особенно это актуально с CMS OpenCart – с её зоопарком версий.

Вот, например, в этой заметке я научу вас как буквально за несколько строк создать симпатичную галерею на jquery. Может пригодиться еще в том случае, если ваш сайт просто перенасыщен плагинами и готовое решение из коробки конфликтует с уже установленными, а вам надо просто создать галерею на одной странице сайта и забыть про неё.

Итак, для начала посмотрите демо пример, а то может это вам и не надо:

Как вы видите, здесь при нажатии меняются местами изображения и текст, причем это все происходит даже немного анимированно. Такую галерею можно набросать за пару минут, зная jquery. Сначала верстка:

<div class="sliderrr">
<div class="inner2"> 
<div class="pick2">
<a href="#"><img src="img/art351-1.jpg" /></a>
</div>
<div class="ms">
<br /><br />
<h4>Соболь</h4>
<br /><br />				
</div>
</div>
</div>

<div class="rec">
<div class="inner">
<div class="pick"><a href="#" onclick="smena('1'); return false;"><img id="thum1" src="img/art351-2.jpg" /></a></div>
<br />
<h4><span id="nam1" class="point" onclick="smena('1'); return false;">Кот</span></h4>
</div>
</div>

<div class="rec">
<div class="inner">
<div class="pick"><a href="#" onclick="smena('2'); return false;"><img id="thum2" src="img/art351-3.jpg" /></a></div>
<br />
<h4><span id="nam2" class="point" onclick="smena('2'); return false;">Хомяк</span></h4>
</div>
</div>
<div style="clear: both;"></div>

Теперь стили:

<style>
.rec {
    min-height: 300px!important;
    margin-right: 15px;
    text-align: center;
    float: left;
}
	.pick > a {
width: 190px;
    height: 190px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 50%;
    display: block;	
	
}	
.pick > a > img {
width: auto;
    height: 100%;
    margin: 0 auto;
max-height: 250px!important;
max-width: none!important;
-webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
	}
.pick > a > img:hover{
  -webkit-filter: none!important;
  -moz-filter: none!important;
  -ms-filter: none!important;
  -o-filter: none!important;
  filter: none!important;
  }

.pick2 {
float: left;
margin-right: 100px;	
}
.pick2 > a {
width: 400px;
    height: 400px;
    overflow: hidden;
    border-radius: 50%;
    display: block;	
	
}	
.pick2 > a > img {
width: auto;
    height: 100%;
max-height: 450px!important;
max-width: none!important;
	}
.sliderrr {
	    min-height: 400px;
		}
</style>

Ну а теперь самое интересное: javascript:

dat = new Date();
var tim1 = dat.getTime();

function smena(id) {
dat = new Date();
tim2 = dat.getTime();

if ((tim2-500)>tim1) {

dat = new Date();	
tim1 = dat.getTime();

var im = jQuery('#thum'+id).attr('src');
var nam = jQuery('#nam'+id).text();

var im2 = jQuery('.pick2 > a > img').attr('src');
var nam2 = jQuery('.ms > h4').text();

var time = 500;


jQuery('#thum'+id).fadeOut(time, function() {   
  $(this).attr('src',im2).fadeIn(time);
 });
 

jQuery('#nam'+id).fadeOut(time, function() {   
  $(this).text(nam2).fadeIn(time);
 }); 
 
 
jQuery('.pick2 > a > img').fadeOut(time, function() {   
  $(this).attr('src',im).fadeIn(time);
 });
 
 
jQuery('.ms > h4').fadeOut(time, function() {   
  $(this).text(nam).fadeIn(time);
 }); 

dat = new Date();
tim1 = dat.getTime();
}
}	

Разберём подробнее код галереи. В 13 - 17-й строках мы получаем элементы (точнее атрибут элемента и текст в нем) по идентификаторам. Сначала из того, на который нажали, а потом – верхнего. 19 строка – задаем время анимации, полсекунды в данном случае. С 22 по 39 строки мы с помощью функции fadeIn() скрываем и отображаем необходимые элементы.

Вы спросите, а зачем в коде какие-то dat, tim1 и tim2? А это так называемая «защита от дурака», простейшая реализация. Вдруг вам захочется пощелкать по картинкам, не дожидаясь окончания анимации? Вот мы и вводит пару переменных – время, разница между которыми если меньше определенного значения, то функция не будет выполняться.

Вот так можно создать простую галерею на jquery за пять минут без плагинов и любому чайнику. Кстати, обратите внимание, что она адаптивная – то есть будет нормально отображаться и на телефонах, без горизонтальной прокрутки и так далее.

Если вам потребуется какая-либо помощь по галереям, jquery, js или сайтам вообще, то вы можете обратиться ко мне. За небольшую плату я вам помогу.
заметки, javascript, jquery, галерея