Lightboxen für die blackGallery

Hier landen ältere Beiträge aus dem Forum "Module & Templates" sowie den dazugehörigen Unterforen. Ruhig auch mal reinschauen.
Gesperrt
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Lightboxen für die blackGallery

Beitrag von shadowcat »

Vorab: Fragen etc. bitte in eigene Threads. Danke.

prettyPhoto
  • Anhängendes Archiv prettyPhoto.zip über den jQuery Plugin Manager (Backend -> Admin Tools) installieren
  • In der blackGallery Sektion Reiter [Lightbox] Schaltfläche [jQuery Plugin hinzufügen] anklicken
  • Aus der Liste "prettyPhoto" auswählen; Haken bei "Als aktuell verwendete Lightbox aktivieren" setzen
  • Im Feld "JavaScript Code" den Code eintragen (siehe unten)
  • Bei "Standard-Ausgabetemplate benutzen" -> "Nein" auswählen
  • Bei "Ausgabetemplate" den Code eintragen (siehe unten)
JavaScript Code:

Code: Alles auswählen

function defer(method) {
    if (window.$)
        method();
    else
        setTimeout(function() { defer(method) }, 50);
}

defer(fg_main);

function fg_main() {
    if(typeof jQuery != 'undefined') {
        jQuery(document).ready(function($) {
            $.getScript( WB_URL+"/modules/fotogalerie/js/jquery.prettyPhoto.js", function( data, textStatus, jqxhr ) {
                $("a[rel^='prettyPhoto']").prettyPhoto({
                    theme: "facebook",
                    slideshow:5000,
                    autoplay_slideshow:true,
                    social_tools:false,
                    allow_resize:true,
                    overlay_gallery_max:50
                });
            });
        });
    }
}
Ausgabetemplate:

Code: Alles auswählen

    <h2>{$settings.images_title}</h2>
    <ul class="fgLightbox">
    {foreach $images img}
    	<li class="rounded" style="width:{$li_width}px;height:{$li_height}px;">
    		<a style="line-height:{$settings.thumb_height}px;" rel="prettyPhoto[pp_gal]" href="{$BASE_URL}{$current_path}/{$img.file_name}" title="{$img.caption}">
                <img src="{$BASE_URL}{$current_path}/{$settings.thumb_foldername}/thumb_{$img.file_name}" alt="{$img.caption}" title="{$img.caption}" />
                <span class="caption rounded gradient1">{$img.description}</span>
            </a>
    	</li>
    {/foreach}
    </ul>
    <script charset=windows-1250 type="text/javascript">
    {$javascript_code}
    </script>
Die gewünschten Optionen können im JavaScript-Teil geändert werden. Infos dazu siehe Homepage des Herstellers.

http://www.no-margin-for-errors.com/pro ... umentation

Natürlich kann das jQuery Plugin auch außerhalb der blackGallery verwendet werden!
Dateianhänge
prettyPhoto.zip
(111.97 KiB) 247-mal heruntergeladen
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Gesperrt