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ó

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
);
});
});