Ergebnis 1 bis 1 von 1

Thema: coole bildergalerie mit javascript

  1. #1
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard coole bildergalerie mit javascript

    man benötigt dazu das highslide-javascript....
    letztlich ist die galerie eine kombination aus higslide und anderem code

    ***Link zur Vorschau entfernt***

    die page hat eine praktikantin von uns gemacht (unter meiner aufsicht)
    lediglich das scripten hab ich ihr komplett abgenommen.
    die einzigen nachteile liegen in den bildern, weil man die in 3 grössen benötigt und evtl im preloading, weil es so eine weile dauert bis die bilder alle runtergeladen sind

    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <title>Jessy´s Praktikum</title>
        <link rel="stylesheet" type="text/css" href="jesstyle.css" />    
        <script type="text/javascript" src="functions.js" /></script>    
        <link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
        <script type="text/javascript" src="highslide/highslide.js"></script>
        <!--[if lte IE 6]>
            <style type="text/css">
                img, div, a{
                    behavior: url(iepngfix.htc);
                }
            </style>
        <![endif]-->
        
        <script type="text/javascript">
    <!--
    var TIMER;
     var richtung;
     var thumbz = new Array();
     var bilder = new Array();
     var texte = new Array();
     var count = 0;
     
     function preload(){
        clearTimeout(TIMER);
    
        bilder[0] = new Image();
        bilder[0].src = "images/empfang1.jpg";
        bilder[1] = new Image();
        bilder[1].src = "images/empfang2.jpg";
        bilder[2] = new Image();
        bilder[2].src = "images/bildx.jpg";
        bilder[3] = new Image();
        bilder[3].src = "images/bildx.jpg";
        bilder[4] = new Image();
        bilder[4].src = "images/bildx.jpg";
        bilder[5] = new Image();
        bilder[5].src = "images/bildx.jpg";
        bilder[6] = new Image();
        bilder[6].src = "images/bildx.jpg";
        bilder[7] = new Image();
        bilder[7].src = "images/bildx.jpg";
        bilder[8] = new Image();
        bilder[8].src = "images/bildx.jpg";
        bilder[9] = new Image();
        bilder[9].src = "images/bildx.jpg";
        bilder[10] = new Image();
        bilder[10].src = "images/bildx.jpg";
        bilder[11] = new Image();
        bilder[11].src = "images/bildx.jpg";
        bilder[12] = new Image();
        bilder[12].src = "images/bildx.jpg";
        bilder[13] = new Image();
        bilder[13].src = "images/bildx.jpg";
        bilder[14] = new Image();
        bilder[14].src = "images/bildx.jpg";
        bilder[15] = new Image();
        bilder[15].src = "images/bildx.jpg";
        bilder[16] = new Image();
        bilder[16].src = "images/bildx.jpg";
        bilder[17] = new Image();
        bilder[17].src = "images/bildx.jpg";
        bilder[18] = new Image();
        bilder[18].src = "images/bildx.jpg";
        bilder[19] = new Image();
        bilder[19].src = "imagesbildx.jpg";
        bilder[20] = new Image();
        bilder[20].src = "images/bildx.jpg";
        <!-- hier kommen die thumbnails hinein für die mittlere vorschau -->
        thumbz[0] = new Image();
        thumbz[0].src = "images/bildx_thumb.jpg";
        thumbz[1] = new Image();
        thumbz[1].src = "images/bildx_thumb.jpg";
        thumbz[2] = new Image();
        thumbz[2].src = "images/bildx_thumb.jpg";
        thumbz[3] = new Image();
        thumbz[3].src = "images/bildx_thumb.jpg";
        thumbz[4] = new Image();
        thumbz[4].src = "images/bildx_thumb.jpg";
        thumbz[5] = new Image();
        thumbz[5].src = "images/bildx_thumb.jpg";
        thumbz[6] = new Image();
        thumbz[6].src = "images/bildx_thumb.jpg";
        thumbz[7] = new Image();
        thumbz[7].src = "images/bildx_thumb.jpg";
        thumbz[8] = new Image();
        thumbz[8].src = "images/bildx_thumb.jpg";
        thumbz[9] = new Image();
        thumbz[9].src = "images/bildx_thumb.jpg";
        thumbz[10] = new Image();
        thumbz[10].src = "images/bildx_thumb.jpg";
        thumbz[11] = new Image();
        thumbz[11].src = "images/bildx_thumb.jpg";
        thumbz[12] = new Image();
        thumbz[12].src = "images/bildx_thumb.jpg";
        thumbz[13] = new Image();
        thumbz[13].src = "images/bildx_thumb.jpg";
        thumbz[14] = new Image();
        thumbz[14].src = "images/bildx_thumb.jpg";
        thumbz[15] = new Image();
        thumbz[15].src = "images/bildx_thumb.jpg";
        thumbz[16] = new Image();
        thumbz[16].src = "images/bildx_thumb.jpg";
        thumbz[17] = new Image();
        thumbz[17].src = "images/bildx_thumb.jpg";
        thumbz[18] = new Image();
        thumbz[18].src = "images/bildx_thumb.jpg";
        thumbz[19] = new Image();
        thumbz[19].src = "images/bildx_thumb.jpg";
        thumbz[20] = new Image();
        thumbz[20].src = "images/bildx_thumb.jpg";
        <!-- hier kommen die texte zu den einzelnen bildern rein-->
        texte[0] = "Ein Bild vom Empfang";
        texte[1] = "Empfangsbereich";
        texte[2] = "Hier is nen text";
        texte[3] = "Hier is nen text";
        texte[4] = "Hier is nen text";
        texte[5] = "Hier is nen text";
        texte[6] = "Hier is nen text";
        texte[7] = "Hier is nen text";
        texte[8] = "Hier is nen text";
        texte[9] = "Hier is nen text";
        texte[10] = "Ich in der 3.Praktikumswoche";
        texte[11] = "Hier is nen text";
        texte[12] = "Hier is nen text";
        texte[13] = "Hier is nen text";
        texte[14] = "Hier is nen text";
        texte[15] = "Hier is nen text";
        texte[16] = "Hier is nen text";
        texte[17] = "Hier is nen text";
        texte[18] = "Hier is nen text";
        texte[19] = "Hier is nen text";
        texte[20] = "Hier is nen text";
    
     }
     
    
    
    
    
    function nextPic(){
        var target = document.getElementById("thumbwrap");
        var leftpos = parseInt(target.style.left);
        if(leftpos > -800){
            target.style.left = (leftpos - (6*57)) + "px";
        }
    }
    
    function backPic(){
        var target = document.getElementById("thumbwrap");
        var leftpos = parseInt(target.style.left);
        if(leftpos < 0){
            target.style.left = (leftpos + (6*57)) + "px";
        }
    }
    
    function thumbToPic(index){
    count= index;
    document.getElementById("thumb1").href=bilder[count].src;
    document.getElementById("slidecaption").innerHTML=texte[count];
    blendimage('blenddiv','blendimage', thumbz[count].src, 400);
    
    }
    
        hs.graphicsDir = 'highslide/graphics/';
        hs.outlineType = 'rounded-white';
        
        
    function shiftOpacity(id, millisec) {
        //if an element is invisible, make it visible, else make it ivisible
        if(document.getElementById(id).style.opacity == 0) {
            opacity(id, 0, 100, millisec);
        } else {
            opacity(id, 100, 0, millisec);
        }
    } 
    function opacity(id, opacStart, opacEnd, millisec) {
        //speed for each frame
        var speed = Math.round(millisec / 100);
        var timer = 0;
    
        //determine the direction for the blending, if start and end are the same nothing happens
        if(opacStart > opacEnd) {
            for(i = opacStart; i >= opacEnd; i--) {
                setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
                timer++;
            }
        } else if(opacStart < opacEnd) {
            for(i = opacStart; i <= opacEnd; i++)
                {
                setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
                timer++;
            }
        }
    }
    
    //change the opacity for different browsers
    function changeOpac(opacity, id) {
        var object = document.getElementById(id).style;
        object.opacity = (opacity / 100);
        object.MozOpacity = (opacity / 100);
        object.KhtmlOpacity = (opacity / 100);
        object.filter = "alpha(opacity=" + opacity + ")";
    } 
    
    
    function blendimage(divid, imageid, imagefile, millisec) {
        var speed = Math.round(millisec / 100);
        var timer = 0;
        
        //set the current image as background
        document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
        
        //make image transparent
        changeOpac(0, imageid);
        
        //make new image
        document.getElementById(imageid).src = imagefile;
    
        //fade in image
        for(i = 0; i <= 100; i++) {
            setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
            timer++;
        }
        
        
    }     
    
    
     window.onload = preload;
    
    //-->
    </script>    
    </head>
    
    <body>
    <div id="outerwrap">
        <div id="topmenu"> 
            <ul>
                <li><a href="index.html"><span>Startseite</span></a></li>
                <li><a href="kontakt.html"><span>Kontakt</span></a></li>
            </ul>
            <span class="clearer"></span>
        </div><!-- topmenu ende -->
        
        <div id="menuwrap">
            <div id="header" class="zindex2">
                <a href="praktikum.html" onmouseover="changeZ('header',4);" onmouseout="changeZ('header',2);"></a>
            </div>
            <div id="school" class="zindex3">
            <div id="blumelinks"></div><!-- blumelinks ende -->
                <a href="school.html" onmouseover="changeZ('school',4);" onmouseout="changeZ('school',3);"></a>
            </div>
            <div id="logo" class="zindex1"></div>
            <div id="gallery" class="zindex3">
                <a href="gallery.html" onmouseover="changeZ('gallery',4);" onmouseout="changeZ('gallery',3);"></a>
            </div>
            <div id="aboutme" class="zindex2">
                <a href="aboutme.html" onmouseover="changeZ('aboutme',4);" onmouseout="changeZ('aboutme',2);"></a>
            </div>
        </div><!-- menuwrap ende -->
        
        <div id="contentwrap">
            <div id="subnavi" style="visibility:hidden;">
                <ul>
                    <li><a href="#"><img id="daten" src="Bilder/daten.png" onmouseover="changePic('daten', 'Bilder/daten_mo.png');" onmouseout="changePic('daten', 'Bilder/daten.png');" /></a></li>
                    <li><a href="#"><img id="fotos" src="Bilder/Fotos.png" onmouseover="changePic('fotos', 'Bilder/fotos_mo.png');" onmouseout="changePic('fotos', 'Bilder/Fotos.png');" /></a></li>
                </ul>        
            </div><!-- subnavi ende -->
            <div id="contenttop"></div><!-- contenttop ende -->
            <div id="contentmid">
                <div id="content">
                    <h1>Meine Bilder</h1>
                    <div id="controlwrap">
                    <div id="backlink" onclick="backPic();"></div>
                    <div id="preview">
                        <div id="thumbwrap"  style="position:relative; left:0px;">
                            <img class="slidethumb" src="images/empfang1_mini.jpg" onmouseover="thumbToPic('0')" alt="" title="" />
                            <img class="slidethumb" src="images/bildx_mini.jpg" onmouseover="thumbToPic('1')" alt="" title="" />
                            <img class="slidethumb" src="images/bildx_mini.jpg" onmouseover="thumbToPic('2')" alt="" title="" />
                            <img class="slidethumb" src="images/bildx_mini.jpg" onmouseover="thumbToPic('3')" alt="" title="" />
                            <img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('4')" alt="" title="" />    
                            <img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('5')" alt="" title="" />
                            <img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('6')" alt="" title="" />
                            <img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('7')" alt="" title="" />
                            <img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('8')" alt="" title="" />
                            <img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('9')" alt="" title="" />
                            <img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('10')" alt="" title="" />
                            <img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('11')" alt="" title="" />
                            <img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('12')" alt="" title="" />
                            <img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('13')" alt="" title="" />
                            <img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('14')" alt="" title="" />
                            <img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('15')" alt="" title="" />
                            <img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('16')" alt="" title="" />
                            <img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('17')" alt="" title="" />
                            <img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('18')" alt="" title="" />
                            <img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('19')" alt="" title="" />
                            <img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('20')" alt="" title="" />
                            </div>
                    </div>
                    <div id="forwardlink" onclick="nextPic()"></div>
                    </div>
                    
                    <div class="slidepixdiv" style="background-image: url(images/gallery1.jpg); background-repeat: no-repeat; width: 365px; height: 274px; margin-top:110px;" id="blenddiv">
                        <a id="thumb1" href="images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
                            <img class="slidepix" style="width: 365px; height: 274px; border: 0 none; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;" id="blendimage" src="images/thumbnail.jpg" alt="" title="zum Vergrössern anklicken" />
                        </a>
                        <div class="highslide-caption" id="slidecaption"></div>
                    </div>
                    
                    <div class="slidepix" >
                        <img class="slidepix" src="media/texts/photos_about/02aft.jpg" style="width: 200px; height: 150px; border: 0 none; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;" id="blendimage" alt="" />
                    </div>     
                </div><!-- content ende -->
            </div><!-- contentmid ende -->
            <div id="contentbottom"></div><!-- contentbottom ende -->
        </div><!-- contentwrap ende -->
    </div><!-- outerwrap ende-->
    </body>
    </html>
    css-code:
    HTML-Code:
    *{
            margin:0;
            padding:0;
        }
        body{
            font-family:tahoma;
            font-size:12px;
            
        }
        .clearer{
            clear:both;
        }
        img{
            border:0;
        }
        #outerwrap{
            background: #d0007a url(Bilder/hintergrund_01.png) repeat-x;
            width:852px;
            margin:0 auto;
            overflow:hidden;
        }
        ul{
            list-style-type:none;
        }
        #topmenu{
            width:230px;
            margin-top:14px;
            margin-left:435px;
            overflow:hidden;
            width:240px;
        }
        #topmenu ul li{
            display:inline;
            
        }
        #topmenu ul li a{ 
            width:101px;
            height:16px;
            display:inline;
            background-image:url(Bilder/linkbtn.png);
            background-repeat:no-repeat;
            background-position:-103px 0;
            color:#ffffff;
            text-decoration:none;
            text-align:center;
            margin-left:19px;
            float:left;
            font-family:tahoma;
            font-size:12px;
            
        }
        #topmenu ul li a:hover{ 
            background-position: 0 0;
        }
        #topmenu ul li a span{
            position:relative;
            
        }
        #menuwrap{
            width:581px;
            margin:0 auto;
            margin-top:56px;
            
        }
        #header{
            width:455px;
            height:82px;
            position:relative;
            margin-left:63px;
        }
        #header a{
            width:455px;
            height:82px;
            display:block;
            background: url(Bilder/mein_praktikum.png) no-repeat;
        }
        #header a:hover{
            width:460px;
            height:82px;
            background: url(Bilder/Praktikum_webarts.png) no-repeat;
        }
        #school{
            width:75px;
            height:184px;
            position:relative;
            margin-top:-15px;
            margin-left:1px;
        }
        #blumelinks{
            position:relative; 
            background:url(Bilder/blume_links.png); 
            width:117px; 
            height:78px; 
            left:-117px;
        }
        #school a{
            width:75px;
            height:184px;
            display:block;
            background: url(Bilder/my_school.png) no-repeat;
            margin-top:-78px
        }
        #school a:hover{
            width:75px;
            height:184px;
            background: url(Bilder/Meine_Schule.png) no-repeat;
        }            
        #logo{
            width:429px;
            height:153px;
            background: url(Bilder/rosa_blumen.png) no-repeat;
            position:relative;
            margin-top:-170px;
            margin-left:76px;
        }
        #gallery{
            width:75px;
            height:184px;
            position:relative;
            margin-top:-167px;
            margin-left:505px;
        }
        
        #gallery a{
            width:75px;
            height:184px;
            display:block;
            background: url(Bilder/bilder_galerie.png) no-repeat;    
        }
        
        #gallery a:hover{
            width:75px;
            height:184px;
            background: url(Bilder/Homepage_Bildergalerie.png) no-repeat;
        
        }
        
        #aboutme{
            width:455px;
            height:82px;
            position:relative;
            margin-top:-17px;
            margin-left:63px;
        }
        
        #aboutme a{
            width:455px;
            height:82px;
            display:block;
            background: url(Bilder/ueber_MICH-.png) no-repeat;
            
        }
        
        #aboutme a:hover{
            width:455px;
            height:82px;
            background: url(Bilder/daten_uebermich_mouseover.png) no-repeat;
        }
        
        #contentwrap{
            width:455px;
            margin:0 auto ;
            margin-top:-14px;    
        }
        #contenttop{
            display:block;
            width:454px;
            height:11px;
            background: url(Bilder/content_top_bg.png);
        }
        #contentmid{
            background: url(Bilder/content_mid_bg.png) repeat-y;
            width:454px
        }
        #content{
            width:360px;
            margin:0 auto;
            padding:25px 47px;
            
        }
        #contentbottom{
            background: url(Bilder/content_bottom_bg.png);
            width:454px;
            height:12px;
            margin-bottom:20px;
        }
        h1{
            color:#9B3F10;
            font-family:tahoma;
            font-size:25px;
            margin-bottom:22px;
        }
        .zindex0{
            z-index:0;
        }
        .zindex1{
            z-index:1;
        }
        .zindex2{
            z-index:2;
        }
        .zindex3{
            z-index:3;
        }
        .zindex4{
            z-index:4;
        }
        #subnavi{
            position:relative;
            top:16px;
            left:2px;
        }
        #subnavi ul li{
            display:inline;
            margin-right:12px;
            
        }
        .slidethumb{
            height:60px;
            width:53px;
        }
        .slidepixwrap{
            height:240px;
            width:320px;
        }
        #preview{
            width:338px;
            height:60px;
            overflow:hidden;
            z-index:2;
            position:relative;
            border:1px solid black;
            margin-bottom:25px;
            float:left;
        }
        #thumbwrap{
            width:1197px;
            height:60px;
            position:relative;
            z-index:0;
        }
        #backlink{
            height:62px;
            width:15px;
            background:blue;
            float:left;
        }
        #forwardlink{
            height:62px;
            width:15px;
            background:blue;
            float:right;
        }
        
        #controlwrap{
            width:370px;
            margin-left:-3px;
        }
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von synaptic (06.02.2010 um 20:20 Uhr) Grund: ***Link zur Vorschau entfernt***
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

Ähnliche Themen

  1. Coole games ^^
    Von thebosstomas im Forum Link Tipps
    Antworten: 0
    Letzter Beitrag: 25.04.2008, 23:37
  2. Coole Grafik im WWW^^
    Von Gast im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 20
    Letzter Beitrag: 20.12.2007, 22:25
  3. [url]www.darthshoot.de[/url] <-- coole PHP Site!
    Von Darthshoot im Forum Eure Homepages und Foren - Vorstellung und Bewertungen
    Antworten: 6
    Letzter Beitrag: 25.06.2005, 15:24
  4. Echt coole Seite
    Von johanna im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 8
    Letzter Beitrag: 22.03.2005, 18:54

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •