Ergebnis 1 bis 6 von 6

Thema: Slideshow

  1. #1
    linx78 ist offline Grünschnabel
    registriert
    07-04-2011
    Beiträge
    3

    Smile Slideshow

    Hallo JSwelt User,

    ich hätte da mal eine Frage an euch. Ich habe folgenden Code:

    Code:
    function changehighlight(nr, url, link, title) {
    	document.getElementById('highlightpicture').src = url;
    	document.getElementById('highlightlink').href = link;
    	document.getElementById('highlightpicture').title = title;	
    	document.getElementById('highlightdetail_' + nr).className = 'active';
    	
    	for(i=1;i<=4;i++) {
    	document.getElementById('highlightdetail_' + i).className = 'hidden';
        }
    	document.getElementById('highlightdetail_' + nr).className = 'active';
    }
    Ich würde jetzt gerne haben, dass es alle 5 Sekunden automatisch zum nächsten Bild geht. Kann mir jemand vielleicht weiter helfen?

    Schonmal vielen Dank für eure Bemühungen :-)

    Liebe Grüße
    Linx78

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.695

    AW: Slideshow

    Code:
    function slideshow(nr){
    	document.getElementById('highlightdetail_' + nr).className = 'hidden';
    	nr++;
    	if (nr > 4) nr = 1;
    	document.getElementById('highlightdetail_' + nr).className = 'active';
    	window.setTimeout(function(){slideshow(nr);}, 5000);
    }
    slideshow(4);
    sehr quick und extrem dirty - (à propos eleganter Code...)

  3. #3
    linx78 ist offline Grünschnabel
    registriert
    07-04-2011
    Beiträge
    3

    AW: Slideshow

    Hallo kkapsner,

    vielen Dank für die Hilfe :-) Leider scheiter ich immer noch dran.
    Poste hier nochmal meinen HTML Code:

    Code:
    		<div class="highlight">
    			<a id="highlightlink" href="link" title="Titlename" target="_self">
    			<img id="highlightpicture" src="bildgroßlink" />
    			</a>
    			<div class="small">
    				<img id="highlightdetail_1" src="bildlinksmall" class="active" onclick="changehighlight(1, 'bildgroßlink', 'link', 'Titlename')" width="95" height="48" />
    				<img id="highlightdetail_2" src="bildlinksmall" onclick="changehighlight(2, 'bildgroßlink', 'link', 'Titlename')" width="95" height="48" />
    				<img id="highlightdetail_3" src="bildlinksmall" onclick="changehighlight(3, 'bildgroßlink', 'link', 'Titlename')" width="95" height="48" />
    				<img id="highlightdetail_4" src="bildlinksmall" onclick="changehighlight(4, 'bildgroßlink', 'link', 'Titlename')" width="95" height="48" />
    			</div>	
    		</div>
    Das ganze sieht dann so aus:


    Also das Große Bild soll sich alle 5 Sekunden ändern. Die kleinen Bilder unten sollen aber weiterhin anklickbar sein und wenn ich z.B. auf Bild klein 3 drücke, soll das Große Bild das Bild 3 anzeigen.

    Hoffe das war verständlich. Wenn nicht einfach nochmal fragen, dann versuche ich es besser zu erklären.

    Vielen Dank für eure Hilfe :-)

    Liebe Grüße
    Linx78
    Geändert von linx78 (08-04-2011 um 00:52 Uhr)

  4. #4
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Slideshow

    Du speicherst die Informationen für 'bildgroßlink', 'link' und 'Titlename' innerhalb deiner <img>-Tags. Woher soll also das Script wissen welches Bild der Reihe nach angezeigt wird. Ich denke du müsstest deine Funktion dahingehend ändern das die benötigten Informationen dem Script selbst (z.B. via Array) bekannt sind. Dort kannst du dann eine automatische Slideshow und das Anzeigen eines Bildes nach Klick auf ein Vorschaubild unter einen Hut bringen.

    Hört sich jetzt schwieriger an als es ist ... just try it
    Hoffe ich konnte helfen

  5. #5
    linx78 ist offline Grünschnabel
    registriert
    07-04-2011
    Beiträge
    3

    AW: Slideshow

    Hallo miniA4kuser,

    vielen Dank für deine Antwort :-) Es hört sich nicht nur schwierig an, für mich ist es schwierig

    Liebe Grüße
    Linx78

  6. #6
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.695

    AW: Slideshow

    Ah - OK hatte mir irgendwie eine andere Struktur vorgestellt... dann funktioniert mein Code natürlich nicht.

    Gut: als erstes musst du dir einen Array erstellen, der die gewünschten Informationen enthält:
    Code:
    var imageData = [
    	{url: 'bildgroßlink', link: 'link', title: 'Titlename'},
    	{url: 'bildgroßlink', link: 'link', title: 'Titlename'},
    	{url: 'bildgroßlink', link: 'link', title: 'Titlename'},
    	{url: 'bildgroßlink', link: 'link', title: 'Titlename'}
    ];
    Dann musst du noch irgendwo speichern, welches Bild gerade angezeigt wird:
    Code:
    imageData.active = 0;
    Nun gestaltest du deine changehighlight Funktion neu:
    Code:
    function changehighlight(nr) {
    	nr = nr % imageData.length;
    	document.getElementById('highlightpicture').src = imageData[nr].src;
    	document.getElementById('highlightlink').href = imageData[nr].link;
    	document.getElementById('highlightpicture').title = imageData[nr].title;	
    	
    	document.getElementById('highlightdetail_' + imageData.active).className = 'hidden';
    	imageData.active = nr;
    	document.getElementById('highlightdetail_' + nr).className = 'active';
    }
    Da wir jetzt auf dem Arrayindex operieren, muss du deine highlightdetail_-<img>s anders nennen: von _0 bis _3. Auch die onclick-Handler müssen natürlich anders werden:
    Code:
    <img id="highlightdetail_0" src="bildlinksmall" class="active" onclick="changehighlight(0)" width="95" height="48" />
    Jetzt fehlt noch das 5s Wechseln:
    Code:
    function slideshow(){
    	changehighlight(imageData.active + 1)
    	window.setTimeout(slideshow, 5000);
    }
    window.onload = slideshow;
    - ungetestet, sollte aber funktionieren.
    Geändert von kkapsner (09-04-2011 um 11:44 Uhr)

Ähnliche Themen

  1. Slideshow
    Von Jabson im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 02-06-2009, 16:06
  2. slideshow
    Von zarahz im Forum Allgemeines
    Antworten: 2
    Letzter Beitrag: 21-02-2008, 15:52
  3. Slideshow
    Von Toxictype im Forum Serverseitige Programmierung
    Antworten: 2
    Letzter Beitrag: 17-10-2007, 16:41
  4. Slideshow
    Von tal.anna im Forum JavaScript
    Antworten: 6
    Letzter Beitrag: 31-08-2004, 14:24
  5. Slideshow
    Von Diazepami im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 30-08-2004, 20:16

Lesezeichen

Berechtigungen

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