Установка скрипта: Вставлять можно в любое место, у нас например он стоит в меню
В дополнение: сто бы отабражалась ссылка и как все ссылки в меню то <a class="archLink" href="#" onclick="openPopupWin()">Таблица цветов </a> заключаем в теги <li><a class="archLink" href="#" onclick="openPopupWin()">Таблица цветов </a> </li>
Скрипты для uCoz
Очень интересный слайдер, который объединил в себе аж три функции:
перелистывание изображений, зум эффект при на ведении курсора мышки и
увеличение по клику
Слайдер показывает зум
Установка:
После /head на нужных страницах вставляйте:
Установка:
После /head на нужных страницах вставляйте:
Code
<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" />
Скопировать данный код
<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" />
Скопировать данный код
Следующий код в то место, где будет сам слайдер:
Code
<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>
Скопировать данный код
<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:
Code
<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'));
});
});
});
span></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'));
});
});
});
span></script>
Скопировать данный код
Открытый скрипт можно поместить в js файл для экономии места
Осталось лишь залить три скрипта из прикреплённого архива в папку js, три стиля в папку css и все картинки в папку images
| Заголовок | ||
|---|---|---|
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Заключение | ||
 | ||
 |  |
 |
Создавайте свои сайты на uCoz |
