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

Оригинальная галерея через плагин LyteBox для uCoz
23.06.14, 15:02:14

Скачать файл




Очень даже симпотная галерея на своём собственном движке! Подключения jQuery не требует

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

Установка:

После /head вставляйте:
Код
<style type="text/css">
#lbOverlay { position: fixed; top: 0; left: 0; z-index: 99998; width: 100%; height: 500px; background: #000 url(/images/overlay.png) repeat; }  
#lbMain { position: absolute; left: 0; width: 100%; z-index: 99999; text-align: center; line-height: 0; }  
#lbMain a img { border: none; }  
#lbOuterContainer { position: relative; background-color: #fff; width: 200px; height: 200px; margin: 0 auto; -webkit-box-shadow: 1px 0 5px #000; -moz-box-shadow: 1px 0 5px #000; box-shadow: 1px 0 5px #000; }  
#lbDetailsContainer { font: 10px 'Trebuchet MS', Arial, Helvetica, sans-serif; background-color: #fff; width: 100%; line-height: 1.4em; overflow: auto; margin: 0 auto; -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; }  
#lbLoading { position: absolute; top: 45%; left: 0%; height: 35px; width: 100%; text-align: center; line-height: 0; background: url(/images/loading.gif) center no-repeat; }  
#lbHoverNav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }  
#lbImageContainer>#lbHoverNav { left: 0; }  
#lbHoverNav a { outline: none; }  

#lbPrev { width: 49%; height: 100%; background: transparent url(/images/blank.png) no-repeat; display: block; left: 0; float: left; }  
#lbPrev:hover { background: url(/images/prev.png) left center no-repeat; }  
#lbNext { width: 49%; height: 100%; background: transparent url(/images/blank.png) no-repeat; display: block; right: 0; float: right; }  
#lbNext:hover { background: url(/images/next.png) right center no-repeat; }  
#lbClose { width: 44px; height: 10px; float: right; margin-top: 6px; background: url(/images/close.png) no-repeat right top; }  

#lbDetailsData { padding: 0 10px; line-height: 10px; color: #000; }  
#lbDetails { width: 60%; float: left; padding: 6px 0; text-align: left; }  
#lbCaption { font-weight: bold; }  
#lbNumberDisplay { float: left; display: block; padding-right: 1em; }  
#lbNavDisplay { float: left; display: block; }  
</style>

  <script type="text/javascript" src="/js/lyteinit.js"></script>


В то место, где будут картинки, вставляйте:
Код
<div id="imagewall">
<span id="imagewall-container">
<a href="Ссылка на картинку" title="pinksherbet01" target="_blank" rel="lytebox[imagewall]"><img onmouseover="if(parseFloat(this.style.opacity) != 0) p_fade(this, 'fast', 'out', '0.5', 0)" onmouseout="p_fade(this, 'fast', 'in', 1, 0)" onload="this.completed = 1; p_fade(this, 'fast', 'in', 1, 1)" src="Ссылка на картинку" alt="pinksherbet01" width="150" height="150"></a>
<a href="Ссылка на картинку" title="pinksherbet01" target="_blank" rel="lytebox[imagewall]"><img onmouseover="if(parseFloat(this.style.opacity) != 0) p_fade(this, 'fast', 'out', '0.5', 0)" onmouseout="p_fade(this, 'fast', 'in', 1, 0)" onload="this.completed = 1; p_fade(this, 'fast', 'in', 1, 1)" src="Ссылка на картинку" alt="pinksherbet01" width="150" height="150"></a>
<a href="Ссылка на картинку" title="pinksherbet01" target="_blank" rel="lytebox[imagewall]"><img onmouseover="if(parseFloat(this.style.opacity) != 0) p_fade(this, 'fast', 'out', '0.5', 0)" onmouseout="p_fade(this, 'fast', 'in', 1, 0)" onload="this.completed = 1; p_fade(this, 'fast', 'in', 1, 1)" src="Ссылка на картинку" alt="pinksherbet01" width="150" height="150"></a>
<a href="Ссылка на картинку" title="pinksherbet01" target="_blank" rel="lytebox[imagewall]"><img onmouseover="if(parseFloat(this.style.opacity) != 0) p_fade(this, 'fast', 'out', '0.5', 0)" onmouseout="p_fade(this, 'fast', 'in', 1, 0)" onload="this.completed = 1; p_fade(this, 'fast', 'in', 1, 1)" src="Ссылка на картинку" alt="pinksherbet01" width="150" height="150"></a>
</span>
</div>

<script type="text/javascript">
/* Set width of ImageWall to browser width */  

var imageWallWidth = document.getElementById('imagewall-container').offsetWidth;  
document.getElementById('imagewall').style.width = imageWallWidth + 'px';  
</script>

<script type="text/javascript">
/* Init opacity for thumbnails */  

var image_tags = document.getElementById('imagewall-container').getElementsByTagName('img');  
for(var i = 0; i < image_tags.length; i++) p_opacity(image_tags[i], (typeof image_tags[i].completed == 'undefined') ? 0 : 1);  
</script>

<script type="text/javascript" src="/js/LyteBox.js"></script>


Залейте два скрипта из прикреплённого архива в папку js и все картинки в папку images

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: LyteBox, галерея, Через, ucoz, плагин, Оригинальная, для
Просмотров: 312 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: