Bildergalerie

html.de-Forum JavaScript
1

Auch wenn dieses Thema nun schon sehr oft hier besprochen worden ist und ich alle Einträge durchsucht habe, komme ich mit meiner Bildergalerie nicht weiter.

Folgenes Problem habe ich:
Ich soll eine Bildergalerie erstellen, die unten kleine Thumbnails hat und wenn diese angeklickt werden, soll sich das Bild im oberen div in Originalgröße öffnen.

Soweit bin ich gekommen: (gekürzte Fassung)

[CODE]

<script type="text/javascript">
    function Bild() {
      document.getElementById("gross").src = "bilder/Honda_CBR-1000-RR_Racing.png";
    }
</script>

<div id="thumbnails">
    <a href="#" onclick="javascript:Bild()">  
        <img src="bilder/Honda_CBR-1000-RR_Racing_thumb.png" />        
    </a>
</div>
[/CODE]
2 
document.getElementById("gross").src

Dein Element mit der ID „gross“ ist ein DIV und besitzt das Attribut „src“ nicht. Ersetze es mal durch ein IMG-Tag mit gleicher ID.

3

Als Beispiel könnte ich dir mein Script per PM schicken. Ich muss dazu sagen, dass es besser geht und eher eine notdürftige Lösung ist… :wink: Wie gesagt, nur als Beispiel.
Es ist nicht vollständig fertig, da
[ol]
[li]teilweise Probleme mit dem „vergrößern“ der Bildern erscheinen, ebenso wie mit dem verkleinern beim Laden.
[/li][li]das System auf den einfachen Gebrauch zugeschnitten ist. Zielgruppe war eigentlich das CMS typo3, leider habe ich es nicht geschafft, daraus ein funktionierendes Backend-Modul zu basteln.
[/li][/ol]
Bei Gelegenheit werde ich es überarbeiten…

4

Immer gerne… Ich würde mich freuen

5

Nehmt doch ein FrameWork wie jQuery.

Dann ist eine Bildergalerie ein Klacks.

[thumb]

und das Javascript in etwa so:
$(document).ready(function() {
$(‚a‘).onClick(function() {
if($(this).attr(‚rel‘)==‚gallery‘) {
HIER KOMMT DIE FUNKTION WELCHE BEIM KLICK AUSGEFÜHRT WERDEN SOLL
}
});
});

6

Nächster Denkfehler

So Scritt für Schritt komme ich weiter. Nun ist es schon seitweit aufgebaut, dass wenn ich die Thumbnails anklicke dass sich die Bilder öffnen im div. Nun sollen die Bilder aber auch als Diashow funktionieren. Habe einen Start und einen Stopp Button eingerichtet. Der Startbutton funktioniert (außer dass wenn man mehrmals draufklickt, die Diashow immer schneller wird) aber der Stopp-Button reagiert gar nicht. wo ist mein Fehler?

JAVASCRIPT

[CODE]

    function Anzeigen()
    {
        document.getElementById("gross").src = "bilder/Honda_CBR-1000-RR_Racing.png";
    }
    
    function init()
    {
        document.getElementById("gross").src = "bilder/leer.png";
    }
            
    function Bild1() 
    {
        init();
        document.getElementById("gross").src = "bilder/Honda_CBR-1000-RR_Racing.png";
    }
    
    function Bild2() 
    {
        init();
        document.getElementById("gross").src = "bilder/Kawasaki_Ninja_ZX-12R.png";
    }
                    
    function Bild3() 
    {
        init();
        document.getElementById("gross").src = "bilder/Suzuki_GSX-R_1000_Gixxer.png";
    }
    
    function Bild4() 
    {
        init();
        document.getElementById("gross").src = "bilder/Yamaha_M1_Valentino_Rossi.png";
    }
            
    function Bild5() 
    {
        init();
        document.getElementById("gross").src = "bilder/Triumph_Daytona_650.png";
    }
                    
    function Bild6() 
    {
        init();
        document.getElementById("gross").src = "bilder/Kawasaki_Ninja_ZX-14_Monster_Energy_2009.png";
    }
                            
    function Bild7() 
    {
        init();
        document.getElementById("gross").src = "bilder/Yamaha_YZF_R6.png";
    }                                
    
    function Bild8() 
    {
        init();
        document.getElementById("gross").src = "bilder/Kawasaki_ZX6R_Black.png";
    }
    
    var fotos = new Array ("bilder/Honda_CBR-1000-RR_Racing.png", "bilder/Kawasaki_Ninja_ZX-12R.png", "bilder/Suzuki_GSX-R_1000_Gixxer.png", "bilder/Yamaha_M1_Valentino_Rossi.png", "bilder/Triumph_Daytona_650.png", "bilder/Kawasaki_Ninja_ZX-14_Monster_Energy_2009.png","bilder/Yamaha_YZF_R6.png", "bilder/Kawasaki_ZX6R_Black.png")
    var zahl=-1;
    var timer; 

    function bilderschau()
    {
        zahl++;
        window.document.images[0].src=fotos[zahl];
        if (zahl==7)
            {
            zahl=-1;
            }
        window.setTimeout ('bilderschau()', 2000);
    }
    
    function start() 
    {
       window.setTimeout('bilderschau()');
    }

    function stop() 
    {
       window.clearTimeout('bilderschau()');
    }[/CODE][U]HTML[/U]

[CODE]



<div id="container2">
    <div id="Dia">
    <h1>Diashow</h1>
    
    <ul>
        <li><input type="button" class="knopf" value="Abspielen" onclick="javascript:start()" /></li>
        <li><input type="button" class="knopf" value="Stoppen" onclick="javascript:stop()" /></li>
    </ul>
    </div>
</div>



<div id="thumbnails">
    <a href="#" onclick="javascript:Bild1()" id="Bild1">  
        <img src="bilder/Honda_CBR-1000-RR_Racing_thumb.png" alt="Honda CBR 1000 RR Racing" />        
    </a>
            
    <a href="#" onclick="javascript:Bild2()" id="Bild2">
        <img src="bilder/Kawasaki_Ninja_ZX-12R_thumb.png" alt="Kawasaki Ninja ZX 12R" />        
    </a>
    
    <a href="#" onclick="javascript:Bild3()" id="Bild3">
        <img src="bilder/Suzuki_GSX-R_1000_Gixxer_thumb.png" alt="Suzuki GSX-R 1000 Gixxer" />        
    </a>
    
    <a href="#" onclick="javascript:Bild4()" id="Bild4">
        <img src="bilder/Yamaha_M1_Valentino_Rossi_thumb.png" alt="Yamaha M1 Valentino Rossi" />        
    </a>
    
    <a href="#" onclick="javascript:Bild5()" id="Bild5">
        <img src="bilder/Triumph_Daytona_650_thumb.png" alt="Triumph Daytona 650" />        
    </a>
    
    <a href="#" onclick="javascript:Bild6()" id="Bild6">
        <img src="bilder/Kawasaki_Ninja_ZX-14_Monster_Energy_2009_thumb.png" alt="Kawasaki Ninja ZX-14 Monster Energy 2009" />        
    </a>
    
    <a href="#" onclick="javascript:Bild7()" id="Bild7">
        <img src="bilder/Yamaha_YZF_R6_thumb.png" alt="Yamaha YZF R6" />        
    </a>
    
    <a href="#" onclick="javascript:Bild8()" id="Bild8">
        <img src="bilder/Kawasaki_ZX6R_Black_thumb.png" alt="Kawasaki ZX6R Black" />    
    </a>    
      
</div>
[/CODE]

Vielen lieben Dank im Vorraus