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, 20: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

Nur weil es bei Nachbarseite XYZ was gibt, wird automatisch oft davon ausgegangen, dass das fertige Bauteil einsatzbereit auf der Straße liegt.

Marie Dietz
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge