Slideshow2 Großansichten mit Lightbox
Aus Contao Community Documentation
| betrifft | |
|---|---|
| Contao Version | Alle Versionen |
 |
Unvollständiger Artikel: dieser Artikel ist noch nicht sauber bearbeitet.
Bitte erweitere ihn und entferne erst anschliessend diesen Hinweis. |
[[Category:]]
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 slideshow 2 2.0.0 stable 5 wird nur das angeklickte Bild geöffnet und kein Weiterblättern angeboten.)
Mods: Das Template slidshow2_javascript_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.
Umsetzung: 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.
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: Erst 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; ?>]' });
<?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>
