Forum für CMS/made simple

Andiministrator

Kabeljungwerker

Ort: Plauen / Vogtland

Registriert: 09. November 2010

Beiträge: 264

Webseite

Einsatz des jQuery-Plugins CrossSlide

Ich hatte von einem Kunden die Anforderung bekommen, die Bilder im Kopf der Seite nicht nur wechseln zu lassen sondern den Bild-Ausschnitt vertikal bzw. horizontal scrollen zu lassen.
Nach einer kurzen Recherche nach fertigen Lösungen für CMS made simple habe ich das Modul Showtime gefunden, welches sehr gut gemacht ist, allerdings die Funktionalität nur mit Flash bietet. Da wir Flash aus verschiedenen Gründen nicht für Kundenprojekte einsetzen, kam das Modul nicht in Frage.
Es hieß also selbst basteln. Ich fand das jQuery Plugin CrossSlide, was für meine Anforderungen ideal war (ist). Nach ein paar Tests beschloss ich, dieses Modul zu verwenden.

Bedienung im CMS Backend

Wichtig ist für uns immer eine schnelle und möglichst selbsterklärende Anwendung von Erweiterungen. Da die Bilder im Kopf der Seite (nachfolgend Header-Bilder genannt) für jede Seite individuell festlegbar sein sollen, bot es sich an, diese gleich in die Seitenbearbeitung zu integrieren.
Seit über einem Jahr setzen wir für die Pflege der Seiten im Backend auf das Modul AdvancedContent (von NaN), welches viele Aufgaben erleichtert. Unter anderen bietet es die Möglichkeit, die Seitenbearbeitung durch Tabs und zusammengefasste Bereiche übersichtlicher zu gestalten. Die Bilder sollen also in einem separaten Tab namens "Header-Bilder" bearbeitbar sein, insgesamt wollte ich maximal 5 Bilder pro Seite verwenden. Für jedes Bild soll es Einstellungen zum Bild selbst geben, als auch Einstellungen zur Bewegung des Bildes. Um die Bedienung zu vereinfachen, sollten Slider (gleich mehr dazu) verwendet werden, welche ab Version 0.9 von AdvancedContent auch gut funktionieren. Und so sieht das Ganze im Backend fertig aus:

Einbau

Bevor wir loslegen: Legt im Verzeichnis "/uploads/images/" einen Ordner namens "Header" an, und spielt 2-3 Bilder dort hinein. In den folgenden Scripten greife ich auf diesen Ordner zu. Könnt Ihr natürlich ändern, Ihr müsst nur die Scripte dann anpassen.

Zunächst legen wir die Felder für die Dateneingabe fest. Das könnt Ihr irgendwo nach {process_pagedata} im Seiten-Template machen:

 Hier klicken, um den Code zum Kopieren zu markieren

{strip}
{* Header Image 1 *}
{content_module block='header1image' page_tab='Header-Fotos' module='GBFilePicker' assign='header1image' label='Foto' dir='images/Header' mode='browser' media_type='image' lang=$page_lang block_tab='Bild 1' block_group='Bild' show_subdirs='true' upload='true' delete='true' create_dirs='true' allow_scaling='false' create_thumbs='false' show_thumbfiles='false'}
{content block='header1text' page_tab='Header-Fotos' assign='header1text' label='Beschreibung' oneline='true' size='80' block_tab='Bild 1' block_group='Bild'}
{content block='header1time' page_tab='Header-Fotos' assign='header1time' label='Anzeige-Dauer' block_type='ui_slider' min='1' max='10' step='1' default='2' unit='Sekunden' block_tab='Bild 1' block_group='Bild'}
{content block='header1zoom' page_tab='Header-Fotos' assign='header1zoom' label='Zoom' description='Stellen Sie hier den Start- und Endwert für den Zoom des Bildes ein:' block_type='ui_slider' min='25' max='500' step='25' default='100,100' range='true' unit='%' block_tab='Bild 1' block_group='Bewegung'}
{content block='header1top' page_tab='Header-Fotos' assign='header1top' label='Von unten' description='Stellen Sie hier den Start- und Endwert für den Schwenk des Bildes von unten nach oben ein:' block_type='ui_slider' min='0' max='100' step='5' default='0,100' range='true' orientation='vertical' unit='%' block_tab='Bild 1' block_group='Bewegung'}
{content block='header1left' page_tab='Header-Fotos' assign='header1left' label='Von links' description='Stellen Sie hier den Start- und Endwert für den Schwenk des Bildes von links nach rechts ein:' block_type='ui_slider' min='0' max='100' step='5' default='0,100' range='true' unit='%' block_tab='Bild 1' block_group='Bewegung'}
{* Header Image 2 *}
{content_module block='header2image' page_tab='Header-Fotos' module='GBFilePicker' assign='header2image' label='Foto' dir='images/Header' mode='browser' media_type='image' lang=$page_lang block_tab='Bild 2' block_group='Bild' show_subdirs='true' upload='true' delete='true' create_dirs='true' allow_scaling='false' create_thumbs='false' show_thumbfiles='false'}
{content block='header2text' page_tab='Header-Fotos' assign='header2text' label='Beschreibung' oneline='true' size='80' block_tab='Bild 2' block_group='Bild'}
{content block='header2time' page_tab='Header-Fotos' assign='header2time' label='Anzeige-Dauer' block_type='ui_slider' min='1' max='10' step='1' default='2' unit='Sekunden' block_tab='Bild 2' block_group='Bild'}
{content block='header2zoom' page_tab='Header-Fotos' assign='header2zoom' label='Zoom' description='Stellen Sie hier den Start- und Endwert für den Zoom des Bildes ein:' block_type='ui_slider' min='25' max='500' step='25' default='100,100' range='true' unit='%' block_tab='Bild 2' block_group='Bewegung'}
{content block='header2top' page_tab='Header-Fotos' assign='header2top' label='Von unten' description='Stellen Sie hier den Start- und Endwert für den Schwenk des Bildes von unten nach oben ein:' block_type='ui_slider' min='0' max='100' step='5' default='0,100' range='true' orientation='vertical' unit='%' block_tab='Bild 2' block_group='Bewegung'}
{content block='header2left' page_tab='Header-Fotos' assign='header2left' label='Von links' description='Stellen Sie hier den Start- und Endwert für den Schwenk des Bildes von links nach rechts ein:' block_type='ui_slider' min='0' max='100' step='5' default='0,100' range='true' unit='%' block_tab='Bild 2' block_group='Bewegung'}
{* Header Image 3 *}
{content_module block='header3image' page_tab='Header-Fotos' module='GBFilePicker' assign='header3image' label='Foto' dir='images/Header' mode='browser' media_type='image' lang=$page_lang block_tab='Bild 3' block_group='Bild' show_subdirs='true' upload='true' delete='true' create_dirs='true' allow_scaling='false' create_thumbs='false' show_thumbfiles='false'}
{content block='header3text' page_tab='Header-Fotos' assign='header3text' label='Beschreibung' oneline='true' size='80' block_tab='Bild 3' block_group='Bild'}
{content block='header3time' page_tab='Header-Fotos' assign='header3time' label='Anzeige-Dauer' block_type='ui_slider' min='1' max='10' step='1' default='2' unit='Sekunden' block_tab='Bild 3' block_group='Bild'}
{content block='header3zoom' page_tab='Header-Fotos' assign='header3zoom' label='Zoom' description='Stellen Sie hier den Start- und Endwert für den Zoom des Bildes ein:' block_type='ui_slider' min='25' max='500' step='25' default='100,100' range='true' unit='%' block_tab='Bild 3' block_group='Bewegung'}
{content block='header3top' page_tab='Header-Fotos' assign='header3top' label='Von unten' description='Stellen Sie hier den Start- und Endwert für den Schwenk des Bildes von unten nach oben ein:' block_type='ui_slider' min='0' max='100' step='5' default='0,100' range='true' orientation='vertical' unit='%' block_tab='Bild 3' block_group='Bewegung'}
{content block='header3left' page_tab='Header-Fotos' assign='header3left' label='Von links' description='Stellen Sie hier den Start- und Endwert für den Schwenk des Bildes von links nach rechts ein:' block_type='ui_slider' min='0' max='100' step='5' default='0,100' range='true' unit='%' block_tab='Bild 3' block_group='Bewegung'}
{* Header Image 4 *}
{content_module block='header4image' page_tab='Header-Fotos' module='GBFilePicker' assign='header4image' label='Foto' dir='images/Header' mode='browser' media_type='image' lang=$page_lang block_tab='Bild 4' block_group='Bild' show_subdirs='true' upload='true' delete='true' create_dirs='true' allow_scaling='false' create_thumbs='false' show_thumbfiles='false'}
{content block='header4text' page_tab='Header-Fotos' assign='header4text' label='Beschreibung' oneline='true' size='80' block_tab='Bild 4' block_group='Bild'}
{content block='header4time' page_tab='Header-Fotos' assign='header4time' label='Anzeige-Dauer' block_type='ui_slider' min='1' max='10' step='1' default='2' unit='Sekunden' block_tab='Bild 4' block_group='Bild'}
{content block='header4zoom' page_tab='Header-Fotos' assign='header4zoom' label='Zoom' description='Stellen Sie hier den Start- und Endwert für den Zoom des Bildes ein:' block_type='ui_slider' min='25' max='500' step='25' default='100,100' range='true' unit='%' block_tab='Bild 4' block_group='Bewegung'}
{content block='header4top' page_tab='Header-Fotos' assign='header4top' label='Von unten' description='Stellen Sie hier den Start- und Endwert für den Schwenk des Bildes von unten nach oben ein:' block_type='ui_slider' min='0' max='100' step='5' default='0,100' range='true' orientation='vertical' unit='%' block_tab='Bild 4' block_group='Bewegung'}
{content block='header4left' page_tab='Header-Fotos' assign='header4left' label='Von links' description='Stellen Sie hier den Start- und Endwert für den Schwenk des Bildes von links nach rechts ein:' block_type='ui_slider' min='0' max='100' step='5' default='0,100' range='true' unit='%' block_tab='Bild 4' block_group='Bewegung'}
{* Header Image 5 *}
{content_module block='header5image' page_tab='Header-Fotos' module='GBFilePicker' assign='header5image' label='Foto' dir='images/Header' mode='browser' media_type='image' lang=$page_lang block_tab='Bild 5' block_group='Bild' show_subdirs='true' upload='true' delete='true' create_dirs='true' allow_scaling='false' create_thumbs='false' show_thumbfiles='false'}
{content block='header5text' page_tab='Header-Fotos' assign='header5text' label='Beschreibung' oneline='true' size='80' block_tab='Bild 5' block_group='Bild'}
{content block='header5time' page_tab='Header-Fotos' assign='header5time' label='Anzeige-Dauer' block_type='ui_slider' min='1' max='10' step='1' default='2' unit='Sekunden' block_tab='Bild 5' block_group='Bild'}
{content block='header5zoom' page_tab='Header-Fotos' assign='header5zoom' label='Zoom' description='Stellen Sie hier den Start- und Endwert für den Zoom des Bildes ein:' block_type='ui_slider' min='25' max='500' step='25' default='100,100' range='true' unit='%' block_tab='Bild 5' block_group='Bewegung'}
{content block='header5top' page_tab='Header-Fotos' assign='header5top' label='Von unten' description='Stellen Sie hier den Start- und Endwert für den Schwenk des Bildes von unten nach oben ein:' block_type='ui_slider' min='0' max='100' step='5' default='0,100' range='true' orientation='vertical' unit='%' block_tab='Bild 5' block_group='Bewegung'}
{content block='header5left' page_tab='Header-Fotos' assign='header5left' label='Von links' description='Stellen Sie hier den Start- und Endwert für den Schwenk des Bildes von links nach rechts ein:' block_type='ui_slider' min='0' max='100' step='5' default='0,100' range='true' unit='%' block_tab='Bild 5' block_group='Bewegung'}
{* Case if no images found *}
{if !$header1image && !$header2image && !$header3image && !$header4image && !$header5image}{fieldsearch pagealias=$page_alias use_smarty=1 testfields='header1image,header2image,header3image,header4image,header5image'  getfields='header1image,header2image,header3image,header4image,header5image,header1text,header2text,header3text,header4text,header5text,header1zoom,header2zoom,header3zoom,header4zoom,header5zoom,header1top,header2top,header3top,header4top,header5top,header1left,header2left,header3left,header4left,header5left,header1time,header2time,header3time,header4time,header5time'}{/if}
{if $header1zoom}{capture assign='header1zoom1'}{math equation="x / 100" x=$header1zoom|regex_replace:"/^([0-9]+),(\d+)$/":"\\1"}{/capture}{capture assign='header1zoom2'}{math equation="x / 100" x=$header1zoom|regex_replace:"/^([0-9]+),(\d+)$/":"\\2"}{/capture}{/if}
{if $header2zoom}{capture assign='header2zoom1'}{math equation="x / 100" x=$header2zoom|regex_replace:"/^([0-9]+),(\d+)$/":"\\1"}{/capture}{capture assign='header2zoom2'}{math equation="x / 100" x=$header2zoom|regex_replace:"/^([0-9]+),(\d+)$/":"\\2"}{/capture}{/if}
{if $header3zoom}{capture assign='header3zoom1'}{math equation="x / 100" x=$header3zoom|regex_replace:"/^([0-9]+),(\d+)$/":"\\1"}{/capture}{capture assign='header3zoom2'}{math equation="x / 100" x=$header3zoom|regex_replace:"/^([0-9]+),(\d+)$/":"\\2"}{/capture}{/if}
{if $header4zoom}{capture assign='header4zoom1'}{math equation="x / 100" x=$header4zoom|regex_replace:"/^([0-9]+),(\d+)$/":"\\1"}{/capture}{capture assign='header4zoom2'}{math equation="x / 100" x=$header4zoom|regex_replace:"/^([0-9]+),(\d+)$/":"\\2"}{/capture}{/if}
{if $header5zoom}{capture assign='header5zoom1'}{math equation="x / 100" x=$header5zoom|regex_replace:"/^([0-9]+),(\d+)$/":"\\1"}{/capture}{capture assign='header5zoom2'}{math equation="x / 100" x=$header5zoom|regex_replace:"/^([0-9]+),(\d+)$/":"\\2"}{/capture}{/if}
{/strip}

Zugegeben, diese Steuerung ist nicht gerade elegant - hier könnte man sicher noch einiges optimieren. Aber es funktioniert erst einmal.
Wichtig! In dieser Steuerung habe ich ein Plugin (fieldsearch) verwendet, welches folgendes macht:
Ist in der aktuellen Seite kein Bild angegeben, sucht "fieldsearch" in der Seiten-Hierarchy (aufwärts), ob in der nächst höheren Seite ein Bild angegeben wurde, usw. Somit muss man nicht für jede einzelne Unterseite Bilder konfigurieren, sondern nur für die jeweils übergeordneten Seiten. Das Script fieldsearch könnt Ihr hier downloaden: function.fieldsearch.php
Nach dem Entpacken spielt Ihr die PHP-Datei einfach in den Ordner "plugins".

Als nächstes muss natürlich sowohl jQuery als auch CrossSlide eingebunden werden. Am besten, Ihr ladet Euch die Scripte herunter und legt sie z.B. in einen Ordner namens "/js/". Dann könnt Ihr irgewndwo im <head></head> Bereich der Seite die JavaScripts einbinden:

 Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.cross-slide.min.js"></script>

Nun kann (ebenfalls im <head></head> Bereich der Seite) die JavaScript-Steuerung für das Script eingebunden werden. Im folgenden Code binde ich dabei die Header-Bilder so ein, dass sie nachgeladen werden und den Aufbau der Seite nicht behindern/verzögern:

 Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript">
{literal}$(document).ready(function(){{/literal}
{* HeaderSlider *}
{literal}$('#slideshow').crossSlide({fade:1},[{/literal}
{if $header1image}{literal}{{/literal}src:'/uploads/{$header1image}',alt:'{$header1text|strip_tags|replace:"'":""|replace:'"':''}',from:'{$header1top|regex_replace:"/^([0-9]+),(\d+)$/":"\\1"}% {$header1left|regex_replace:"/^([0-9]+),(\d+)$/":"\\1"}% {$header1zoom1|replace:",":"."}x',to:'{$header1top|regex_replace:"/^([0-9]+),(\d+)$/":"\\2"}% {$header1left|regex_replace:"/^([0-9]+),(\d+)$/":"\\2"}% {$header1zoom2|replace:",":"."}x',time:{$header1time}{literal}}{/literal}{if $header2image || $header3image || $header4image || $header5image},{/if}{/if}
{if $header2image}{literal}{{/literal}src:'/uploads/{$header2image}',alt:'{$header2text|strip_tags|replace:"'":""|replace:'"':''}',from:'{$header2top|regex_replace:"/^([0-9]+),(\d+)$/":"\\1"}% {$header2left|regex_replace:"/^([0-9]+),(\d+)$/":"\\1"}% {$header2zoom1|replace:",":"."}x',to:'{$header2top|regex_replace:"/^([0-9]+),(\d+)$/":"\\2"}% {$header2left|regex_replace:"/^([0-9]+),(\d+)$/":"\\2"}% {$header2zoom2|replace:",":"."}x',time:{$header2time}{literal}}{/literal}{if $header3image || $header4image || $header5image},{/if}{/if}
{if $header3image}{literal}{{/literal}src:'/uploads/{$header3image}',alt:'{$header3text|strip_tags|replace:"'":""|replace:'"':''}',from:'{$header3top|regex_replace:"/^([0-9]+),(\d+)$/":"\\1"}% {$header3left|regex_replace:"/^([0-9]+),(\d+)$/":"\\1"}% {$header3zoom1|replace:",":"."}x',to:'{$header3top|regex_replace:"/^([0-9]+),(\d+)$/":"\\2"}% {$header3left|regex_replace:"/^([0-9]+),(\d+)$/":"\\2"}% {$header3zoom2|replace:",":"."}x',time:{$header3time}{literal}}{/literal}{if $header4image || $header5image},{/if}{/if}
{if $header4image}{literal}{{/literal}src:'/uploads/{$header4image}',alt:'{$header4text|strip_tags|replace:"'":""|replace:'"':''}',from:'{$header4top|regex_replace:"/^([0-9]+),(\d+)$/":"\\1"}% {$header4left|regex_replace:"/^([0-9]+),(\d+)$/":"\\1"}% {$header4zoom1|replace:",":"."}x',to:'{$header4top|regex_replace:"/^([0-9]+),(\d+)$/":"\\2"}% {$header4left|regex_replace:"/^([0-9]+),(\d+)$/":"\\2"}% {$header4zoom2|replace:",":"."}x',time:{$header4time}{literal}}{/literal}{if $header5image},{/if}{/if}
{if $header5image}{literal}{{/literal}src:'/uploads/{$header5image}',alt:'{$header5text|strip_tags|replace:"'":""|replace:'"':''}',from:'{$header5top|regex_replace:"/^([0-9]+),(\d+)$/":"\\1"}% {$header5left|regex_replace:"/^([0-9]+),(\d+)$/":"\\1"}% {$header5zoom1|replace:",":"."}x',to:'{$header5top|regex_replace:"/^([0-9]+),(\d+)$/":"\\2"}% {$header5left|regex_replace:"/^([0-9]+),(\d+)$/":"\\2"}% {$header5zoom2|replace:",":"."}x',time:{$header5time}{literal}}{/literal}{/if}
],
{literal}function(idx,img,idxOut,imgOut){if(idxOut==undefined){$('div.caption').text(img.alt).animate({opacity:.7})}else{$('div.caption').fadeOut()}});{/literal}
{literal}});{/literal}
</script>

Nun müsst Ihr eigentlich nur noch im Body-bereich Eures Seiten-Templates den Div-Container einbauen, in welchen die Bilder geladen werden sollen. Wichtig ist, dass der Container eine Breite und eine Höhe bekommt, sonst funktioniert das Script nicht.

 Hier klicken, um den Code zum Kopieren zu markieren

<div id="slideshow" style="width:730px;height:230px;">{if !$header1image && !$header2image && !$header3image && !$header4image && !$header5image}<img src="/images/noheaderimage.jpg" width="730" height="230" />{/if}</div>

Wie Ihr seht, habe ich noch eine Fallback-Abfrage eingebaut. Wenn also im Backend kein Bild angegeben wurde, wird ein Standard-Bild geladen.

Ferdsch!

So, dass das Ganze nun auch funktioniert, davon könnt Ihr Euch hier überzeugen: http://www.hzp-usedom.de/pool-auch-im-freien/
Ja, ich weiß, die Bilder müssen noch angepasst werden, aber unsere Designer sind gerade anderweitig beschäftigt ...

Wenn Ihr Anregungen oder Fragen habt, tut Euch keinen Zwang an...

---

Arbeitet bei conversearch GmbH: http://conversearch.de (Webseiten-Analyse und -Monitoring)
Bloggt bei Andiministrator.de: http://andiministrator.de

nockenfell

Moderator

Ort: Lenzburg, Schweiz

Registriert: 09. November 2010

Beiträge: 2.927

Webseite

Re: Einsatz des jQuery-Plugins CrossSlide

Danke für die ausführliche Beschreibung. Bisher hatte ich das Crossslide Plugin jeweils im Textmodus als Globalen Inhaltsblock umgesetzt.

Von dem her wäre AC als externes Modul (nicht für Seiteninhalte sondern ähnlich wie Globale Inhaltsblöcke mit Schablone) recht cool.

---

[dieser Beitrag wurde mit 100% recycled bits geschrieben]
Mein Blog  /   Diverse Links rund um CMS Made Simple
Module: btAdminer, ToolBox

piratos

arbeitet mit CMS/ms

Registriert: 12. August 2011

Beiträge: 545

Re: Einsatz des jQuery-Plugins CrossSlide

CrossSlide ist eine sehr gute Sache die ich immer wieder gerne einsetze (z.B. http://www.charming-riads-in-marrakech.com/   - dieser ältere Entwurf ohne Inhalte stammt von mir) auch weil man da sehr schöne fast filmmässige Effekte realisieren kann.

Auch solche Dinge wie die Überlagerung von 2 Slidern (wie im Beispiel) sind brauchbar, was schon teils Flashmässig wirkt.

Allerdings genügt ein kleines Plugin mit ein paar Zeilen  das die Images holt, die Javascripte schreibt und gut ist - Aufrufbeispiel: {make_slider_js id='stage2' prefix='b_'}

Und das Plugin hat sich unter Smarty 3.X erledigt, weil man solche Dinge direkt in Templates oder Inhalten erledigen kann.

piratos

arbeitet mit CMS/ms

Registriert: 12. August 2011

Beiträge: 545

Re: Einsatz des jQuery-Plugins CrossSlide

Hier mal der Smarty 3.x code, den man sich sicherlich auch auf Smarty 2 umfummeln kann.
Einfach in den Inhalt setzen.

 Hier klicken, um den Code zum Kopieren zu markieren

[== Smarty 3.1.3 ==]
<script type="text/javascript" src="javascripte/jquery.js"></script>
<script type="text/javascript" src="javascripte/jquery.easing.js"></script>
<script type="text/javascript" src="javascripte/crossslide.js"></script>
<div id="stage"></div>

{$bilder=glob('Zoo/img*.jpg')} 
<div id="stage"><img src="{$bilder[0]}" width=600 height=450 alt=""</div>

{$art=array(" from: '100% 80% 1x',to: '100% 0% 1.7x',time: 3", " from: 'top left',to: 'bottom right 1.5x',time: 2", " from: '100% 80% 1.5x',to: '80% 0% 1.1x',time: 2", " from: '100% 50%',to: '30% 50% 1.5x',time: 2")}

{literal}
<script type="text/javascript">$(function() {
$('#stage').crossSlide({
fade: 1,
variant: true,
  easing: 'easeInOutQuad'

    }, [
{/literal}

{foreach $bilder as $bild} 
{$random=rand(0,3)}
{literal}{src:{/literal}'{$bild}',{$art[$random]}{literal}}{/literal}{if !$bild@last},{/if}

{/foreach}
{literal}

        ]);
    });
</script>
{/literal}

Das DIV stage muss in der CSS  mit height und width definiert sein !!

Demo zeitweilig auf meiner Spielwiese  http://alturl.com/2gnrw zu sehen.

piratos

arbeitet mit CMS/ms

Registriert: 12. August 2011

Beiträge: 545

Re: Einsatz des jQuery-Plugins CrossSlide

Ähnlich und deswegen hier als Anregung - Lightboxeinsatz mit Smarty (3.1.3)

 Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript" src="javascripte/jquery.js"></script>
<script type="text/javascript" src="javascripte/lightbox.js">
</script> {$tbilder=glob('Zoo/thumb*.jpg')}
<div id="gallery">
  <ul> {foreach $tbilder as $tb}
    <li><a href="{$tb|replace:'thumb_':''}"><img src="{$tb}" width="96" height="72" /></a></li> {/foreach}
  </ul>
</div>
{literal}<script type="text/javascript">$(function(){$('#gallery a').lightBox();});</script>{/literal}

zum umfummeln.

CSS nicht vergessen einzubinden !