skip to content
rift-valley-foundation.org

Image Galerie mit jQuery lightbox


Empfehlungen: Jetzt bei oboom.info anmelden

Das Websitebaker Modul "Another Image Gallery" so manipulieren, daß der Klick auf die Thumbnails die Bilder mittels jQuery lightbox darstellt.

Verwendung des lightbox Clones PrettyPhoto:
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Im Template von WB müssen einige Ressourcen eingebunden werden und vor dem Body-Ende-Tag ein Javascript.

 


Z.B.:

    <!-- jQuery -->
<script src="<?php echo TEMPLATE_DIR; ?>/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
<!-- prettyPhoto -->
<link rel="stylesheet" href="<?php echo TEMPLATE_DIR; ?>/jquery/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="<?php echo TEMPLATE_DIR; ?>/jquery/prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

 


und

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto();
    });
</script>

</body>
</html>

 


Änderungen im Galerie-Modul "Another Image Gallery":
modules/imagegallery/view.php (Zeile 403):

if ($included && $inline) {

echo '<a href="'.html($dirnamehttp.'/'.$filename).'" rel="prettyPhoto[Galerie]">';
/*
echo '<a href="?';
if (array_key_exists('dir'.$section_id, $_GET)) {
    echo 'dir'.$section_id.'='.urlencode($_GET['dir'.$section_id]).'&amp;';
}
echo 'pic'.$section_id.'='.$i.html($urlsuffix).'">';
*/


} else {