Habe mal wieder gebastelt und es ist das hier dabei herausgekommen:
Ein mit Javascript realisierter "Slider", den man gut dafür verwenden kann um Seitenbesucher auf bestimmte Seitenbereiche zu lotsen.
FEATURES
In der Konfiguration des Moduls einstellbar:
* Bis zu fünf Teaserbilder (leicht für zusätzliche erweiterbar, hierzu muss eigentlich nur der Input des Moduls angepasst werden)
* Größe der "Teaserbühne"
* Größe der Teaserbilder
* Größe der Hoverbilder
* horizontale und vertikale Positionierung der Teaser- und Hoverbilder
* Spiegelungen der Teaser- und Hoverbilder zuschaltbar
* Abstände zwischen den Teaserbildern
* Geschwindigkeit beim Ein- und Ausfaden
* Verlinkungen öffnen sich in neuem oder gleichen Fenster
* Hintergrundbild der "Teaserbühne"
Das Modul ist für Mehrsprachigkeit im Backend konfiguriert und auch per CSS bieten sich noch so einige Gestaltungsmöglichkeiten.
Eine Demo findet ihr hier: http://www.seamless-design.de/cms/front ... ?idart=114
INSTALLATION
1. Download folgender Dateien (http://www.seamless-design.de/cms/uploa ... slider.zip)
* xml-Datei Modul slider
* xml-Datei deutsche Übersetzung im Backend
* Beispielbilder für die Teaser
* Beispielbild für den Hintergrund der "Teaserbühne"
2. Import des Moduls & ggf. der Sprachdatei
3. Anlegen eines Templates mit dem Modul
4. Erstellen eines Artikels mit entsprechendem Template
5. Konfiguration des Moduls
Die Konfiguration für das obige Beispiel sähe so aus:
Und hier nun der unvermeidliche Code:
INPUT:
Code: Alles auswählen
/***********************************************
* CONTENIDO MODUL - INPUT
*
* Modulname : slider
* Author(s) : www.Seamless-Design.de Markus Hübner
* Copyright : www.Seamless-Design.de Markus Hübner
* Created : 11.12.2010
************************************************/
echo '<table>';
echo '<tr><td>'.mi18n("number of teasers").'</td><td><input type="text" size="1" name="CMS_VAR[10]" value="CMS_VALUE[10]"></td></tr>';
echo '<tr><td>'.mi18n("background teaserrow").'</td><td><input type="text" size="50" name="CMS_VAR[20]" value="CMS_VALUE[20]"></td></tr>';
echo '<tr><td>'.mi18n("speed fading in").'</td><td><input type="text" size="1" name="CMS_VAR[30]" value="CMS_VALUE[30]">
<span style="font-size: 10px;">
(pausing in milliseconds)
</span>
</td></tr>';
echo '<tr><td>'.mi18n("speed fading out").'</td><td><input type="text" size="1" name="CMS_VAR[31]" value="CMS_VALUE[31]">
<span style="font-size: 10px;">
(pausing in milliseconds)
</span>
</td></tr>';
echo '<tr><td>'.mi18n("fading limit").'</td><td><input type="text" size="1" name="CMS_VAR[32]" value="CMS_VALUE[32]">
<span style="font-size: 10px;">
(100: no transparency after fading/ 0: full transparency after fading)
</span>
</td></tr>';
echo '<tr><td>'.mi18n("reflection below teaser").'</td><td>';
if ("CMS_VALUE[40]" != "true")
{
echo '<input type="radio" name="CMS_VAR[40]" value="true"> '.mi18n("yes");
} else
{
echo '<input type="radio" name="CMS_VAR[40]" value="true" checked> '.mi18n("yes");
}
if ("CMS_VALUE[40]" != "false")
{
echo '<input type="radio" name="CMS_VAR[40]" value="false"> '.mi18n("no");
} else
{
echo '<input type="radio" name="CMS_VAR[40]" value="false" checked> '.mi18n("no");
}
echo '</td></tr>';
echo '<tr><td>'.mi18n("reflection below hovered teaser").'</td><td>';
if ("CMS_VALUE[41]" != "true")
{
echo '<input type="radio" name="CMS_VAR[41]" value="true"> '.mi18n("yes");
} else
{
echo '<input type="radio" name="CMS_VAR[41]" value="true" checked> '.mi18n("yes");
}
if ("CMS_VALUE[41]" != "false")
{
echo '<input type="radio" name="CMS_VAR[41]" value="false"> '.mi18n("no");
} else
{
echo '<input type="radio" name="CMS_VAR[41]" value="false" checked> '.mi18n("no");
}
echo '</td></tr>';
echo '<tr><td>'.mi18n("width of teaserarea").'</td><td><input type="text" size="1" name="CMS_VAR[49]" value="CMS_VALUE[49]"> px</td></tr>';
echo '<tr><td>'.mi18n("height of teaserarea").'</td><td><input type="text" size="2" name="CMS_VAR[50]" value="CMS_VALUE[50]"> px</td></tr>';
echo '<tr><td>'.mi18n("width of teaserpictures").'</td><td><input type="text" size="2" name="CMS_VAR[51]" value="CMS_VALUE[51]"> px</td></tr>';
echo '<tr><td>'.mi18n("height of teaserpictures").'</td><td><input type="text" size="2" name="CMS_VAR[52]" value="CMS_VALUE[52]"> px</td></tr>';
echo '<tr><td>'.mi18n("height of teaserreflection").'</td><td><input type="text" size="2" name="CMS_VAR[53]" value="CMS_VALUE[53]"> px</td></tr>';
echo '<tr><td>'.mi18n("width of hoverpictures").'</td><td><input type="text" size="2" name="CMS_VAR[55]" value="CMS_VALUE[55]"> px</td></tr>';
echo '<tr><td>'.mi18n("height of hoverpictures").'</td><td><input type="text" size="2" name="CMS_VAR[56]" value="CMS_VALUE[56]"> px</td></tr>';
echo '<tr><td>'.mi18n("height of hoverreflection").'</td><td><input type="text" size="2" name="CMS_VAR[57]" value="CMS_VALUE[57]"> px</td></tr>';
echo '<tr><td>'.mi18n("teaser vertical offset").'</td><td><input type="text" size="2" name="CMS_VAR[60]" value="CMS_VALUE[60]"> px
<span style="font-size: 10px;">
(0: centered position/ -XYZ: higher position/ +xyz: lower position)
</span>
</td></tr>';
echo '<tr><td>'.mi18n("teaser hover margin-top").'</td><td><input type="text" size="2" name="CMS_VAR[61]" value="CMS_VALUE[61]"> px</td></tr>';
echo '<tr><td>'.mi18n("teaser hover horizontal-offset").'</td><td><input type="text" size="2" name="CMS_VAR[62]" value="CMS_VALUE[62]"> px
<span style="font-size: 10px;">
(0: centered position/ -XYZ: left offset/ +xyz: right offset)
</span>
</td></tr>';
echo '<tr><td>'.mi18n("margin-left 1. teaser").'</td><td><input type="text" size="2" name="CMS_VAR[63]" value="CMS_VALUE[63]"> px</td></tr>';
echo '<tr><td>'.mi18n("horizontal teaserdistance").'</td><td><input type="text" size="2" name="CMS_VAR[64]" value="CMS_VALUE[64]"> px</td></tr>';
echo '</table>';
echo '<hr>';
echo '<strong>Teaser 1</strong>';
echo '<table>';
echo '<tr><td>'.mi18n("Link").'</td><td><input type="text" size="50" name="CMS_VAR[110]" value="CMS_VALUE[110]"><br/>
<span style="font-size: 10px;">
(front_content.php?idart=xyz / front_content.php?idcat=xyz / http://www.domain.de)
</span>
</td></tr>';
echo '<tr><td>'.mi18n("link new window").'</td><td>';
if ("CMS_VALUE[115]" != "_blank")
{
echo '<input type="radio" name="CMS_VAR[115]" value="_blank"> '.mi18n("yes");
} else
{
echo '<input type="radio" name="CMS_VAR[115]" value="_blank" checked> '.mi18n("yes");
}
if ("CMS_VALUE[115]" != "_self")
{
echo '<input type="radio" name="CMS_VAR[115]" value="_self"> '.mi18n("no");
} else
{
echo '<input type="radio" name="CMS_VAR[115]" value="_self" checked> '.mi18n("no");
}
echo '</td></tr>';
echo '<tr><td>'.mi18n("Linktitle").'</td><td><input type="text" size="50" name="CMS_VAR[120]" value="CMS_VALUE[120]"></td></tr>';
echo '<tr><td>'.mi18n("picture").'</td><td><input type="text" size="50" name="CMS_VAR[130]" value="CMS_VALUE[130]"></td></tr>';
echo '<tr><td>'.mi18n("picture reflection").'</td><td><input type="text" size="50" name="CMS_VAR[140]" value="CMS_VALUE[140]"></td></tr>';
echo '</table>';
echo '<hr>';
echo '<strong>Teaser 2</strong>';
echo '<table>';
echo '<tr><td>'.mi18n("Link").'</td><td><input type="text" size="50" name="CMS_VAR[210]" value="CMS_VALUE[210]"><br/>
<span style="font-size: 10px;">
(front_content.php?idart=xyz / front_content.php?idcat=xyz / http://www.domain.de)
</span>
</td></tr>';
echo '<tr><td>'.mi18n("link new window").'</td><td>';
if ("CMS_VALUE[215]" != "_blank")
{
echo '<input type="radio" name="CMS_VAR[215]" value="_blank"> '.mi18n("yes");
} else
{
echo '<input type="radio" name="CMS_VAR[215]" value="_blank" checked> '.mi18n("yes");
}
if ("CMS_VALUE[215]" != "_self")
{
echo '<input type="radio" name="CMS_VAR[215]" value="_self"> '.mi18n("no");
} else
{
echo '<input type="radio" name="CMS_VAR[215]" value="_self" checked> '.mi18n("no");
}
echo '</td></tr>';
echo '<tr><td>'.mi18n("Linktitle").'</td><td><input type="text" size="50" name="CMS_VAR[220]" value="CMS_VALUE[220]"></td></tr>';
echo '<tr><td>'.mi18n("picture").'</td><td><input type="text" size="50" name="CMS_VAR[230]" value="CMS_VALUE[230]"></td></tr>';
echo '<tr><td>'.mi18n("picture reflection").'</td><td><input type="text" size="50" name="CMS_VAR[240]" value="CMS_VALUE[240]"></td></tr>';
echo '</table>';
echo '<hr>';
echo '<strong>Teaser 3</strong>';
echo '<table>';
echo '<tr><td>'.mi18n("Link").'</td><td><input type="text" size="50" name="CMS_VAR[310]" value="CMS_VALUE[310]"><br/>
<span style="font-size: 10px;">
(front_content.php?idart=xyz / front_content.php?idcat=xyz / http://www.domain.de)
</span>
</td></tr>';
echo '<tr><td>'.mi18n("link new window").'</td><td>';
if ("CMS_VALUE[315]" != "_blank")
{
echo '<input type="radio" name="CMS_VAR[315]" value="_blank"> '.mi18n("yes");
} else
{
echo '<input type="radio" name="CMS_VAR[315]" value="_blank" checked> '.mi18n("yes");
}
if ("CMS_VALUE[315]" != "_self")
{
echo '<input type="radio" name="CMS_VAR[315]" value="_self"> '.mi18n("no");
} else
{
echo '<input type="radio" name="CMS_VAR[315]" value="_self" checked> '.mi18n("no");
}
echo '</td></tr>';
echo '<tr><td>'.mi18n("Linktitle").'</td><td><input type="text" size="50" name="CMS_VAR[320]" value="CMS_VALUE[320]"></td></tr>';
echo '<tr><td>'.mi18n("picture").'</td><td><input type="text" size="50" name="CMS_VAR[330]" value="CMS_VALUE[330]"></td></tr>';
echo '<tr><td>'.mi18n("picture reflection").'</td><td><input type="text" size="50" name="CMS_VAR[340]" value="CMS_VALUE[340]"></td></tr>';
echo '</table>';
echo '<hr>';
echo '<strong>Teaser 4</strong>';
echo '<table>';
echo '<tr><td>'.mi18n("Link").'</td><td><input type="text" size="50" name="CMS_VAR[410]" value="CMS_VALUE[410]"><br/>
<span style="font-size: 10px;">
(front_content.php?idart=xyz / front_content.php?idcat=xyz / http://www.domain.de)
</span>
</td></tr>';
echo '<tr><td>'.mi18n("link new window").'</td><td>';
if ("CMS_VALUE[415]" != "_blank")
{
echo '<input type="radio" name="CMS_VAR[415]" value="_blank"> '.mi18n("yes");
} else
{
echo '<input type="radio" name="CMS_VAR[415]" value="_blank" checked> '.mi18n("yes");
}
if ("CMS_VALUE[415]" != "_self")
{
echo '<input type="radio" name="CMS_VAR[415]" value="_self"> '.mi18n("no");
} else
{
echo '<input type="radio" name="CMS_VAR[415]" value="_self" checked> '.mi18n("no");
}
echo '</td></tr>';
echo '<tr><td>'.mi18n("Linktitle").'</td><td><input type="text" size="50" name="CMS_VAR[420]" value="CMS_VALUE[420]"></td></tr>';
echo '<tr><td>'.mi18n("picture").'</td><td><input type="text" size="50" name="CMS_VAR[430]" value="CMS_VALUE[430]"></td></tr>';
echo '<tr><td>'.mi18n("picture reflection").'</td><td><input type="text" size="50" name="CMS_VAR[440]" value="CMS_VALUE[440]"></td></tr>';
echo '</table>';
echo '<hr>';
echo '<strong>Teaser 5</strong>';
echo '<table>';
echo '<tr><td>'.mi18n("Link").'</td><td><input type="text" size="50" name="CMS_VAR[510]" value="CMS_VALUE[510]"><br/>
<span style="font-size: 10px;">
(front_content.php?idart=xyz / front_content.php?idcat=xyz / http://www.domain.de)
</span>
</td></tr>';
echo '<tr><td>'.mi18n("link new window").'</td><td>';
if ("CMS_VALUE[515]" != "_blank")
{
echo '<input type="radio" name="CMS_VAR[515]" value="_blank"> '.mi18n("yes");
} else
{
echo '<input type="radio" name="CMS_VAR[515]" value="_blank" checked> '.mi18n("yes");
}
if ("CMS_VALUE[515]" != "_self")
{
echo '<input type="radio" name="CMS_VAR[515]" value="_self"> '.mi18n("no");
} else
{
echo '<input type="radio" name="CMS_VAR[515]" value="_self" checked> '.mi18n("no");
}
echo '</td></tr>';
echo '<tr><td>'.mi18n("Linktitle").'</td><td><input type="text" size="50" name="CMS_VAR[520]" value="CMS_VALUE[520]"></td></tr>';
echo '<tr><td>'.mi18n("picture").'</td><td><input type="text" size="50" name="CMS_VAR[530]" value="CMS_VALUE[530]"></td></tr>';
echo '<tr><td>'.mi18n("picture reflection").'</td><td><input type="text" size="50" name="CMS_VAR[540]" value="CMS_VALUE[540]"></td></tr>';
echo '</table>';
Code: Alles auswählen
<style type="text/css">
<!--
div.sd_teaser {
position: absolute;
z-index: 10;
}
div.sd_teaser_row {
margin-top: 10px;
overflow: hidden;
/*height wird in der Variablen $teaser_row_height festgelegt!*/
z-index:0;
}
img.sd_teaser {
border: 1px solid #3d857d;
}
img.sd_teaser_hover {
border: 2px solid #3d857d;
}
img.sd_teaser_reflection {
margin-top: 5px;
}
img.sd_teaser_hover_reflection {
margin-top: 10px;
margin-left: 2px;
background-color: transparent;
}
div.sd_teaser_hover {
display: none;
position: absolute;
z-index: 60;
}
-->
</style>
<div style="clear: both;"></div>
<?php
/***********************************************
* CONTENIDO MODUL - OUTPUT
*
* Modulname : slider
* Author(s) : www.Seamless-Design.de Markus Hübner
* Copyright : www.Seamless-Design.de Markus Hübner
* Created : 11.12.2010
************************************************/
$number_of_teasers="CMS_VALUE[10]";
$teaser_row_background="CMS_VALUE[20]";
$fading_speed_in="CMS_VALUE[30]"; // geschwindigkeit des einfade-effekts
$fading_speed_out="CMS_VALUE[31]"; // geschwindigkeit des ausfade-effekts
$fading_limit_ie="CMS_VALUE[32]"; // 0: bild wird nach einfaden komplett transparent, 100: bild wird nicht transparent/ wert für ie
$fading_limit_moz=$fading_limit_ie/100; //wert für mozilla & co.
$reflection_teaser="CMS_VALUE[40]"; // true: reflection wird unter den teasern angezeigt, false: keine reflection
$reflection_teaser_hover="CMS_VALUE[41]"; // true: reflection wird unter den teaser_hover angezeigt, false: keine reflection
$teaser_row_width="CMS_VALUE[49]"; // breite des div.teaser_row
$teaser_row_height="CMS_VALUE[50]"; // höhe des div.teaser_row
$teaser_width="CMS_VALUE[51]"; // breite der teaserbilder
$teaser_height="CMS_VALUE[52]"; // höhe der teaserbilder
$teaser_reflection_height="CMS_VALUE[53]"; // höhe der reflection unterhalb der teaser
$teaser_reflection_width=$teaser_width; // breite der reflection
$teaser_hover_width="CMS_VALUE[55]"; // breite der teaserbilder
$teaser_hover_height="CMS_VALUE[56]"; // höhe der teaserbilder
$teaser_hover_reflection_height="CMS_VALUE[57]"; // höhe der reflection von teaser_hover
$teaser_hover_reflection_width=$teaser_hover_width; // breite der reflection von teaser_hover
$teaser_vertical_offset="CMS_VALUE[60]"; // negative werte verschieben die teaser nach der zentrierung im div.sd_teaser_row nach oben, positive nach unten
$teaser_hover_margin_top="CMS_VALUE[61]"; // abstand der teaser_hover nach oben
$teaser_hover_offset_horizontal="CMS_VALUE[62]"; // korrekturwert für die horizontale positionierung der teaser_hover
$teaser_margin_top=$teaser_row_height/2 - $teaser_height/2 + $teaser_vertical_offset; // positioniert die teaser zunächst vertikal zentriert im div.teaser_row und korrigiert dann um den gewünschten offset
$teaser_row_margin_left="CMS_VALUE[63]"; // zentriert die teaser im div.teaser_row
$teaser_margin_right="CMS_VALUE[64]"; // regelt den abstand zwischen den teaserbildern
$teaser_0_link="CMS_VALUE[110]";
$teaser_0_link_new_window="CMS_VALUE[115]";
$teaser_0_linktitle="CMS_VALUE[120]";
$teaser_0_teaser_background="CMS_VALUE[130]";
$teaser_0_teaser_background_reflection="CMS_VALUE[140]";
$teaser_1_link="CMS_VALUE[210]";
$teaser_1_link_new_window="CMS_VALUE[215]";
$teaser_1_linktitle="CMS_VALUE[220]";
$teaser_1_teaser_background="CMS_VALUE[230]";
$teaser_1_teaser_background_reflection="CMS_VALUE[240]";
$teaser_2_link="CMS_VALUE[310]";
$teaser_2_link_new_window="CMS_VALUE[315]";
$teaser_2_linktitle="CMS_VALUE[320]";
$teaser_2_teaser_background="CMS_VALUE[330]";
$teaser_2_teaser_background_reflection="CMS_VALUE[340]";
$teaser_3_link="CMS_VALUE[410]";
$teaser_3_link_new_window="CMS_VALUE[415]";
$teaser_3_linktitle="CMS_VALUE[420]";
$teaser_3_teaser_background="CMS_VALUE[430]";
$teaser_3_teaser_background_reflection="CMS_VALUE[440]";
$teaser_4_link="CMS_VALUE[510]";
$teaser_4_link_new_window="CMS_VALUE[515]";
$teaser_4_linktitle="CMS_VALUE[520]";
$teaser_4_teaser_background="CMS_VALUE[530]";
$teaser_4_teaser_background_reflection="CMS_VALUE[540]";
$teaser_5_link="CMS_VALUE[610]";
$teaser_5_link_new_window="CMS_VALUE[615]";
$teaser_5_linktitle="CMS_VALUE[620]";
$teaser_5_teaser_background="CMS_VALUE[630]";
$teaser_5_teaser_background_reflection="CMS_VALUE[640]";
?>
<script type="text/javascript">
<!--
/* http://www.scriptwelt.org/ http://blog.scriptwelt.org/
Created: Project HunBug www.astral-consultancy.co.uk Autor HungBag */
var fadeOpacity = new Array();
var fadeTimer = new Array();
//var fadeInterval = <?php echo $fading_speed_in; ?>; // milliseconds
function fade(o,d,fadeInterval)
{
// o - Object to fade in or out.
// d - Display, true = fade in, false = fade out
var obj = document.getElementById(o);
if((fadeTimer[o])||(d&&obj.style.display!='block')||(!d&&obj.style.display=='block'))
{
if(fadeTimer[o])
clearInterval(fadeTimer[o]);
else
if(d) fadeOpacity[o] = 0;
else fadeOpacity[o] = 9;
obj.style.opacity = "."+fadeOpacity[o].toString();
obj.style.filter = "alpha(opacity="+fadeOpacity[o].toString()+"0)";
if(d)
{
obj.style.display = 'block';
fadeTimer[o] = setInterval('fadeAnimation("'+o+'",1);',fadeInterval);
}
else
fadeTimer[o] = setInterval('fadeAnimation("'+o+'",-1);',fadeInterval);
}
}
function fadeAnimation(o,i)
{
// o - o - Object to fade in or out.
// i - increment, 1 = Fade In
var obj = document.getElementById(o);
fadeOpacity[o] += i;
obj.style.opacity = "."+fadeOpacity[o].toString();
obj.style.filter = "alpha(opacity="+fadeOpacity[o].toString()+"0)";
if((fadeOpacity[o]=='9')|(fadeOpacity[o]=='0'))
{
if(fadeOpacity[o]=='0')
obj.style.display = 'none';
else
{
obj.style.opacity = "<?php echo $fading_limit_moz; ?>";
obj.style.filter = "alpha(opacity=<?php echo $fading_limit_ie; ?>)";
}
clearInterval(fadeTimer[o]);
delete(fadeTimer[o]);
delete(fadeTimer[o]);
delete(fadeOpacity[o]);
}
}
//-->
</script>
<?php
$loop=0;
$array_teaser_link=array($teaser_0_link,$teaser_1_link,$teaser_2_link,$teaser_3_link,$teaser_4_link,$teaser_5_link);
$array_teaser_link_new_window=array($teaser_0_link_new_window,$teaser_1_link_new_window,$teaser_2_link_new_window,$teaser_3_link_new_window,$teaser_4_link_new_window,$teaser_5_link_new_window);
$array_teaser_linktitle=array($teaser_0_linktitle,$teaser_1_linktitle,$teaser_2_linktitle,$teaser_3_linktitle,$teaser_4_linktitle,$teaser_5_linktitle);
$array_teaser_teaser_background=array($teaser_0_teaser_background,$teaser_1_teaser_background,$teaser_2_teaser_background,$teaser_3_teaser_background,$teaser_4_teaser_background,$teaser_5_teaser_background);
$array_teaser_teaser_background_reflection=array($teaser_0_teaser_background_reflection,$teaser_1_teaser_background_reflection,$teaser_2_teaser_background_reflection,$teaser_3_teaser_background_reflection,$teaser_4_teaser_background_reflection,$teaser_5_teaser_background_reflection);
echo '<div class="sd_teaser_row" style="width: '.$teaser_row_width.'px; height: '.$teaser_row_height.'px; background-image: url('.$teaser_row_background.'); background-repeat: repeat-x;">';
/********** Teaser **********/
while ($loop<$number_of_teasers)
{
$margin_position_absolute=($loop*$teaser_width)+($loop*$teaser_margin_right)+$teaser_row_margin_left;
echo '<div class="sd_teaser" style="margin-left: '.$margin_position_absolute.'px; margin-top: '.$teaser_margin_top.'px;">
<a class="sd_teaser" href="'.$array_teaser_link[$loop].'" title="'.$array_teaser_linktitle[$loop].'" target="'.$array_teaser_link_new_window[$loop].'">';
?>
<img class="sd_teaser" onmouseover="fade('<?php echo 'teaser_hover_'.$loop; ?>',true,<?php echo $fading_speed_in; ?>)"
<?php
echo 'src="'.$array_teaser_teaser_background[$loop].'" width="'.$teaser_width.'" height="'.$teaser_height.'" alt="'.$array_teaser_linktitle[$loop].'" title="'.$array_teaser_linktitle[$loop].'"/>';
if ($reflection_teaser=="true")
{
echo '<br/><img class="sd_teaser_reflection" src="'.$array_teaser_teaser_background_reflection[$loop].'" width="'.$teaser_reflection_width.'" height="'.$teaser_reflection_height.'" alt="'.$array_teaser_linktitle[$loop].'" title="'.$array_teaser_linktitle[$loop].'"/>';
}
echo ' </a>
</div>';
$loop++;
}
/********** Teaser Hover **********/
$loop=0;
while ($loop<$number_of_teasers)
{
$margin_position_absolute_hover=$teaser_row_margin_left+$loop*($teaser_width+$teaser_margin_right)-($teaser_hover_width-$teaser_width)/2+$teaser_hover_offset_horizontal;
echo '<div id="teaser_hover_'.$loop.'" class="sd_teaser_hover" style="margin-left: '.$margin_position_absolute_hover.'px; margin-top: '.$teaser_hover_margin_top.'px;">
<a class="sd_teaser_hover" href="'.$array_teaser_link[$loop].'" title="'.$array_teaser_linktitle[$loop].'" target="'.$array_teaser_link_new_window[$loop].'">';
?>
<img class="sd_teaser_hover" onmouseout="fade('<?php echo 'teaser_hover_'.$loop; ?>',false,<?php echo $fading_speed_out; ?>)"
<?php
echo 'src="'.$array_teaser_teaser_background[$loop].'" alt="'.$array_teaser_linktitle[$loop].'" title="'.$array_teaser_linktitle[$loop].'" width="'.$teaser_hover_width.'" height="'.$teaser_hover_height.'"/>';
if ($reflection_teaser_hover=="true")
{
echo '<br/><img class="sd_teaser_hover_reflection" src="'.$array_teaser_teaser_background_reflection[$loop].'" width="'.$teaser_hover_reflection_width.'" height="'.$teaser_hover_reflection_height.'" alt="'.$array_teaser_linktitle[$loop].'" title="'.$array_teaser_linktitle[$loop].'"/>';
}
echo ' </a>
</div>';
$loop++;
}
echo '</div>'; // echo '<div class="teaser_row">';
?>
Es gibt nur einen Stolperstein: die Spiegelung des großen Hoverbildes im Internet-Explorer. Das der IE ja bis vor einer Weile Probleme mit der Transparenz bei png-Dateien hatte, ist ja hinlänglich bekannt. Allerdings scheint das noch nicht völlig behoben zu sein. Denn im IE7 und IE8 ist die Spiegelung nicht transparent sondern stattdessen kommt schwarzer Hintergrund durch. Die Spiegelungen der kleinen Teaserbilder funktionieren völlig normal. Anscheinend hakt es im IE durch den Einfade-Effekt per JS. Wenn jemand also eine Lösung weiß: immer her damit!
Zu den Bildern: Ihr braucht nicht vier Bilder pro Teaser erstellen (Teaser und Hoverbild plus deren Spiegelungen). Es reichen zwei: das große Hoverbild und dessen Spiegelung. Die Bilder für die kleineren Teaser nutzen die gleichen Dateien und werden nur kleiner skaliert. Man mag jetzt sagen: unsauber. Ist aber praktischer, weil so die Bildgröße flexibel in der Konfiguration angepasst werden kann und man nicht doppelt und dreifach bei Änderungen die Grafiksoftware anwerfen muss...
Viel Spaß mit dem Modul!
Markus