Стильный слайдер изображений с Lightbox эффектом на jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<link rel="stylesheet" type="text/css" href="/css/jquery.thumbox.1.2.css" /> <script type="text/javascript" src="/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="/js/jquery.thumbox.1.2.js"></script> <script type="text/javascript"> $(function(){ $('#demo1').thumbox(); $('#demo2').thumbox({thumbs:4, dockPosition:'bottom', maxThumbWidth:50, labelPosition:'top'}); $('#demo3').thumbox({overlayColor:'#032', overlaySpeed:200, keyboardNavigation:false}); $('#demo4').thumbox({showOne:true}); $('#demo5').thumbox({thumbs:3, openImageEffect:'easeOutBack', closeImageEffect:'easeInBack', scrollDockEffect:'easeInOutBack'}); $('#demo6').thumbox({openImageEffect:'easeOutBack', closeImageEffect:'easeInBack'}); }) </script> |
2#: Следующий код в то место, где будут изображения: 1) Для демо 1:
|
1 2 3 4 5 |
<div id="demo1"> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> </div> |
|
1 2 3 4 5 |
<div id="demo2"> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> </div> |
|
1 2 3 4 5 |
<div id="demo3"> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> </div> |
|
1 2 3 4 5 |
<div id="demo4"> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> </div> |
|
1 2 3 4 5 |
<div id="demo5"> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> </div> |
|
1 2 3 4 5 |
<div id="demo6"> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> </div> |
