Slideshow2 Großansichten mit Lightbox: Unterschied zwischen den Versionen

Aus Contao Community Documentation

K
K
Zeile 3: Zeile 3:
 
{{stub}}
 
{{stub}}
 
[[Category:]]
 
[[Category:]]
−
=Slideshow2_Großansichten_mit_Lightbox&action=edit=
+
=Slideshow2 Großansichten mit 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.
 +
 +
Mods:
 +
Das Template slidshow2_javascript_standard wird angepasst.
 +
 +
Ein fertiges Template findet man am Ende dieses Tutorials.
 +
 +
<source lang="php">
 +
<?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>
 +
</source>

Version vom 23. April 2012, 19:46 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 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>
Von „https://de.contaowiki.org/index.php?title=Slideshow2_Großansichten_mit_Lightbox&oldid=5203“
Ansichten
Meine Werkzeuge

Contao Community Documentation

<TheTril> Stateless Template, Stateless Elements, Stateless Renderer :)
<TheTril> everything is stateles :D
<leo-unglaub> TheTril: genau wie Ed Snowden *g*

Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge