kleine bildergalerie mit jquery

synaptic

brauch ich ja net viel zu sagen...
hab mal zwei dummy-pics mehrfach eingebaut, damit man sieht wie es funzt..

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>query_gallery_scratchFile</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
/* <![CDATA[ */ 
bilder = new Array();


        bilder[0] = new Image();
        bilder[0].src = "http://forenpics.kaninchenrettung.de/230509/image042.jpg";


        bilder[1] = new Image();
        bilder[1].src = "http://forenpics.kaninchenrettung.de/230509/image016.jpg";


        bilder[2] = new Image();
        bilder[2].src = "http://forenpics.kaninchenrettung.de/230509/image042.jpg";


        bilder[3] = new Image();
        bilder[3].src = "http://forenpics.kaninchenrettung.de/230509/image016.jpg";


        bilder[4] = new Image();
        bilder[4].src = "http://forenpics.kaninchenrettung.de/230509/image042.jpg";


        bilder[5] = new Image();
        bilder[5].src = "http://forenpics.kaninchenrettung.de/230509/image016.jpg";

        //scriptcode für bildergalerie - Mouseover für Thumbnails
        $("#wrapperdiv").ready(function(){ 
            $("img.normalthumb").mouseover(function(){
                var picSource = $("#anzeigePic").attr("src");
                var thumbId = $(this).attr("id");
                $("#anzeigePic").attr("src", bilder[thumbId.substr(5, thumbId.length)].src);
                $(this).removeClass("normalthumb");
                $(this).addClass("hoverthumb");
            });

            $("img.normalthumb").mouseout(function(){
                $(this).removeClass("hoverthumb");
                $(this).addClass("normalthumb");
            });

            $("#anzeigePic").attr("src", bilder[0].src);
        });
/* ]]> */ 
</script>


<style type="text/css">
.hoverthumb {
    opacity:0.5;
    -moz-opacity:0.5;                           /* ff>3 */
     filter:Alpha(opacity=50, finishopacity=50); /* ie */
     height:60px;
     width:60px;
     margin-right:12px;
     margin-top:12px;
     float:left;
  }


.normalthumb{
    height:60px; 
    width:60px; 
    margin-right:12px; 
    margin-top:12px; 
    float:left;
}
</style>
</head>
<body>


<!-- WrapperDIV für Bildergalerie -->
    <div id="wrapperdiv"><noscript>
        <strong>
            <big>Aktivieren sie bitte JAVASCRIPT für volle Funktionalität der Bildergalerie</big>
        </strong>
    </noscript>
        <!-- DIV für große Anzeige -->
        <div id="showdiv">
            <img src="" id="anzeigePic" style="width:420px;" />
        </div>

        <!-- DIV für Thumbnails -->
        <div id="prevdiv">
            <img id="thumb0" class="normalthumb" src="http://forenpics.kaninchenrettung.de/230509/th_image042.jpg" />
            <img id="thumb1" class="normalthumb" src="http://forenpics.kaninchenrettung.de/230509/th_image016.jpg" />
            <img id="thumb2" class="normalthumb" src="http://forenpics.kaninchenrettung.de/230509/th_image042.jpg" />
            <img id="thumb3" class="normalthumb" src="http://forenpics.kaninchenrettung.de/230509/th_image016.jpg" />
            <img id="thumb4" class="normalthumb" src="http://forenpics.kaninchenrettung.de/230509/th_image042.jpg" />
            <img id="thumb5" class="normalthumb" src="http://forenpics.kaninchenrettung.de/230509/th_image016.jpg" />
            <br />
        </div> <!-- Ende DIV für Thumbnails -->
    </div> <!-- Ende vom WrapperDIV der Galerie -->
</body>
</html>

Alles anzeigen

Tags