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

Замечательная галерея с оригинальным эффектом собирания и разбирания изображений на jQuery
23.06.14, 11:59:13

Скачать файл






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

Установка:

После /head на нужных страницах вставляйте:
Код
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen"/>
<script src="/js/cufon-yui.js" type="text/javascript"></script>
<script src="/js/ChunkFive_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1',{ textShadow: '1px 1px #fff'});  
Cufon.replace('.description',{ textShadow: '1px 1px #fff'});  
Cufon.replace('a',{ textShadow: '1px 1px #fff', hover : true});  
</script>
<style type="text/css">
.description{  
position:fixed;  
right:10px;  
top:10px;  
font-size:12px;  
color:#888;  
}  
span.reference{  
position:fixed;  
left:10px;  
bottom:10px;  
font-size:12px;  
}  
span.reference a{  
color:#888;  
text-transform:uppercase;  
text-decoration:none;  
padding-right:20px;  
}  
span.reference a:hover{  
color:#444;  
}  
</style>


Следующий код вставляйте сразу после предыдущего:
Код
<div id="im_wrapper" class="im_wrapper">
<div style="background-position:0px 0px;"><img src="Ссылка на картинку" alt="Описание" /></div>
<div style="background-position:-125px 0px;"><img src="Ссылка на картинку" alt="Описание" /></div>
<div style="background-position:-250px 0px;"><img src="Ссылка на картинку" alt="Описание" /></div>
<div style="background-position:-375px 0px;"><img src="Ссылка на картинку" alt="Описание" /></div>
<div style="background-position:-500px 0px;"><img src="Ссылка на картинку" alt="Описание" /></div>
<div style="background-position:-625px 0px;"><img src="Ссылка на картинку" alt="Описание" /></div>

<div style="background-position:0px -125px;"><img src="Ссылка на картинку" alt="Описание" /></div>
<div style="background-position:-125px -125px;"><img src="Ссылка на картинку" alt="Описание" /></div>
<div style="background-position:-250px -125px;"><img src="Ссылка на картинку" alt="Описание" /></div>
<div style="background-position:-375px -125px;"><img src="Ссылка на картинку" alt="Описание" /></div>
<div style="background-position:-500px -125px;"><img src="Ссылка на картинку" alt="Описание" /></div>
<div style="background-position:-625px -125px;"><img src="Ссылка на картинку" alt="Описание" /></div>

<div style="background-position:0px -250px;"><img src="Ссылка на картинку" alt="Описание" /></div>
<div style="background-position:-125px -250px;"><img src="Ссылка на картинку" alt="Описание" /></div>
<div style="background-position:-250px -250px;"><img src="Ссылка на картинку" alt="Описание" /></div>
<div style="background-position:-375px -250px;"><img src="Ссылка на картинку" alt="Описание" /></div>
<div style="background-position:-500px -250px;"><img src="Ссылка на картинку" alt="Описание" /></div>
<div style="background-position:-625px -250px;"><img src="Ссылка на картинку" alt="Описание" /></div>

<div style="background-position:0px -375px;"><img src="Ссылка на картинку" alt="Описание" /></div>
<div style="background-position:-125px -375px;"><img src="Ссылка на картинку" alt="Описание" /></div>
<div style="background-position:-250px -375px;"><img src="Ссылка на картинку" alt="Описание" /></div>
<div style="background-position:-375px -375px;"><img src="Ссылка на картинку" alt="Описание" /></div>
<div style="background-position:-500px -375px;"><img src="Ссылка на картинку" alt="Описание" /></div>
<div style="background-position:-625px -375px;"><img src="Ссылка на картинку" alt="Описание" /></div>
</div>
<div id="im_loading" class="im_loading"></div>
<div id="im_next" class="im_next"></div>
<div id="im_prev" class="im_prev"></div>
<div>


Следующий код вставляйте сразу после предыдущего:
Код
<script type="text/javascript">
//Paul Irish smartresize : http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/  
(function($,sr){  
// debouncing function from John Hann  
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/  
var debounce = function (func, threshold, execAsap) {  
var timeout;  
return function debounced () {  
var obj = this, args = arguments;  
function delayed () {  
if (!execAsap)  
func.apply(obj, args);  
timeout = null;  
};  
if (timeout)  
clearTimeout(timeout);  
else if (execAsap)  
func.apply(obj, args);  
timeout = setTimeout(delayed, threshold || 100);  
};  
}  
//smartresize  
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };  
})(jQuery,'smartresize');  
</script>
<script type="text/javascript" src="/js/script2.js"></script>  
<div style="clear:both;"></div>


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

Материал подготовлен и адаптирован под uCoz Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: собирания, изображений, оригинальным, галерея, на, JQuery, эффектом, разбирания, замечательная
Просмотров: 194 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: