Slideshow2 Großansichten mit Lightbox

Aus Contao Community Documentation

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 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.

Mods: Das Template slidshow2_javascript_standard wird angepasst.

Ein fertiges Template findet man am Ende dieses Tutorials.

<?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

Toflar hat mich gestern entjungfert! ... er hat meinen ersten PR gemerged.

Kim Wormer
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge