Anleitung für Diashow im Flash-Style

Folgende Script/CSS Dateien werden aus Magix WD 6 benötigt:
highslide.css,
highslide.js, roe.js, evtl. png.js, (die highslide.js und die roe.js wurden von mir in einer Datei zusammengefasst.
Die highslide.js muss noch wie folgt modifiziert werden:
*************************************************************************************************************
!!! Achtung !!!!!!!!!!!!!!!!!!!!!!!!!
Um die Diashow korrekt wiederzugeben, muss am Ende des ersten Teils (vor dem roe.js - Teil der Ort der Graphikdateien eingetragen werden. Es ist ein absoluter Bezug erforderlich, da die Diashow sonst nicht in allen Verzeichnissen funktioniert.

Hier können auch die restlichen Parameter modifiziert werden wie Slideshow-Dauer oder Wiederholungen, etc. :

hs.graphicsDir = '/images/';hs.outlinesDir = './';hs.showCredits = false;hs.captionEval = 'this.thumb.alt';hs.outlineType="customs";hs.dimmingOpacity=0.5;hs.addSlideshow({interval: 5000,repeat: true,useControls: true,fixedControls: 'fit',overlayOptions: {className: 'controls-in-heading',opacity: '0.75',position: 'bottom center',offsetX: '0',offsetY: '-10',hideOnMouseOut: true}});hs.transitions = ['expand', 'crossfade'];hs.easing = 'easeInBack';hs.easingClose = 'easeOutBack';hs.registerOverlay({html: '<div class="close-simple-white" onclick="return hs.close(this)" title="Schließen"></div>', position: 'top right', useOnHtml: true, fade:2});

************************************************************************************************************

Folgende Graphikdateien werden benötigt:
close.png, closeX.png, controlbar-text.buttons.png, controlbar-white-small.gif, customs.png, geckodimmer.png, loader.white.gif, resize.gif

************************************************************************************************************

Folgende Einträge sind erforderlich:

Im HEAD:

<link rel="stylesheet" type="text/css" href="/css/highslide.css" />
<script type="text/javascript" src="/script/highslide.js"></script>

Im BODY:

<script type="text/javascript">var xr_xr=document.getElementById("xr_xr")</script>

<table width="250" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="250" align="left" valign="top">

<table width="250" border="0" cellpadding="0" align="left" cellspacing="0">
<tr>
<td width="50" align="center" valign="middle"> <a href="show2/l000.jpg" class="highslide" onmouseover="hs.headingText=''"
onclick="return hs.expand(this, { headingText: '' } )"> <img src="show2/s000.jpg" alt="" name="autoreplace" width="49" class="sl_kl"
title="" onmousemove="xr_mo(this,0,event)" /> </a></td>

<td width="50" height="40" align="center" valign="middle"> <a href="show2/l001.jpg" class="highslide" onmouseover="hs.headingText=''"
onclick="return hs.expand(this, { headingText: '' } )"> <img class="sl_kl" src="show2/s001.jpg" width="49" alt="" name="autoreplace"
title="" onmousemove="xr_mo(this,0,event)" /> </a></td>

<td width="50" height="40" align="center" valign="middle"> <a href="show2/l002.jpg" class="highslide" onmouseover="hs.headingText=''"
onclick="return hs.expand(this, { headingText: '' } )"> <img class="sl_kl" src="show2/s002.jpg" width="49" alt="" name="autoreplace"
title="" onmousemove="xr_mo(this,0,event)" /> </a></td>

<td width="50" height="40" align="center" valign="middle"> <a href="show2/l003.jpg" class="highslide" onmouseover="hs.headingText=''"
onclick="return hs.expand(this, { headingText: '' } )"> <img class="sl_kl" src="show2/s003.jpg" width="49" alt="" name="autoreplace"
title="" onmousemove="xr_mo(this,0,event)" /> </a></td>

<td width="50" height="40" align="center" valign="middle"> <a href="show2/l004.jpg" class="highslide" onmouseover="hs.headingText=''"
onclick="return hs.expand(this, { headingText: '' } )"> <img class="sl_kl" src="show2/s004.jpg" width="49" alt="" name="autoreplace"
title="" onmousemove="xr_mo(this,0,event)" /> </a></td>
</tr>
</table>
</td>
</tr>
</table>