Hiho!
So, nun bin ich daheim, und hab mal meine virtuelle Maschine auf dem Notebook angeworfen. Was muss man tun, damit die Erweiterung läuft... viel! ;-) Ist eine ganz speziell auf meine Anforderungen zugeschnittene Bastellösung. Und ich mach vieles anders. Das ist der Hauptgrund, das ich wieder bei Sefrengo gelandet bin: Man kann Dinge so tun, wie man es will!
Scripte will ich hier nur dann anhängen, wenn ich sie von mir sind oder verändert wurden. Ich hab mir die Lizenzen nicht durchgelesen, und weiß nicht, wie ich sie verbreiten darf. Außerdem find ich einen Link zur Seite des Entwicklers fairer.
1.) Eine Webseite mit Bootstrap (http://getbootstrap.com/) entwickeln. Es macht IMHO keinen Sinn, das Framework nur für Galerie zu verwenden. Ich mag das Einbilden von CSS und JS über Sefrengo nicht so sehr, auch weil ich dann mit der Position der Tags im Header eingeschränkt bin. Deswegen sieht mein Header im Layout wie folgt aus:
QUELLTEXT
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/includes/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/includes/css/styles.css">
<link rel="stylesheet" type="text/css" href="/includes/css/bootstrap-gallery.css">
<title>[CS] <CMSPHP>print($con_side[$idcatside]['name']);</CMSPHP></title>
<cms:lay type="head"/>
</head>
Gut zu sehen, dass da die CSS von Bootstrap geladen wird, und die
stylte.css mit den eigenen Anpassungen. Den Rest erkläre ich gleich!
Des weiteren verwendet Bootstraßp JQuery und eigenes JS, das binde ich im Layout vor dem schließenden Bodytag ein:
QUELLTEXT
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="/includes/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/includes/js/jquery.actual.min.js"></script>
<script type="text/javascript" src="/includes/js/jquery.justifyGallery.min.js"></script>
<script type="text/javascript" src="/includes/js/bootstrap-gallery.min.js"></script>
<script>
$( document ).ready(function() {
$('.gallery').justifyGallery({});
$('.gallery').bootstrapGallery({});
});
</script>
</body>
Den Rest erkläre ich auch gleich. Wichtig hier: JQuery und Bootstap-JS wird geladen! Das sind die ersten beiden Zeilen.
2.) Als nächstes verwende ich dann
jquery.justifyGallery.min.js von
http://www.iekadou.com/programming/jquery-justifygallery/. Das lade ich auch im Bereich am Ende der Seite. Und dann rufe ich die entsprechende Funtion auf, denn die DOM fertig aufgebaut ist. Das Script nimmt die Bilder aus dem Modul und ordnet sie neu an, damit sie den Bereich schön kacheln.
3.) Jetzt kommt eigentlich die das Script
jquery.justifyGallery.min.js, aber das habe ich verändert (Download oben). Ich hatte da ein Problem: Ich hab ja eine div zugefügt, für Bildunterschrift und Beschreibungstext. Deren Größe musste ich berücksichtigen. .outerHeight(true) von JQuery gibt die Höhe aber nur korrekt zurück, wenn das Element schon angezeigt wird. Ich hab natürlich versucht die Größe zu bestimmen, bevor die div angezeigt wurde. *grummel* Etwas googeln hat dann eine Lösung gebracht. Das Plugin
jquery.actual.min.js von
http://dreamerslab.com/blog/en/get-hidden-...ht-with-jquery/. Damit kann ich die Höhe der Box auch bestimmen, wenn sie noch nicht angezeigt wird. Das Plugin wird auch am Fuß der Seite geladen. Nach JQuery und vor dem Galeriescript. Dazu kommt dann noch die unveränderte CSS vom Galeriescript, die ich wieder im Header lade.
4.) Dann lade ich endlich das JS für die Galerie! Und im Code wird auch die Galerie initialsiert. Alles am Ende der Seite!
Das wäre es schon fast. In meinem CSS hab ich dann noch ein paar Definitionen drin, für die Bildunterschriften.
QUELLTEXT
#gallery-modal .captionblock {
background-color: rgba(220,220,200,0.8);
margin: 0.5em 0;
padding: 0.5em;
}
.captionblock h1 {
font-size: 1.2em;
}
5.) Das wär's fast. Jetzt noch in den Moduleinstellungen die richtigen Verzeichnisse auswählen:
Wenn alles geklappt hat, dann sollte man jetzt im Frontend eine Galerie haben! :-)
Ist aber ein langer Weg und viel Bastelei! Da kann viel schief gehen! Mich hat es einen Abend gekostet, bis alles zusammen so funktioniert hat, wie ich es wollte! :-( Aber ich kann auch kein JS!
Das ganze ist also weder ein fertiges Modul, noch eine Lösung, die jedem passt! Wie gesagt, Sinn hat das ganze nur auf Bootstrap-Seiten! Deswegen auch hier im Alpha-Bereich. Ich werde da auch nicht mehr viel dran machen. Es tut, was ich will!
Ich finde, das ganze ist trotzdem ein gutes Beispiel, wie einfach man mit Sefrengo sehr individuelle Lösungen bauen kann. Bei Contao oder Typo3 hätte ich das nicht so leicht hinbekommen! Dafür können die beiden Systeme halt anderes perfekt!
Ich hoffe, ich habe damit eine Vorstellung vermittelt, was ich hier gebastelt habe, und das es eine umheimliche Bastellösung ist, die kaum jemanden außer mir passen wird.
Modul "Basisgallerie"Das Modul "Basisgallerie" kann aber sicher auch anderswo verwendet werden.
Es nimmt den Inhalt von 2 Verzeichnissen mit Bildern, und gibt den wie folgt aus:
QUELLTEXT
<div class="gallery">
<a href="/media/img/gallery/cervia14/DSC02845.JPG" ><img src="/media/img/gallery/cervia14/thumbs/DSC02845.JPG" alt="Titel" title="Längere Beschreibung" ></a>
<a href="/media/img/gallery/cervia14/DSC02866.JPG" ><img src="/media/img/gallery/cervia14/thumbs/DSC02866.JPG" alt="Titel" title="Längere Beschreibung" ></a>
<a href="/media/img/gallery/cervia14/DSC02903.JPG" ><img src="/media/img/gallery/cervia14/thumbs/DSC02903.JPG" alt="Titel" title="Längere Beschreibung" ></a>
</div>
Dabei stammt das Previewbild aus dem einen Verzeichnis und das große Bild aus dem anderen. Beide Bilder müssen den selben Namen haben!
Ich denke, dass ist das ist das interessanteste an der ganzen Geschichte. Das kann IMHO gut als Basis für die Entwicklung einfacher kleiner Gallerien mit Lightbox-Scripten ran gezogen werden.
Tschüss
Tiggr (aka Marcus)