Slideshow2 Großansichten mit Lightbox: Unterschied zwischen den Versionen

Aus Contao Community Documentation

K (→‎Slideshow2 Großansichten mit Lightbox)
K (→‎Slideshow2 Großansichten mit der Lightbox)
Zeile 15: Zeile 15:
  
 
Umsetzung:
 
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.
+
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:
 
Array erzeugen:
−
Das Template liefert kein brauchbares Array der einzelnen Bildlinks, deshalb wird es aus dem String $this->imgElements erzeugt.
+
Das Template liefert kein brauchbares Array der einzelnen Bildlinks, deshalb wird es aus dem String $this->imgElements erzeugt. Das fertige Array ist $arrImageHrefs.
 +
<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;
 +
}
  
 +
?>
 +
</source>
 +
 +
Javascript:
 +
Erst wird ein Wrapper erzeugt, damit man nicht alle A-Elemente einzeln auf display:none; setzen muss.
 +
<source lang="javascript">
 +
linkWrap_<?php echo $this->id; ?> = new Element('div', {
 +
  class: 'linkWrapper',
 +
  styles: {
 +
      display: 'none'
 +
  }
 +
});
 +
</source>
 +
Der Wrapper wird oberhalb der Slideshow2 eingefügt.
 +
<source lang="javascript">
 +
linkWrap_<?php echo $this->id; ?>.inject('show_<?php echo $this->id; ?>', 'before');
 +
</source>
 +
Ein A-Element wird erzeugt
 +
<source lang="javascript">
 +
hiddenLink_<?php echo $this->id; ?> = new Element('a', {
 +
  rel: 'lightbox[g_<?php echo $this->id; ?>]'
 +
});
 +
</source>
  
  

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

Contao Community Documentation

<user> Composer meckert bei Isotope, dass er mit tablelookupwizard 3.1 nicht zurecht kommt - korrekt?
<Toflar> keine Ahnung, sowas weiss ich doch nicht auswendig :D
<user> wer dann ;)
<Toflar> na niemand, deswegen schreibt man's ja in die composer.json

Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge