Slideshow2 Großansichten mit Lightbox: Unterschied zwischen den Versionen

Aus Contao Community Documentation

K
K (Hinweis auf HTML5-Ausgabe)
 
(15 dazwischenliegende Versionen von einem Benutzer werden nicht angezeigt)
Zeile 9: Zeile 9:
  
 
==Mods==
 
==Mods==
−
Das Template slidshow2_js_standard wird angepasst. Ein fertiges Template findet man am Ende dieses Tutorials.
+
Das Template '''slideshow2_js_standard''' wird angepasst. Ein fertiges Template findet man am Ende dieses Tutorials.
  
 
==Idee==
 
==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.
+
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. Die A-Elemente müssen dabei nicht sichtbar sein.
  
 
==Umsetzung==
 
==Umsetzung==
 +
{{Achtung|Die Anpassung funktioniert nur bei XHTML-Ausgabe. Für eine HTML5-Ausgabe muss das Template dahingehend verändert werden, dass anstelle des REL Attributes das entsprechende data-lightbox Attribut erzeugt wird.}}
 
===Kurz===
 
===Kurz===
−
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.
+
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 unsichtbar einsetzt.
  
 
===Ausführlich===
 
===Ausführlich===
Zeile 24: Zeile 25:
 
<?php
 
<?php
  
−
$strImages     = str_replace('},', '}\n', $this->imgElements);
+
$strImages = str_replace('},', '}\n', $this->imgElements);
−
$arrImages     = explode('\n', $strImages);
+
$arrImages = explode('\n', $strImages);
−
$strImageLinks = '';
+
  
 
foreach($arrImages as $strImage)
 
foreach($arrImages as $strImage)
 
{
 
{
−
   $intHrefLength   = strpos($strImage, ':') - 2;
+
   $intHrefLength = strpos($strImage, ':') - 2;
−
   $strImageHref   = substr($strImage, 1, $intHrefLength);
+
   $strImageHref = substr($strImage, 1, $intHrefLength);
 
   $arrImageHrefs[] = $strImageHref;
 
   $arrImageHrefs[] = $strImageHref;
 
}
 
}
Zeile 39: Zeile 39:
  
 
====Javascript====
 
====Javascript====
−
Erst wird ein Wrapper erzeugt, damit man nicht alle A-Elemente einzeln auf display:none; setzen muss.
+
'''Zuerst wird ein Wrapper erzeugt, damit man nicht alle A-Elemente einzeln auf display:none; setzen muss.'''
 
<source lang="javascript">
 
<source lang="javascript">
−
linkWrap_<?php echo $this->id; ?> = new Element('div', {
+
var linkWrap_<?php echo $this->id; ?> = new Element('div', {
−
   class: 'linkWrapper',
+
   'class': 'linkWrapper', // 'class' needs to stand in quotes for IE7 & 8
 
   styles: {
 
   styles: {
 
       display: 'none'
 
       display: 'none'
Zeile 49: Zeile 49:
 
</source>
 
</source>
  
−
Der Wrapper wird oberhalb der Slideshow2 eingefügt.
+
'''Der Wrapper wird oberhalb der Slideshow2 eingefügt.'''
 
<source lang="javascript">
 
<source lang="javascript">
 
linkWrap_<?php echo $this->id; ?>.inject('show_<?php echo $this->id; ?>', 'before');
 
linkWrap_<?php echo $this->id; ?>.inject('show_<?php echo $this->id; ?>', 'before');
 
</source>
 
</source>
  
−
Ein A-Element wird erzeugt
+
'''Ein A-Element wird erzeugt'''
 
<source lang="javascript">
 
<source lang="javascript">
−
hiddenLink_<?php echo $this->id; ?> = new Element('a', {
+
var hiddenLink_<?php echo $this->id; ?> = new Element('a', {
 
   rel: 'lightbox[g_<?php echo $this->id; ?>]'
 
   rel: 'lightbox[g_<?php echo $this->id; ?>]'
 
});
 
});
 
</source>
 
</source>
  
−
Mithilfe des anfangs erzeugten Arrays werden die JS-Anweisungen zum Clonen und Einfügen des A-Elementes in den Wrapper mit dem entsprechenden HREF generiert.
+
'''Mithilfe des anfangs erzeugten Arrays werden die JS-Anweisungen zum Clonen und Einfügen des A-Elementes in den Wrapper mit dem entsprechenden HREF generiert.'''
 
<source lang="php">
 
<source lang="php">
 
<?php
 
<?php
Zeile 73: Zeile 73:
 
</source>
 
</source>
  
−
Nun wird dem Attribut REL in den bereits vorhandenen A-Elementen der Slideshow2 der Wert lightbox[g_ID] zugewiesen.
+
'''Nun wird dem Attribut REL in den bereits vorhandenen A-Elementen der Slideshow2 der Wert lightbox[g_ID] zugewiesen.'''
 
<source lang="javascript">
 
<source lang="javascript">
 
$$('#show_<?php echo $this->id; ?> .slideshow-images a').set('rel', 'lightbox[g_<?php echo $this->id; ?>]');
 
$$('#show_<?php echo $this->id; ?> .slideshow-images a').set('rel', 'lightbox[g_<?php echo $this->id; ?>]');
 
</source>
 
</source>
  
−
===Sonstiges===
+
==Sonstiges==
−
Die Lightbox erkennt doppelt vorhandene A-Elemente mit gleichem HREF und bietet jeweils nur eines davon in der Galeriefunktion an. Aus diesem Grund ist es wichtig die unsichtbaren A-Elemente oberhalb der Slideshow zu positionieren, damit die Reihenfolge der Galeriebilder die gewünschte ist.
+
Die Lightbox erkennt doppelt vorhandene A-Elemente mit gleichem HREF und bietet jeweils nur eines davon in der Galeriefunktion an. Das ist gut, da das endgültige HTML-Markup wahrscheinlich einige doppelte A-Elemente enthalten wird.  Aus diesem Grund ist es allerdings wichtig die unsichtbaren A-Elemente '''oberhalb''' der Slideshow zu positionieren, damit die Reihenfolge der Galeriebilder die erwünschte ist.
 +
 
 +
Im Template wird mehrfach '''$this->id''' herangezogen um mehrere Slideshows auf einer Seite voneinander getrennt zu halten. (Getestet mit 2 Slideshows in einem Artikel, eine mit und eine ohne Thumbnails)
 +
 
 +
Für ein besseres Verständnis kann man sich im HTML-Markup das erzeugte SCRIPT im HEAD ansehen.
  
−
===Fertiges Template===
+
==Fertiges Template==
 
'''slideshow2_js_standard'''
 
'''slideshow2_js_standard'''
 
<source lang="php">
 
<source lang="php">
 
<?php
 
<?php
  
−
$strImages     = str_replace('},', '}\n', $this->imgElements);
+
$strImages = str_replace('},', '}\n', $this->imgElements);
−
$arrImages     = explode('\n', $strImages);
+
$arrImages = explode('\n', $strImages);
−
$strImageLinks = '';
+
  
 
foreach($arrImages as $strImage)
 
foreach($arrImages as $strImage)
Zeile 102: Zeile 105:
 
/* <![CDATA[ */
 
/* <![CDATA[ */
  
−
window.addEvent('domready',function()
+
window.addEvent('domready', function()
 
{
 
{
  
Zeile 123: Zeile 126:
 
   });
 
   });
  
−
   linkWrap_<?php echo $this->id; ?> = new Element('div', {
+
   var linkWrap_<?php echo $this->id; ?> = new Element('div', {
−
     class: 'linkWrapper',
+
     'class': 'linkWrapper', // 'class' needs to stand in quotes for IE7 & 8
 
     styles: {
 
     styles: {
 
         display: 'none'
 
         display: 'none'
Zeile 132: Zeile 135:
 
   linkWrap_<?php echo $this->id; ?>.inject('show_<?php echo $this->id; ?>', 'before');
 
   linkWrap_<?php echo $this->id; ?>.inject('show_<?php echo $this->id; ?>', 'before');
  
−
   hiddenLink_<?php echo $this->id; ?> = new Element('a', {
+
   var hiddenLink_<?php echo $this->id; ?> = new Element('a', {
 
     rel: 'lightbox[g_<?php echo $this->id; ?>]'
 
     rel: 'lightbox[g_<?php echo $this->id; ?>]'
 
   });
 
   });

Aktuelle Version vom 3. September 2012, 22:02 Uhr

betrifft
Contao Version 2.11.2
Extensions slideshow2 2.0.0 stable 5

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 slideshow2 2.0.0 stable 5 wird nur das angeklickte Bild geöffnet und kein Weiterblättern angeboten.)

Mods

Das Template slideshow2_js_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. Die A-Elemente müssen dabei nicht sichtbar sein.

Umsetzung

Achtung.png Achtung: Die Anpassung funktioniert nur bei XHTML-Ausgabe. Für eine HTML5-Ausgabe muss das Template dahingehend verändert werden, dass anstelle des REL Attributes das entsprechende data-lightbox Attribut erzeugt wird.

Kurz

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

Ausführlich

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);
 
foreach($arrImages as $strImage)
{
  $intHrefLength = strpos($strImage, ':') - 2;
  $strImageHref  = substr($strImage, 1, $intHrefLength);
  $arrImageHrefs[] = $strImageHref;
}
 
?>

Javascript

Zuerst wird ein Wrapper erzeugt, damit man nicht alle A-Elemente einzeln auf display:none; setzen muss. 

var linkWrap_<?php echo $this->id; ?> = new Element('div', {
  'class': 'linkWrapper', // 'class' needs to stand in quotes for IE7 & 8
  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 

var hiddenLink_<?php echo $this->id; ?> = new Element('a', {
  rel: 'lightbox[g_<?php echo $this->id; ?>]'
});

Mithilfe des anfangs erzeugten Arrays werden die JS-Anweisungen zum Clonen und Einfügen des A-Elementes in den Wrapper mit dem entsprechenden HREF generiert. 

<?php
 
foreach($arrImageHrefs as $strImageHref)
{
  echo "hiddenLink_$this->id.clone().set('href', '$strImageHref').inject(linkWrap_$this->id);\n";
}
 
?>

Nun wird dem Attribut REL in den bereits vorhandenen A-Elementen der Slideshow2 der Wert lightbox[g_ID] zugewiesen. 

$$('#show_<?php echo $this->id; ?> .slideshow-images a').set('rel', 'lightbox[g_<?php echo $this->id; ?>]');

Sonstiges

Die Lightbox erkennt doppelt vorhandene A-Elemente mit gleichem HREF und bietet jeweils nur eines davon in der Galeriefunktion an. Das ist gut, da das endgültige HTML-Markup wahrscheinlich einige doppelte A-Elemente enthalten wird. Aus diesem Grund ist es allerdings wichtig die unsichtbaren A-Elemente oberhalb der Slideshow zu positionieren, damit die Reihenfolge der Galeriebilder die erwünschte ist.

Im Template wird mehrfach $this->id herangezogen um mehrere Slideshows auf einer Seite voneinander getrennt zu halten. (Getestet mit 2 Slideshows in einem Artikel, eine mit und eine ohne Thumbnails)

Für ein besseres Verständnis kann man sich im HTML-Markup das erzeugte SCRIPT im HEAD ansehen.

Fertiges Template

slideshow2_js_standard 

<?php
 
$strImages = str_replace('},', '}\n', $this->imgElements);
$arrImages = explode('\n', $strImages);
 
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;  ?>
  });
 
  var linkWrap_<?php echo $this->id; ?> = new Element('div', {
    'class': 'linkWrapper', // 'class' needs to stand in quotes for IE7 & 8
    styles: {
        display: 'none'
    }
  });
 
  linkWrap_<?php echo $this->id; ?>.inject('show_<?php echo $this->id; ?>', 'before');
 
  var 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=5460“
Ansichten
Meine Werkzeuge

Contao Community Documentation

Marc plant CFC für CCACSSCSR.

C-C-A
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge