Dinamikus képgaléria, mely kiírja képek számát és azt is, hogy éppen hányadik képnél tartunk. A galérián belül lehet lépkedni jobbra-balra, ha pedig elértük az utolsó elemet, visszaugrik az első képre.

A működő kódot ide kattintva tudod megnézni.

Videó

Videó Videó

HTML forráskód


<html>
<head>
	<title>jQuery gallery</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/slideshow.js"></script>
	<link rel="stylesheet" href="style.css"/>
</head>
<body>

	<div id="container">
		<div id="gallery">
			<img src="images/01.jpg" alt="Mező"/>
			<img src="images/02.jpg" alt="Fodros hullámok"/>
			<img src="images/03.jpg" alt="Esőcseppek"/>
			<img src="images/04.jpg" alt="Téli táj"/>
			<img src="images/05.jpg" alt="Naplemente"/>
			<img src="images/06.jpg" alt="Vízcsepp"/>
			<img src="images/07.jpg" alt="Őszi falevelek"/>
		</div>
		<div id="navigation">
			<div id="navigation_left">
				<a id="prev_image">előző</a>
			</div>
			<div id="navigation_title">
				<div id="current_image_title"></div>
				<span id="all_images_num"></span> / <span id="current_image_num"></span>
			</div>
			<div id="navigation_right">
				<a id="next_image">következő</a>
			</div>
			<div class="clear"></div>
		</div>
	</div>

</body>
</html>

CSS forráskód


* {
	padding :0;
	margin: 0;
	font-family: tahoma;
	font-size: 11px;
}
a {
	color: black;
	text-decoration: none;
	cursor: pointer;
}
a:hover {
	text-decoration: underline;
}
body {
	background: #ddd;
}
div.clear {
	clear: both;
}
div#container {
	width: 600px;
	margin: 100px auto;
	background: white;
	padding: 10px;
	-webkit-box-shadow: 5px 5px 0 #999;
	-moz-box-shadow: 5px 5px 0 #999;
	box-shadow: 5px 5px 0 #999;
}
div#gallery {
	width: 600px;
	height: 400px;
}
div#gallery img {
	position: absolute;
}
div#navigation {
	padding: 10px 0;
}
div#navigation_left {
	width: 140px;
	float: left;
}
div#navigation_title {
	float: left;
	width: 320px;
	text-align: center;
}
div#navigation_right{
	float: left;
	width: 140px;
	text-align: right;
}
div#current_image_title {
	font-weight: bold;
	margin: 0 0 5px 0;
}

jQuery forráskód


$(document).ready(function() {
	var first_image = $("#gallery img:first-child");
	var last_image = $("#gallery img:last-child");

	$("#gallery img").css("opacity",0);

	// megszámoljuk, hogy hány kép van összesen
	$("#all_images_num").text($("#gallery img").length);

	// az első elemet megjelenítjük
	first_image.addClass("current").css("opacity",1);
	
	// kiírjuk az első elem ALT attribútumát
	$("#current_image_title").text(first_image.attr("alt"));

	$("#current_image_num").text(1);

	$("#next_image").click(function() {
		var current_image = $("#gallery img.current");
		current_image.removeClass("current").animate({opacity: 0},1000);
		if(!current_image.is("#gallery img:last-child")) {
			current_image = current_image.next().addClass("current").animate({opacity: 1},1000);
		} else {
			current_image = first_image.addClass("current").animate({opacity: 1},1000);
		}
		$("#current_image_title").text(current_image.attr("alt"));
		$("#current_image_num").text(
			$("#gallery img").index(current_image)+1
		);
	});

	$("#prev_image").click(function() {
		var current_image = $("#gallery img.current");
		current_image.removeClass("current").animate({opacity: 0},1000);
		if(!current_image.is("#gallery img:first-child")) {
			current_image = current_image.prev().addClass("current").animate({opacity: 1},1000);
		} else {
			current_image = last_image.addClass("current").animate({opacity: 1},1000);
		}
		$("#current_image_title").text(current_image.attr("alt"));
		$("#current_image_num").text(
			$("#gallery img").index(current_image)+1
		);
	});

});