webEdition - Forum

Hallo,

ich möchte ein "Lightbox-Bild" beim Öffnen der URL automatisch geöffnet haben – sozusagen als Werbebanner vor der Startseite.
Könnte mir jemand helfen, wie ich das in webedition einbauen kann?

Gruß
Ginrois

Hallo ginrois,
die lightbox-scripte haben in der Regel eine Methode, mit der sie aufgerufen werden können, ohne das das an ein User-event gebunden werden muss (wie click...). Der Aufruf des scriptes passiert dann praktisch mit dem Seitenladen (onload). Such doch mal bei der lightbox Deiner Wahl danach. Den scriptcode, dem du den Url des Bildes übergibst, baust du in das template und wenn es nur auf einer Seite erscheinen soll, kannst du mit <we:if self...> http://www.webedition.org/de/webedition ... enz/ifself die Ausführung auf die passende Seite beschränken.

Ludger

Hallo Ludgar,

erst einmal herzlichen Dank für Deine Bemühung.

Ich hatte mir die Lightbox von "Lightbox JS v2.05" ausgesucht. Trotz Deiner Erklärung weiß ich nicht, wie ich den Scriptcode aufbauen soll.
Magst Du mir da noch einmal Deine Unterstützung geben? Folgende Erläuterung gibt es in der Beschreibung von "Lightbox JS v2.05":

How to Use:
Part 1 - Setup

1. Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header.

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

2. Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

3. Check the CSS and make sure the referenced prevlabel.gif and nextlabel.gif files are in the right location. Also, make sure the loading.gif and closelabel.gif files as referenced near the top of the lightbox.js file are in the right location.

Part 2 - Activate

1. Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Optional: Use the title attribute if you want to show a caption.
2. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!


Gruß
Ginrois

Hallo Ginrois,

Welche Schritte aus dieser Anleitung hast du denn schon durchgeführt bzw. wo stehst du an?


LG,
Sascha

Hallo Sascha,

gerne möchte ich Dir Deine Frage beantworten. Ich habe entspechend des Installationshinweises von "Lightbox JS v2.05" die Ordner "js", "css" und "images" auf meinem Ftp-Server gestellt. Anschließend die Scriptcode von Part 1-Setup Punkt 1. und Punkt 2., sowie Part 2-Activate Punkt 1. in meinem Template für die Startseite eingesetzt.

Über den dann angezeigten Link >image #1< hat die Lightbox auch funktioniert. Ich weiß nun den weiteren Schritt nicht auszuführen, wie es zuvor der Ludgar beschrieb. Also beim Öffnen der URL soll die Lightbox automatisch öffen.

Gruß
Ginrois

Hallo ginrois,
die lightbox, die Du dir ausgesucht hast, hat von Haus aus keine Methode zum Aufrufen bei onload. Ich hab im Netz ein paar Beschreibungen gefunden, die zeigten, was am code geändert werden muss, aber die schienen mir nicht mehr auf dem Stand für die 2.0.5.
Leider weiß ich bei prototype nicht, wie man events triggert. Das geht aber bestimmt.

Verwendest du sonst prototype und scriptaculous auf deiner Site? Sonst könntest du z.B. jQuery in Kombination mit fancybox oder colourbox nehmen. Bei der fancybox wird nach dem Seitenladen das click event getriggert (http://fancybox.net/ -> Tips and tricks) bei der colourbox gibt es eine Methode zum Aufruf ohne Bindung an ein Element.

Ludger

Hallo ginrois,

Oh, da hatte ich wohl nicht genau gelesen. Mit Prototype habe ich auch noch nicht wirklich viel gemacht.

Wenn es, wie Ludger sagt, keine native onload-Unterstützung gibt, dann scheint mir der Weg das Click-Event manuell nach dem DOM-Ready aufzurufen sinnvoll. Mit .simulate() (sh. http://stackoverflow.com/questions/4606 ... -prototype) sollte sich das umsetzen lassen. Du kannst ja im DOM schauen, ob du ein Element mit dem rel-Attribut für die lightbox findest und ggf. das Event auf dem ersten Vorkommen triggern.


HTH,
Sascha

Hallo Ludgar, hallo Sascha,

ich habe mich jetzt für "colorbox" entschieden und folgendes eingesetzt:

<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
parent.fn.colorbox({href: 'images/example.jpg',
iframe:true,width:'802px',height:'567px', onLoad: function() { }});
});
</script>

<body onload="$.fn.colorbox({href:'images/example.jpg',
iframe:true,width:'802px',height:'567px, onLoad: function() { }});">

Funktioniert nur leider nicht.

Gruß
Ginrois

Warum denn iframe? Du zeigst nur ein Bild, oder?
:
<script type="text/javascript">
$(document).ready(function(){
$.colorbox({href:"images/example.jpg"});

});
</script>

Ludger

Hallo Ludgar,

Du hast Recht. Ich habe jetzt Deinen Code übernommen (siehe Anhang).
Trotzdem funktioniert es noch nicht.

Gruß
André