Bildershow

[grafinessa]

Hey,

ich habe eine Frage zu diesem Artikel:

http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/bilderslideshow.htm

Kann ich den Code denn genauso in meine Seite einbinden?
Was für einen Link muss ich denn in die letze Zeile einbinden?

<p><a href="javascript:next()">Slideshow starten</a></p>

Ich dachte, dass das ganze javascript schon im head angegeben wurde.
Bei mir wird dieser Link we er so dasteht nicht erkannt.

Ich kenne mich leider überhaupt nicht mit Javascript aus, deswegen habe ich den Artikel nicht so ganz verstanden.

Danke für jede Hilfe!

grafinessa

[Baba]

Kann ich den Code denn genauso in meine Seite einbinden?

Genauso, außer dass Du natürlich den Pfad/Namen deinen Bildern anpasst. Zeilen:

<img src="images/berge1.jpg" alt="">  
<img src="images/berge2.jpg" alt="" class="next">  
<img src="images/berge3.jpg" alt="" class="next">

Was für einen Link muss ich denn in die letze Zeile einbinden?
<p><a href="javascript:next()">Slideshow starten</a></p>

Den gleichen.

Ich dachte, dass das ganze javascript schon im head angegeben wurde.

Das ist richtig.

Bei mir wird dieser Link we er so dasteht nicht erkannt.

Was bedeutet das?
Du kannst überprüfen, ob die Funktion aufgerufen wird, indem Du in die Funktion next() folgende Zeile einfügst: alert("next() wurde aufgerufen"); noch vor var imgs = document.get.....

Es liegt vermutlich an den Pfaden zu den Bildern.

Cheers,
Baba

[grafinessa]

Vielen Dank für die schnelle Antwort!

Den Link zu den Bildern ändern ist klar, daran sollte es nicht liegen, die werden auch angezeigt..
Nur kann ich den Link nicht anklicken - er wird zwar als so dargestellt, aber es gibt keinerlei hover-effekte.

Hier mal meine Seite:

http://users.physik.tu-muenchen.de/kressier/BuB/raume/grosser_rs.php

Du kannst überprüfen, ob die Funktion aufgerufen wird, indem Du in die Funktion next() folgende Zeile einfügst: alert("next() wurde aufgerufen"); noch vor var imgs = document.get.....

Das würde dann so aussehen?

function next() {
alert("next() wurde aufgerufen");
            var imgs = document.getElementById("meinFader").getElementsByTagName("img");

[Gunther]

Hallo!

Nur kann ich den Link nicht anklicken - er wird zwar als so dargestellt, aber es gibt keinerlei hover-effekte.

Das liegt daran, dass der Link von deinem 2. Image aufgrund der absoluten Positionierung verdeckt wird, da das Bild 400px hoch ist.

Füge deinem Element '#meinFader' mal ein min-height: 400px; hinzu - dann klappt's auch mit dem Link (anklicken).

Gruß Gunther

[grafinessa]

Füge deinem Element '#meinFader' mal ein min-height: 400px; hinzu - dann klappt's auch mit dem Link (anklicken).

Super! Danke - das wars. Wenn ich jetzt noch wüsste, wie ich es anstelle, dass die slideshow automatisch beginnt und immer wieder von vorne anfängt, wäre das perfekt ;)

[grafinessa]

Kann mir keiner mehr weiterhelfen?

Danke schonmal für die bisherigen Infos!

[Baba]

Achso, ja, easy: Nimm das richtige http://de.selfhtml.org/javascript/sprache/eventhandler.htm@title=Event für den Funktionsaufruf.

Bisher (so sollte es sein): <a onclick="next();">Slideshow starten</a>
ist es das onclick event. Das wird zu onload angewendet auf document.

document.onload = function () {

alert("los gehts mit der Slideshow");
  // Funktionsaufruf

}

Cheers,
Baba

[grafinessa]

Sorry dass ich noch mal so blöd nachfragen muss:

"onclick" finde ich leider nirgends in dem script. Könntest du mir bitte den genauen Satz für dir richtige Stelle aufschreiben? Danke danke!!
Und wiederholt sich dass dann auch automatisch?

<script type="text/javascript">
        function fade(step) {
            var imgs = document.getElementById("slideshow").getElementsByTagName("img");

step = step || 0;

imgs[counter].style.opacity = step/100;
            imgs[counter].style.filter = "alpha(opacity=" + step + ")"; //

step = step + 2;

if (step <= 100) {
                window.setTimeout(function () { fade(step); }, 1);
            } else {
                window.setTimeout(next, 2000);
            }
        }

function next() {
            var imgs = document.getElementById("slideshow").getElementsByTagName("img");

if (typeof(counter) != "number") {
                counter = 0;
            }

counter++;

if (counter < imgs.length) {
                fade();
            }
        };
    </script>
    <style type="text/css">
        .next { position: absolute; top: 0; left: 0; opacity: 0; filter:alpha(opacity=0); }
        #slideshow { position: relative; }
    </style>

<p id="slideshow" style="min-height: 320px">
         <img src="../images/img_gr_rs/IMG_3024.jpg" alt="grosser rittersaal 2" />
         <img src="../images/img_gr_rs/Burg-und-Buehne-018.jpg" alt="grosser rittersaal 1" class="next" />
         <img src="../images/img_gr_rs/Sommer07-389.jpg" alt="grosser rittersaal 3"class="next" />
         </p>
    <p><a href="javascript:next()">Slideshow starten</a></p>

[Baba]

"onclick" finde ich leider nirgends in dem script. Könntest du mir bitte den genauen Satz für dir richtige Stelle aufschreiben? Danke danke!!

Momentan steht bei Dir:

<a href="javascript:next()">Slideshow starten</a>

Das könnte man auch schreiben

<a onclick="next();">Slideshow starten</a>

Da wird das JS-event deutlicher, als beim ersten. Der ganze Link muss jetzt weg. Und dann fügst Du die Funktion aus meinem letzten Posting irgendwo innerhalb <script type="text/javascript"> und </script> ein. Dann kommt schonmal ein alert mit "los gehts mit der Slideshow" beim Seitenaufbau. Das alert musst du dann noch mit dem Funktionsaufruf von next austauschen.

Und wiederholt sich dass dann auch automatisch?

Schau mal auf Seite drei der von dir verlinkten Doku.

Cheers,
Baba

[grafinessa]

@ Baba:

Vielen vielen lieben Dank!
Jetzt hab ich das auch verstanden. Super :)

@ Felix:

Ich kapier wirklich nicht, wieso man sich in Beiträge einmischt, nur um bisschen rumzumotzen.

[Felix Riesterer]

Liebe(r) grafinessa,

@ Felix:

Ich kapier wirklich nicht, wieso man sich in Beiträge einmischt, nur um bisschen rumzumotzen.

der Artikel stammt von mir, daher weiß ich, dass ich darin exakt die Lösung beschrieben habe, die Du eigentlich suchst.

Liebe Grüße,

Felix Riesterer.

[grafinessa]

Hi Felix,

na dann hätte ich ja eigentlich den perfekten Ansprechpartner gehabt.
Schade dass du mir nicht einfach eine simple Lösung geben wolltest - aber das hat zum Glück ja jemand anders geschafft.

Grüße, grafinessa

[Baba]

Nur kann ich den Link nicht anklicken - er wird zwar als so dargestellt, aber es gibt keinerlei hover-effekte.

Der Link wird überdeckt. Wie Gunther sagt..

Das würde dann so aussehen?
function next() {
alert("next() wurde aufgerufen");
            var imgs = document.getElementById("meinFader").getElementsByTagName("img");

Ja. Aber das benötigst Du vermutl. gar nicht mehr...

Cheers,
Baba

[Felix Riesterer]

Liebe grafinessa,

ich habe eine Frage zu diesem Artikel:

http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/bilderslideshow.htm

warum hast Du ihn denn nicht bis zu Ende gelesen?

Liebe Grüße,

Felix Riesterer.

[grafinessa]

Hi Felix,

diese Seite habe ich fertig gelesen. Die darauf aufbauenden Artikel waren nicht mehr relevant für mich - und ehrlich gesagt habe ich ja bei dem ersten wie man sieht schon große Probleme.

Wie gesagt - ich habe von javascript leider wirklich gar keine Ahnung..

[Felix Riesterer]

Liebe(r) grafinessa,

Die darauf aufbauenden Artikel waren nicht mehr relevant für mich -

tja dann...

und ehrlich gesagt habe ich ja bei dem ersten wie man sieht schon große Probleme.

Klar, Du hast ja bereits entschieden, dass die restlichen Seiten für Dich nicht mehr relevant sind, obwohl Du schreibst:

• ich habe von javascript leider wirklich gar keine Ahnung..

Wenn Du keine Ahnung zu haben meinst, wieso meinst Du dann beurteilen zu können, dass der Rest des Artikels für Dich irrelevant ist? Und wieso meinst Du meinen Hinweis, dass Du vielleicht weiterlesen solltest, mit dieser Bemerkung abweisen kannst? Sportlich, sportlich!

Liebe Grüße,

Felix Riesterer.

[grafinessa]

@ Felix:

Soweit ich sehen konnte, haben sich die weiteren Artikel darauf bezogen, mehrere Slideshows auf einer Seite einzubinden. Und ja, das ist irrelevant für mich.
Natürlich habe ich darüber gelesen und nirgends etwas von automatischen Starten gesehen. Wenn du mir also einfach sagen könntest, wo ich einen Hinweis darauf finde, wäre das sehr nett.

[Ulysses]

Hi!

Natürlich habe ich darüber gelesen und nirgends etwas von automatischen Starten gesehen. Wenn du mir also einfach sagen könntest, wo ich einen Hinweis darauf finde, wäre das sehr nett.

Wenn du das "self" machen möchtest, bist du hier genau richtig. Felix und ein Haufen anderer JS-Spezialisten werden dir bei konkreten Problemen sicher gerne weiterhelfen.
Wenn du aber etwas "Fertiges" suchst, das sich auch für Leute wie dich und mich, die wenig Ahnung von JS haben, einfach anpassen lässt, dann könnte folgendes für dich interessant sein:
Colorbox
jquery-cycle

FG Ulysses

[grafinessa]

Hi Ulysses,

vielen Dank für die Links!
Schade dass ich es mit dem Artiekl hier nicht geschafft habe, aber dann werde ich es wohl doch damit probieren.

Danke für eure Hilfe!

LG, grafinessa

[Felix Riesterer]

Liebe(r) grafinessa,

Wenn du mir also einfach sagen könntest, wo ich einen Hinweis darauf finde, wäre das sehr nett.

wenn Du einfach nur den Artikel mit Verstand(!) zuende gelesen hättest, dann wäre Dir die Sache mit dem Autostart von selbst aufgefallen. Aber Dir das Lesen beizubringen habe ich ehrlich nicht die geringste Lust!

Liebe Grüße,

Felix Riesterer.