jQuery – képgaléria

2011-02-16

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

});