Galerie per iframe: erstes Bild anzeigen

Allgemeine Diskussionen über WebYep
Post Reply
piper
Posts: 2
Joined: Mon Feb 28, 2011 11:41 pm

Galerie per iframe: erstes Bild anzeigen

Post by piper » Tue Mar 08, 2011 12:22 pm

Hallo,

ich habe eine Galerie, die per iframe die Bilder innerhalb der Seite zeigt. (Danke für diese Lösung, Johannes!)
Nun würde ich gerne wissen, wie man das erste Bild bei Aufruf der Seite anzeigen lassen kann.

Vielen Dank für euren Input!

marcus
Objective Development
Objective Development
Posts: 170
Joined: Tue Nov 30, 2010 1:25 pm

Re: Galerie per iframe: erstes Bild anzeigen

Post by marcus » Tue Apr 05, 2011 7:05 pm

Mit WebYep ist das nicht möglich, aber man kann natürlich einen Klick auf das erste Bild mittels Javascript simulieren.

Dazu benötigt man 2 Dinge:
  1. Javascript-Funktionen, die es browserübergreifend erlauben, DOM-Events zu feuern (in unserem Fall 'click') und HTML-Elemente nach Klassenname zu selektieren ('WYPopUpImage' für die Links der Bildelemente).
  2. den Aufruf dieser Funktionen nach dem Laden der Seite.

Punkt 1 habe ich in einer Mini-Javascript-Bibliothek zusammengefasst:

Code: Select all

var WY = window.WY || {};
WY.fireEvent = function(element,event) {
  if (document.createEvent) {
    var e = document.createEvent("Events");
    e.initEvent(event, true, true);
    return element.dispatchEvent(e);
  } else {
    var e = document.createEventObject();
    return element.fireEvent('on'+event,e)
  }
}
WY.getElementsByClass = function(theClass) {
  var matchingTags = [];
  var allTags = document.getElementsByTagName("*");
  for (var i = 0; i < allTags.length; i++) {
    if (allTags[i].className == theClass) {
      matchingTags.push(allTags[i]);
    }
  }
  return matchingTags;
}


Punkt 2 lässt sich einfach als Inline-EventHandler im body-Tag angeben:

Code: Select all

<body onload="WY.fireEvent(WY.getElementsByClass('WYPopUpImage')[0],'click')">

oder, wenn das nicht möglich ist, als Inline-Javascript nach der Galerie im Seitencode einfügen:

Code: Select all

<script type="text/javascript">/*<![CDATA[*/
WY.fireEvent(WY.getElementsByClass('WYPopUpImage')[0],'click');
/*]]>*/</script>

Die Null in den eckigen Klammern bezieht sich auf das erste gefundene Element mit dem Klassennamen 'WYPopUpImage'.

Natürlich kann man die Skripte noch verbessern (z.B. durch eine Abfrage, ob überhaupt Elemente gefunden wurden), aber das Prinzip wird dadurch auf jeden Fall verdeutlicht.

Post Reply