Главная » Файлы » Прочие скрипты » 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 | |
Просмотров: 304 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |