Главная » Файлы » Прочие скрипты » jQuery

Замечательный слайдер с эффектом zoom и увеличением через плагины cloud-zoom и fancybox на jQuery для uCoz
23.06.14, 14:33:41

Скачать файл




Очень интересный слайдер, который объединил в себе аж три функции: перелистывание изображений, зум эффект при на ведении курсора мышки и увеличение по клику

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах вставляйте:
Код
<link rel="stylesheet" type="text/css" href="/css/style.css" />
  <link rel="stylesheet" type="text/css" href="/css/cloud-zoom.css" />
  <link rel="stylesheet" type="text/css" href="/css/jquery.fancybox-1.3.4.css" />


Следующий код в то место, где будет сам слайдер:
Код
<div id="content" class="content">
  <div class="item">
<div class="thumb_wrapper">
<div class="thumb">
<ul>
<li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Formstack 1"/></a></li>
<li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Formstack 2"/></a></li>
<li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Formstack 3"/></a></li>
</ul>
</div>
<a class="prev" href="#"></a>
<a class="next" href="#"></a>

</div>

</div>
  </div>


Следующий код в самый низ после тега /body:
Код
<script type="text/javascript" src="/js/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="/js/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="/js/cloud-zoom.1.0.2.js"></script>
<script type="text/javascript">
$(function() {  
/*  
fancybox init on each cloud-zoom element  
*/  
$("#content .cloud-zoom").fancybox({  
'transitionIn' : 'elastic',  
'transitionOut' : 'none',  
'speedIn' : 600,  
'speedOut' : 200,  
'overlayShow' : true,  
'overlayColor' : '#000',  
'cyclic' : true,  
'easingIn' : 'easeInOutExpo'  
});  

/*  
because the cloud zoom plugin draws a mousetrap  
div on top of the image, the fancybox click needs  
to be changed. What we do here is to trigger the click  
the fancybox expects, when we click the mousetrap div.  
We know the mousetrap div is inserted after  
the <a> we want to click:  
*/  
$("#content .mousetrap").live('click',function(){  
$(this).prev().trigger('click');  
});  

/*  
the content element;  
each list item / group with several images  
*/  
var $content = $('#content'),  
$thumb_list = $content.find('.thumb > ul');  
/*  
we need to set the width of each ul (sum of the children width);  
we are also defining the click events on the right and left arrows  
of each item.  
*/  
$thumb_list.each(function(){  
var $this_list = $(this),  
total_w = 0,  
loaded = 0,  
//preload all the images first  
$images = $this_list.find('img'),  
total_images= $images.length;  
$images.each(function(){  
var $img = $(this);  
$('<img/>').load(function(){  
++loaded;  
if (loaded == total_images){  
$this_list.data('current',0).children().each(function(){  
total_w += $(this).width();  
});  
$this_list.css('width', total_w + 'px');  

//next / prev events  

$this_list.parent()  
.siblings('.next')  
.bind('click',function(e){  
var current = $this_list.data('current');  
if(current == $this_list.children().length -1) return false;  
var next = ++current,  
ml = -next * $this_list.children(':first').width();  

$this_list.data('current',next)  
.stop()  
.animate({  
'marginLeft' : ml + 'px'  
},400);  
e.preventDefault();  
})  
.end()  
.siblings('.prev')  
.bind('click',function(e){  
var current = $this_list.data('current');  
if(current == 0) return false;  
var prev = --current,  
ml = -prev * $this_list.children(':first').width();  

$this_list.data('current',prev)  
.stop()  
.animate({  
'marginLeft' : ml + 'px'  
},400);  
e.preventDefault();  
});  
}  
}).attr('src',$img.attr('src'));  
});  
});  
});  
</script>


Открытый скрипт можно поместить в js файл для экономии места

Осталось лишь залить три скрипта из прикреплённого архива в папку js, три стиля в папку css и все картинки в папку images

Источник материала: http://www.yellowlemon.net

Материал подготовлен Apocalypse

Категория: jQuery | Добавил: Apocalypse | Теги: Zoom, cloud-zoom, Через, замечательный, на, fancybox, увеличением, эффектом, плагины, слайдер
Просмотров: 604 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: