Простая галерея на jQuery — Дайри (бывший Diary.ru)

16:07 Простая галерея на jQuery

В связи с грядущим Новым годом оказалась я без срочной работы, и с заданием - выучить jQuery. Оно, конечно, полезно для верстальщика. Но вот с какой стороны подступиться?
После недели теории, я решила все же опробовать хоть что-то на практике. Вспомнилось сколько раз я мучилась, подгоняя под требования ТЗ всевозможные галереи, которых сейчас в интернете великое множество. Отсюда и родилась идея реализации галереи удобной для верстальщика, а главное простой!

Поэтому хочу показать свою, надеюсь простую и понятную.
читать дальше
Код html минимален и прост, как 5 копеек:

<!DOCTYPE HTML>
<html>
<head>
<sсript src="http://code.jquery.com/jquery-latest.js"></sсriрt>
<sсript src="js/gallery.js"></sсriрt>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul id="gallerey">
<li><img src="image/0_4e695_7842031a_XL.jpg" /></li>
<li><img src="image/110.jpg" /></li>
<li><img src="image/926600_12.jpg" /></li>
<li><img src="image/202851549.jpg" /></li>
<li><img src="image/560506482.jpg" /></li>
<li><img src="image/desktopwallpapers.org.ua-4121.jpg" /></li>
<li><img src="image/x_51c00eff.jpg" /></li>
<li><img src="image/x_a023852b.jpg" /></li>
</ul>
</body>
</html>

Вот этот небольшой список изображений, с одним единственным идентификатором, и есть будущая галерея.

К ней небольшое оформление (css3 использовала просто для красоты, необходимости в нем нет):

body{
	background:#DDDDDD;}

/* В данном селекторе мы задаем ширину, высоту, обводку, позиционирование, фоновый цвет, цвет и размер теней */

#gallerey_wrapper{
	width: 600px;
	min-width: 320px;
	padding: 20px;
	height: 350px;
	padding: 25;
	position: relative;
	background: #fff;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
	background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	margin-top: 50px;
	margin-right: auto;
	margin-bottom: 25px;
	margin-left: auto;
}

/* Это верхняя левая ленточка */

#gallerey_wrapper:before{
	content: '';
	position:absolute;
	top: -5px;
	left: -5px;
	width: 130px;
	height: 30px;
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.1);
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-webkit-transform:translate(-50px,10px)
						skew(10deg,10deg)
						rotate(-50deg);
	-moz-transform:translate(-50px,10px)
						skew(10deg,10deg)
						rotate(-50deg);
		-o-transform:translate(-50px,10px)
						skew(10deg,10deg)
						rotate(-50deg);
		transform:translate(-50px,10px)
						skew(10deg,10deg)
						rotate(-50deg);
}

/* Это правая нижняя ленточка */
#gallerey_wrapper:after{
	content: '';
	position:absolute;
	right:-5px;
	bottom:-5px;
	width: 130px;
	height: 30px;
	background: rgba(0, 0, 0, 0.1);
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-webkit-transform: translate(50px,-20px)
						skew(10deg,10deg)
						rotate(-50deg);
	-moz-transform: translate(50px,-20px)
						skew(10deg,10deg)
						rotate(-50deg);
	-o-transform: translate(50px,-20px)
						skew(10deg,10deg)
						rotate(-50deg);
	transform: translate(50px,-20px)
						skew(10deg,10deg)
						rotate(-50deg)
}


#prev, 
#next{
	width: 35px;
	height:35px;
	top: 50%;
	margin-top: -17px;
	text-align:center;
	cursor: pointer;
	opacity:0.5;
	position:absolute;z-index:10;}

#prev{
	background:url(../image/prev.png) center center no-repeat;
	left:15px;}

#next{
	background:url(../image/next.png) center center no-repeat;
	right:15px;}

#prev:hover, 
#next:hover{
	opacity:1;
}

#gallerey{
visible: hidden;
}

#image{
	z-index:5;
	height:auto
}
#image>img{
	max-width:100%;
	display:block;
	margin:0 auto;
	max-height:320px;
}

#navigation{
	clear: both;
    height: 24px;
	text-align:center;
	position:absolute;
	left: 50%;
	bottom:10px;
	z-index:10;}	

#navigation span{
	width: 24px;
	height: 24px;
	float: left;
	margin: 0;
	cursore: pointer;
	display: inline-block;
	background: url(../image/noselect_input.png);
	cursor: pointer;
}

#navigation span.active,
#navigation span:hover{
	background:url(../image/select_input.png);
	}

И собственно сама галерея. За основу создания взят массив и работа с ним:

// переменные
var mass = [];
var active = 0;

//вызов галереи
$(function(){
	createGallery("#gallerey";);
});

function showMass(active){
	$("#navigation span";).removeClass("active";);
	$("#image";).html('<img src="'+mass[active]+'" />';);
	$("#navigation span";).eq(active).addClass("active";);
}

function createGallery(id_gall){
	$(id_gall).wrap('<div id="gallerey_wrapper"></div>';).after('<div id="next"></div><div id="navigation"></div>';).before('<div id="image"></div><div id="prev"></div>';).hide();
	var number_elem = $(id_gall +" li";).size();
	for (i=0; i < number_elem; i++){
		mass[i] = $(id_gall +" li";).eq(i).children("img";).attr("src";);
		$("#navigation";).append('<span data-index-element="'+i+'"></span>';);
	}
	
	$("#navigation";).width($("#navigation span";).width()*number_elem).css("margin-left", -($("#navigation span";).width()*number_elem)/2);
	$("#navigation span";).eq(active).addClass("active";);
	$("#image";).html('<img src="'+mass[active]+'" />';);
}	

$("#prev";).live("click", function(){
	var n = $(this).next().find("li";).size()-1;
	if (active > 0){
		--active}
	else {
		active =  n}
	showMass(active);
	});
	
$("#next";).live("click", function(){
	var n = $(this).prev().find("li";).size()-1;
	if (active < n){
		++active}
	else{
		active = 0;}
	showMass(active);
	});

$("#navigation span";).live("click", function(){
	active = $(this).attr("data-index-element";);
	showMass(active);
	});

Все основные настройки сосредоточены в css (что не может не радовать верстальщика). И навесить поверх можно все, что угодно. Хоть иконки картинок сделать, вместо булетов. Хоть модальное окно, в которое будет выводится изображение. Хоть описания изображений. Для ИЕ придется подгонять стили (впрочем они тут больше для примера), но галерея прекрасно сохраняет функционал и в ИЕ6

Перейти к записи

@темы: HTML5, Рабочие заметки, JQuery, CSS3, Я