Slideshow2 Großansichten mit Lightbox: Unterschied zwischen den Versionen
Aus Contao Community Documentation
K |
K (→Idee) |
||
| Zeile 12: | Zeile 12: | ||
==Idee== | ==Idee== | ||
| − | Wenn A-Elemente mit dem HREF auf alle Bilder im HTML-Markup vorhanden wären und sie das Attribut REL mit dem Wert lightbox[foo] hätten, würde die Lightbox die Bilder erkennen und zum Blättern anbieten. | + | Wenn A-Elemente mit dem HREF auf alle Bilder im HTML-Markup vorhanden wären und sie das Attribut REL mit dem Wert lightbox[foo] hätten, würde die Lightbox die Bilder erkennen und zum Blättern anbieten. Die A-Elemente müssen dabei nicht sichtbar sein. |
==Umsetzung== | ==Umsetzung== | ||
Version vom 23. April 2012, 23:14 Uhr
| betrifft | |
|---|---|
| Contao Version | 2.11.2 |
| Extensions | slideshow2 2.0.0 stable 5 |
Inhaltsverzeichnis
Slideshow2 Großansichten mit der Lightbox
Ziel
Bei Klick auf das große Bild in der Slideshow2 öffnet die Lightbox (Mediabox, Slimbox) das Original und bietet die Möglichkeit durch die restlichen Bilder zu Blättern. (In Version slideshow2 2.0.0 stable 5 wird nur das angeklickte Bild geöffnet und kein Weiterblättern angeboten.)
Mods
Das Template slidshow2_js_standard wird angepasst. Ein fertiges Template findet man am Ende dieses Tutorials.
Idee
Wenn A-Elemente mit dem HREF auf alle Bilder im HTML-Markup vorhanden wären und sie das Attribut REL mit dem Wert lightbox[foo] hätten, würde die Lightbox die Bilder erkennen und zum Blättern anbieten. Die A-Elemente müssen dabei nicht sichtbar sein.
Umsetzung
Kurz
Im Template wird ein Array mit den Pfaden zu den Bildern erzeugt. Es wird ein Javascript-Code generiert, welcher die gewünschten A-Elemente erzeugt und oberhalb der Slideshow einsetzt.
Ausführlich
Array erzeugen
Das Template liefert kein brauchbares Array der einzelnen Bildlinks, deshalb wird es aus dem String $this->imgElements erzeugt. Das fertige Array ist $arrImageHrefs.
<?php $strImages = str_replace('},', '}\n', $this->imgElements); $arrImages = explode('\n', $strImages); $strImageLinks = ''; foreach($arrImages as $strImage) { $intHrefLength = strpos($strImage, ':') - 2; $strImageHref = substr($strImage, 1, $intHrefLength); $arrImageHrefs[] = $strImageHref; } ?>
Javascript
Zuerst wird ein Wrapper erzeugt, damit man nicht alle A-Elemente einzeln auf display:none; setzen muss.
linkWrap_<?php echo $this->id; ?> = new Element('div', { class: 'linkWrapper', styles: { display: 'none' } });
Der Wrapper wird oberhalb der Slideshow2 eingefügt.
linkWrap_<?php echo $this->id; ?>.inject('show_<?php echo $this->id; ?>', 'before');
Ein A-Element wird erzeugt
hiddenLink_<?php echo $this->id; ?> = new Element('a', { rel: 'lightbox[g_<?php echo $this->id; ?>]' });
Mithilfe des anfangs erzeugten Arrays werden die JS-Anweisungen zum Clonen und Einfügen des A-Elementes in den Wrapper mit dem entsprechenden HREF generiert.
<?php foreach($arrImageHrefs as $strImageHref) { echo "hiddenLink_$this->id.clone().set('href', '$strImageHref').inject(linkWrap_$this->id);\n"; } ?>
Nun wird dem Attribut REL in den bereits vorhandenen A-Elementen der Slideshow2 der Wert lightbox[g_ID] zugewiesen.
$$('#show_<?php echo $this->id; ?> .slideshow-images a').set('rel', 'lightbox[g_<?php echo $this->id; ?>]');
Sonstiges
Die Lightbox erkennt doppelt vorhandene A-Elemente mit gleichem HREF und bietet jeweils nur eines davon in der Galeriefunktion an. Aus diesem Grund ist es wichtig die unsichtbaren A-Elemente oberhalb der Slideshow zu positionieren, damit die Reihenfolge der Galeriebilder die gewünschte ist.
Im Template wird mehrfach $this->id herangezogen um mehrere Slideshows auf einer Seite voneinander getrennt zu halten.
 |
Hinweis: Das Template wurde allerdings noch nicht mit mehreren Slideshows auf einer Seite getestet. Bei erfolgreichem Test kann dieser Hinweis gerne entfernt werden. |
Fertiges Template
slideshow2_js_standard
<?php $strImages = str_replace('},', '}\n', $this->imgElements); $arrImages = explode('\n', $strImages); $strImageLinks = ''; foreach($arrImages as $strImage) { $intHrefLength = strpos($strImage, ':') - 2; $strImageHref = substr($strImage, 1, $intHrefLength); $arrImageHrefs[] = $strImageHref; } ?> <script type="text/javascript"> /* <![CDATA[ */ window.addEvent('domready',function() { var images_<?php echo $this->id; ?> = {<?php echo $this->imgElements; ?>}; var show_<?php echo $this->id; ?> = new Slideshow<?php echo $this->EffectType;?>('show_<?php echo $this->id; ?>', images_<?php echo $this->id; ?>, { width: <?php echo $this->arrSlideshow2Size[0]; ?>, height: <?php echo $this->arrSlideshow2Size[1]; ?>, delay: <?php echo $this->rotation_interval; ?>, duration: <?php echo $this->effect_duration; ?>, <?php echo $this->EffectsExtended; ?> loop: <?php echo $this->play_loop; ?>, paused: <?php echo $this->play_paused; ?>, random: <?php echo $this->play_random; ?>, controller: <?php echo $this->controls; ?>, fast: <?php echo $this->controls_type; ?><?php if($this->play_image == 'true'): ?> | OnStart<?php endif; ?>, thumbnails: <?php echo $this->thumbnails; ?>, captions: <?php echo $this->captions; ?> }); linkWrap_<?php echo $this->id; ?> = new Element('div', { class: 'linkWrapper', styles: { display: 'none' } }); linkWrap_<?php echo $this->id; ?>.inject('show_<?php echo $this->id; ?>', 'before'); hiddenLink_<?php echo $this->id; ?> = new Element('a', { rel: 'lightbox[g_<?php echo $this->id; ?>]' }); <?php foreach($arrImageHrefs as $strImageHref) { echo "hiddenLink_$this->id.clone().set('href', '$strImageHref').inject(linkWrap_$this->id);\n"; } ?> $$('#show_<?php echo $this->id; ?> .slideshow-images a').set('rel', 'lightbox[g_<?php echo $this->id; ?>]'); }); /* ]]> */ </script>
