Slideshow2 Großansichten mit Lightbox: Unterschied zwischen den Versionen
Aus Contao Community Documentation
K (→Slideshow2 Großansichten mit der Lightbox) |
K (→Slideshow2 Großansichten mit der Lightbox) |
||
| Zeile 9: | Zeile 9: | ||
Mods: | Mods: | ||
| − | Das Template | + | Das Template slidshow2_js_standard wird angepasst. Ein fertiges Template findet man am Ende dieses Tutorials. |
Idee: | Idee: | ||
| Zeile 46: | Zeile 46: | ||
}); | }); | ||
</source> | </source> | ||
| + | |||
Der Wrapper wird oberhalb der Slideshow2 eingefügt. | Der Wrapper wird oberhalb der Slideshow2 eingefügt. | ||
<source lang="javascript"> | <source lang="javascript"> | ||
linkWrap_<?php echo $this->id; ?>.inject('show_<?php echo $this->id; ?>', 'before'); | linkWrap_<?php echo $this->id; ?>.inject('show_<?php echo $this->id; ?>', 'before'); | ||
</source> | </source> | ||
| + | |||
Ein A-Element wird erzeugt | Ein A-Element wird erzeugt | ||
<source lang="javascript"> | <source lang="javascript"> | ||
| Zeile 57: | Zeile 59: | ||
</source> | </source> | ||
| + | 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. | ||
| + | <source lang="php"> | ||
| + | <?php | ||
| + | |||
| + | foreach($arrImageHrefs as $strImageHref) | ||
| + | { | ||
| + | echo "hiddenLink_$this->id.clone().set('href', '$strImageHref').inject(linkWrap_$this->id);\n"; | ||
| + | } | ||
| + | |||
| + | ?> | ||
| + | </source> | ||
| + | |||
| + | Nun wird dem Attribut REL in den bereits vorhandenen A-Elementen der Slideshow2 der Wert lightbox[g_ID] zugewiesen. | ||
| + | <source lang="javascript"> | ||
| + | $$('#show_<?php echo $this->id; ?> .slideshow-images a').set('rel', 'lightbox[g_<?php echo $this->id; ?>]'); | ||
| + | </source> | ||
| + | |||
| + | 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. | ||
| + | Fertiges Template slideshow2_js_standard | ||
<source lang="php"> | <source lang="php"> | ||
<?php | <?php | ||
Version vom 23. April 2012, 20:29 Uhr
| 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_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.
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; ?>]' });
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.
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>
