{if !empty($module_message)}<h4>{$module_message|escape}</h4>{/if}
{if !empty($gallerytitle)}<h3>{$gallerytitle}</h3>{/if}

{foreach from=$images item=image name=imglist}
{* Hiermit wird das erste Bild aus dem Array $images gezeigt *}
{if $smarty.foreach.imglist.first}
<a href="{$image->file|escape:'url'|replace:'%2F':'/'}" class="MagicZoom" 
rel="zoom-width:400; zoom-height:300; opacity-reverse: false; zoom-fade:true; zoom-fade-in-speed: 1200; zoom-fade-out-speed: 800; selectors-effect-speed: 1200; selectors-effect:fade;" 
id="zoom" title="{$image->comment}">
<img src="{supersizer path=$image->file|escape:'url'|replace:'%2F':'/' width='180' url=1}" alt="{$image->titlename}" width="180" />
</a>

{if !empty($gallerycomment)}
<p class="bildtext">{$gallerycomment}
<br />[{$imagecount}]</p>
{/if}
{/if}
{/foreach}

{* Die Vorschaubilder *}
<div id="previewimg">

{foreach from=$images item=image}
<!-- Vorschaubild -->
{* rev= muss die Referenz auf das mittlere Bild haben, und wird mit Supersizer erzeugt *}
<a href="{$image->file|escape:'url'|replace:'%2F':'/'}" rel="zoom-id:zoom;" rev="{supersizer path=$image->file|escape:'url'|replace:'%2F':'/' width='180' url=1}" title="{$image->comment}">
 <img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" title="{$image->titlename}" />
</a>
{/foreach}

</div><!-- /previewimg -->

/*
   Magic Zoom v3.1.24 
   Copyright 2011 Magic Toolbox
   Buy a license to use Magic Scroll on your site.
   Go to www.magictoolbox.com/magiczoom/
*/

.MagicZoom img {
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}

/* Style of zoomed window */
.MagicZoomBigImageCont {
border: none;
}

/* Style of header, activated with "title" attribute in <a> tag */
.MagicZoomHeader {
font-family:Verdana,Arial, sans-serif;
font-size: 11px !important;
line-height: normal !important;
color: #fff;
background-color: #979493;
text-align: center !important;
}

/* Style of small square under mouse */
.MagicZoomPup {
border: 1px solid #aaa;
background: #fff;
cursor: move;
}

/* Style of message box while image is loading */
.MagicZoomLoading {
border: 1px solid #ccc;
background: #fff url(images/ajax-loader.gif) no-repeat 2px 50%;
padding: 4px 4px 4px 24px !important;
margin: 0;
text-decoration: none;
text-align: left;
font-size: 8pt;
font-family: sans-serif;
color: #444;
}


#previewimg           {clear:left; padding:10px 0;}
#previewimg a, 
#previewimg a:visited {float:left; padding:0; margin:0 2px 0 0; text-decoration:none; border:1px solid white;}
#previewimg a:hover   {border-color:#000;}
#previewimg img       {display:block; padding:0; margin:0; border:none;}

a.MagicZoom {float:left; margin-right:20px;}
p#bildtext {float:left; width:250px;}

<script type="text/javascript" src="js/magiczoom.js"></script>

{literal}
<script type="text/javascript">
MagicZoom.options = {
 'opacity': 30,
 'move-on-click':true,
 'PARAMETER': WERT,
};
</script>
{/literal}