Slideshow2 Großansichten mit Lightbox: Unterschied zwischen den Versionen

Aus Contao Community Documentation

K
K (Slideshow2 Großansichten mit Lightbox)
Zeile 3: Zeile 3:
 
{{stub}}
 
{{stub}}
 
[[Category:]]
 
[[Category:]]
=Slideshow2 Großansichten mit Lightbox=
+
=Slideshow2 Großansichten mit der Lightbox=
  
 
Ziel:
 
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.
+
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:
 
Mods:
Das Template slidshow2_javascript_standard wird angepasst.
+
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, welches 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.
 +
 
 +
 
 +
 
  
Ein fertiges Template findet man am Ende dieses Tutorials.
 
  
 
<source lang="php">
 
<source lang="php">

Version vom 23. April 2012, 19:59 Uhr

betrifft
Contao Version Alle Versionen


MsgError.png 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, welches 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.



<?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>
Ansichten
Meine Werkzeuge

Contao Community Documentation

omg, ich brauche wirklich ne Freundin... ich lese nachts um 2 den Wiki Beitrag über Comic Sans MS

Leo Unglaub
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge