На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Быстрая галерея на 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, галерея





Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.




Мужик и медведь
Рецензия на книгу Страуд Джонатан Трилогия Бартимеуса


© upread.ru 2013-2019
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.