Moin,
ich schraube da nun schon seit einer Weile daran rum, komme aber nicht weiter. Ich habe eine Seite mit einer Galerie, deren Thumbnails kompakt zusammenrutschen sollen (Masonry) und deren Inhalte (Bilder), sich in einer Lightbox öffnen sollen. Das Problem, dass immer nur die Lightbox oder der Masonry Effekt funktionieren, findet man zu hauf im Netz.
Als Masonry js habe ich mir folgendes ausgewählt http://masonry.desandro.com/
Nun kommt die große Frage: benutze ich jQuery oder Mootools als für die Lightbox? Hat das jemand schonmal sauber und updatesicher in Kombination umgesetzt?
Der Momentane Ansatz ist: jQuery Addon, jQuery Colorbox Addon, Masonry. Masonry funktioniert, die Lightbox nicht.
im "head"
HTML-Code:
<script src="plugins/jquery/js/jquery-1.9.1.min.js"></script>
<script src="plugins/colorbox/javascript/jquery.colorbox-min.js"></script>
<script src="files/template/masonry.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
<script src="system/modules/linklist/html/tag.js"></script>
<script type="text/javascript">
$.noConflict();
</script>
Galerie in main
HTML-Code:
<div id="ce_gallery">
<div class="item grid3">
<figure class="image_container">
<a href="url_des_fotos/foto.jpg" class="gallery" data-lightbox="gal" rel="gal" title="title"><img src="url_des_fotos/foto.jpg" data-lightbox="group" alt="title"></a>
</figure>
</div>
...
Ganz zum Schluss
HTML-Code:
<script type="text/javascript">
$(document).ready(function(){
$('a.gallery').colorbox({rel:'gal'});
});
</script>
<script type="text/javascript">
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
// options
singleMode: true,
itemSelector: '.item'
});
</script>
Hat jemand eine Idee für mich oder sieht einen Denkfehler? Herzlichsten Dank schonmal!
Lesezeichen