Photoswipe - Tolle Bildergalerie für Mobile Webseiten in Contao nutzen
Hallo liebe Contao Nutzer,
heute möchte ich euch kurz beschreiben, wie Ihr die Photoswipe Galerie erfolgreich in Contao nutzen könnt.
Für alle die Photoswipe noch nicht kennen:
Photoswipe ist eine moderne JavaScript-Bildergalerie, die besonders für mobile Geräte mit Touchscreens optimiert ist. Denn auf Touchscreen-Geräten wie Tablet PCs und Smartphones können die Bilder mit dem beliebten Swipe-Effekt nacheinander »weitergeblättert« werden.
Downloaden könnt Ihr das ganze hier: http://www.photoswipe.com
Als erstes müssen folgende Javascript Dateien im Header eurer Seite eingebunden werden. Die Dateien befinden sich in dem Photoswipe Downloadordner:
Code:
<script type="text/javascript" src="deinPfad/js/klass.min.js"></script>
<script type="text/javascript" src="deinPfad/js/code.photoswipe-3.0.4.min.js">"></script>
und unter "Eigener Javasript Code"
Code:
<script type="text/javascript">
(function(window, PhotoSwipe){
document.addEventListener('DOMContentLoaded', function(){
var
options = {},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
}, false);
}(window, window.Code.PhotoSwipe));
</script>
Die CSS Datei "photoswipe.css" habe ich direkt im CSS Editor von Contao importiert. Hier müssen nur noch die Pfade zu den Icons angepasst werden.
Ausserdem könnt Ihr noch folgende Styles eintragen:
Code:
.gallery
{
margin:0;
padding:0;
list-style: none;
}
.gallery:after
{
height:0;
clear:both;
display:block;
content: ".";
visibility: hidden;
}
.gallery li
{
width:49%;
float:left;
}
.gallery li a
{
display:block;
margin:5px;
border:1px solid #3c3c3c;
}
.gallery li img
{
width:100%;
height:auto;
display:block;
}
Jetzt muss nur noch ein neues Galerie Template angelegt werden. Erstellt unter Contao ein neues gallery_default Template und nutzt folgenden Code.
Code:
<div class="fluidgallery block">
<ul id="Gallery" class="gallery">
<?php foreach ($this->body as $class=>$row): ?>
<?php foreach ($row as $col): ?>
<?php $gallery_item_nr=$gallery_item_nr+1;
if ($gallery_item_nr % 2 != 0) {
$even_or_odd = odd;
} else {
$even_or_odd = even;
}
$class_item = "item$gallery_item_nr $even_or_odd";
?>
<?php if ($col->addImage): ?>
<li class="<?php echo $class_item; ?>">
<div class="image_container">
<?php if ($col->href): ?>
<a href="<?php echo $col->href; ?>"<?php echo $col->attributes; ?> title="<?php echo $col->alt; ?>"><img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" /></a>
<?php else: ?>
<img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" />
<?php endif; ?>
</div>
<?php if ($col->caption): ?><div class="caption"><?php echo $col->caption; ?></div>
<?php endif; ?>
</li>
<?php endif; ?>
<?php endforeach; ?>
<?php endforeach; ?>
</ul>
</div>
Jetzt könnt Ihr ganz einfach als Elementtyp die Galerie von Contao nutzen, als Galerietemplate das angepasste Template auswählen und FERTIG :-)
Viel Spaß!
Euer Dirk
