закрыть

шаблоны для MaxSite CMS от RuTheme

JQuery слайдер изображений с Bounce эффектом.

JQuery слайдер изображений с Bounce эффектом.

Простой jquery слайдер-галерея изображений.

На самом деле Bounce эффект можно изменить на любой имеющийся в jquery эффект (варианты см.здесь).

Довольно простой и прикольный jquery слайдер/галерея. Выглядит стильно и компактно.

Изображение разворачивается при наведении курсора, а так же сделан второй вариант галереи, в котором изображения разворачиваются при клике на них.

Поскольку код галереи довольно элементарный, ее легко встроить куда угодно. При небольших изменениях можно добиться интересных результатов, например сделать слайдер меню или какого-либо контента.

Далее представлен код с 6 вариантами использования галереи.

<div id="vnav"> 
	<h2>Одиночное изображение при наведении мыши</h2>
	
	<ul id="single"> 
		<li><img src="6.jpg" width="782" alt="" height="440" /></li> 
	</ul> 
	
	<br clear="all" />
	
	<h2>Одиночное изображение по клику</h2>
	
	<ul id="single-click"> 
		<li><img src="6.jpg" width="782" alt="" height="440" /></li> 
	</ul> 
	
	<br clear="all" />
	<h2>Горизонтальная галерея при наведении мыши</h2>
	
	<ul id="horizontal"> 
		<li><img src="1.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="2.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="3.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="4.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="5.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="6.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="7.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="8.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="9.jpg" width="782" alt="" height="440" /></li> 
	</ul> 
	
	<br clear="all" /><br clear="all" />
	
	<h2>Горизонтальная галерея по клику</h2>
	
	<ul id="horizontal-click"> 
		<li><img src="1.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="2.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="3.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="4.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="5.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="6.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="7.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="8.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="9.jpg" width="782" alt="" height="440" /></li> 
	</ul> 
	
	<br clear="all" /><br clear="all" />
	
	<h2>Вертикальная галерея при наведении мыши</h2>
	
	<ul id="vertical"> 
		<li><img src="1.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="2.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="3.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="4.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="5.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="6.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="7.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="8.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="9.jpg" width="782" alt="" height="440" /></li> 
	</ul> 
	
	<br clear="all" />
	
	<h2>Вертикальная галерея по клику</h2>
	
	<ul id="vertical-click"> 
		<li><img src="1.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="2.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="3.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="4.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="5.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="6.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="7.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="8.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="9.jpg" width="782" alt="" height="440" /></li> 
	</ul> 
	
	<br clear="all" />
	
	
	
</div>

Теперь придадим немного стиля нашему слайдеру

/* CSS Document */
ol, ul {
	list-style: none;
}
#horizontal li img, #horizontal-click li img{ 
	height: 100%;
	border: 5px solid white;}
#horizontal li, #horizontal-click li  {
	height:447px;
	width:42px;
	float:left;
	cursor:pointer;
	overflow:hidden;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	line-height: 1;
	-o-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 1px 3px #999;
	-o-box-shadow: 0 1px 3px #999;
	-webkit-box-shadow: 0 1px 3px #999;
	box-shadow: 0 1px 3px #999;
	text-shadow: 0 -1px 1px #222;
	border-right: 5px solid white;
	border-bottom: 5px solid white;
}
#vertical li img, #vertical-click li img{ 
	width: 100%;
	border: 5px solid white;
}
#vertical li, #vertical-click li {
	height:42px;
	width:650px;
	cursor:pointer;
	overflow:hidden;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	line-height: 1;
	-o-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 1px 3px #999;
	-o-box-shadow: 0 1px 3px #999;
	-webkit-box-shadow: 0 1px 3px #999;
	box-shadow: 0 1px 3px #999;
	text-shadow: 0 -1px 1px #222;
	border-right: 5px solid white;
	border-bottom: 5px solid white;
}
#single li img, #single-click li img{
width: 100%;
border: 5px solid white;
}
#single li, #single-click li {
	height:42px;
	width:650px;
	cursor:pointer;
	overflow:hidden;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	line-height: 1;
	-o-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 1px 3px #999;
	-o-box-shadow: 0 1px 3px #999;
	-webkit-box-shadow: 0 1px 3px #999;
	box-shadow: 0 1px 3px #999;
	text-shadow: 0 -1px 1px #222;
	border-right: 5px solid white;
	border-bottom: 5px solid white;
}

Объясню такой момент.


#vertical li img, #vertical-click li img{

width: 100%;

border: 5px solid white;

}

#horizontal li img, #horizontal-click li img{

height: 100%;

border: 5px solid white;}


Этими строками мы задали отображение картинок постоянно во всю ширину у вертикального слайдера, у горизонтального во всю высоту и добавили белую рамку толщиной 5px. Если так и оставить, то когда вы посмотрите в браузере, увидите что рамка видна только слева и сверху. Это вызвано тем, что даже в свернутом состоянии слайдера его изображения имеют свои реальные размеры - они не сужаются и не расширяются, а прячутся в блоках li и если изображение больше размеров слайдера, как у меня, то мы не увидим всю рамку картинки целиком, поскольку она будет скрыта блоком li.


Чтобы обойти эту проблему мы задаем для блока li нижнюю и правую границу белого цвета 5px - так же как у изображений, вот этими строками:


border-right: 5px solid white;

border-bottom: 5px solid white;


Быть может Вы подумали: "Зачем такие сложности? Можно ведь просто добавить рамку к блоку li и не париться..."


Действительно, так сделать можно и выглядело бы это точно так же.


Однако есть как всегда одно небольшое "Но".

Если к блоку li применить рамку со всех сторон, то наблюдается некорректная работа слайдера, а именно при перелистывании слева направо или сверху вниз некоторые изображения проскакивают мимо курсора и не раскрываются. Это замечено пока что при использовании Bounce эффекта. Чтобы такой проблемы не возникало лучше сделать как описывается в примере или вообще не делать рамку. Ну а также можно применить какой-то другой эффект для раскрытия изображений.


Теперь добавим динамики

$(document).ready(function(){
	
	var ease = 'easeOutBounce';
	var vertHeight = '400px';
	var horWidth = '650px';
	//single
	$("ul#single li").mouseover(function(){
        $(this).stop().animate({height: vertHeight},{queue:false, duration:600, easing:  ease })
	});
    $("ul#single li").mouseout(function(){
         $(this).stop().animate({height:'42px'},{queue:false, duration:600, easing: ease})
    });
	
	//horizontal
    $("ul#horizontal li").mouseover(function(){
        $(this).stop().animate({width:horWidth},{queue:false, duration:600, easing: ease})
    });
    $("ul#horizontal li").mouseout(function(){
        $(this).stop().animate({width:'40px'},{queue:false, duration:600, easing: ease})
    });
	
	//vertical
	 $("ul#vertical li").mouseover(function(){
        $(this).stop().animate({height: vertHeight},{queue:false, duration:600, easing: ease})
    });
    $("ul#vertical li").mouseout(function(){
        $(this).stop().animate({height:'42px'},{queue:false, duration:600, easing: ease})
    });
	
	//single-click
	$("ul#single-click li").toggle(function(){
        $(this).stop().animate({height: vertHeight},{queue:false, duration:600, easing: ease})
		}, function () {
        $(this).stop().animate({height:'42px'},{queue:false, duration:600, easing: ease})
      }
	);
		
	//horizontal-click
    $("ul#horizontal-click li").toggle(function(){
	$("ul#horizontal-click li").stop().animate({width:'42px'},{queue:false, duration:600, easing: ease});
        $(this).stop().animate({width: horWidth},{queue:false, duration:600, easing: ease})
		}, function () {
         $(this).stop().animate({width:'40px'},{queue:false, duration:600, easing: ease})
      }
	);
	//vertical-click
	 $("ul#vertical-click li").toggle(function(){
		$("ul#vertical-click li").animate({height:'42px'},{queue:false, duration:600, easing: ease});
        $(this).stop().animate({height: vertHeight},{queue:false, duration:600, easing: ease})
		}, function () {
         $(this).stop().animate({height:'42px'},{queue:false, duration:600, easing: ease})
      }
	);
   
});

Для того чтобы поменять эффект раскрытия изображения, достаточно заменить значение переменной "var ease = 'easeOutBounce';" на свое, например на "easeInOutCirc", таким образом у вас в самом начале будет строчка "var ease = 'easeInOutCirc';" и соответственно совершенно другое поведение изображений при раскрытии.

С помощью переменной "vertHeight" необходимо задать высоту раскрывающегося изображения в вертикальной галерее.

С помощью переменной "horWidth" необходимо задать ширину раскрывающегося изображения в горизонтальной галерее.


При копировании материала ссылка на данную статью обязательна.

Поделиться мнением!

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

Используйте нормальные имена. Ваш комментарий будет опубликован после проверки.

Вы можете войти под своим логином или зарегистрироваться на сайте.

Авторизация MaxSiteAuth. Loginza

(обязательно)