skip to content
rift-valley-foundation.org

Image Galerie mit jQuery lightbox

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 {