zum ausklingenden Jahr 2010 noch einmal ein neues Modul. Auf das 2011 viele weitere folgen mögen
Das Modul bietet die - per Javascript umgesetzte - Möglichkeit, grafische Teaser mit per MouseOver ein- und ausfahrendem Slider anzuzeigen. In der vorliegenden Version bis zu fünf Stück. Ein Beispiel mit dreien:
FEATURES
* Bis zu fünf Teaser (kann aber bei Bedarf auch durch Anpassungen im In- und Output des Moduls erweitert werden.)
* Frei gestaltbare (Abmessungen und Motive) Hoverflächen, Teaserhintergründe und Hintergründe des ausfahrenden Sliders.
* Festlegung dieser Bilder über den Konfigurationsreiter.
* Individuelle Verlinkungsmöglichkeiten.
* Texte für die Hoverfläche und den ausfahrenden Slider in der Konfiguration eintragbar.
* Geschwindigkeit beim Ein- und Ausfahren einstellbar inkl. "Slow-Down" Effekte.
* Anpassbare CSS-Styles für weitere Individualisierungen.
* Linkziel kann für die Öffnung in neuem oder gleichen Fenster pro Teaser festgelegt werden.
* Mehrsprachigkeit im Backend wird unterstützt.
INSTALLATION
1) Download der notwendigen Dateien (slider-teaser.zip) unter http://www.seamless-design.de/cms/front ... p?idcat=81, hier findet ihr auch eine Live-Demo:
* Modul
* Modul-Template
* CSS-Styles
* Beispielbilder für die obigen Teaser
2) Import des Moduls
3) Erstellen eines Templates mit dem Modul
4) Ergänzen der CSS-Styles
5) Hochladen der Beispielbilder oder eigener
6) Anlegen eines Artikels mit dem Template
7) Konfiguration des Moduls im Konfigurationsreiter und ggf. im Output des Moduls
Erläuterungen zu den Abmessungen und Variablenwerten anhand der obigen Teaser-Beispiele. Die Teaser haben eine Gesamtbreite von 400px:
1) div.slider-teaser: die Gesamtbreite des Teasers beträgt 400px und beinhaltet div.slider-teaser_hover und div.slider-teaser_content
2) div.slider-teaser_hover: die Gesamtbreite dieser Hoverfläche beträgt 100px
3) div.slider-teaser_slider: die Gesamtbreite der Infofläche beträgt 300px
Daraus folgt jetzt:
1) div.slider-teaser_slider: left: -200px, damit das DIV slider-teaser_slider vollständig verschwindet (Breite Hover-DIV abzüglich Breite Content-DIV -> 100-300=-200)
2) div.slider-teaser_slider_noscript: left: 100px, damit das DIV slider-teaser_slider_noscript vollständig angezeigt wird (100px ist die Breite des Hover-DIV)
3) var_end=100: Dieser Wert entspricht left: 100px (div.slider-teaser_slider_noscript)
4) var_start=-200: Dieser Wert entspricht left: -200px (div.slider-teaser_slider)
Hier ist bei anderen Abmessungen des Teasers ein wenig "Experimentierfreude" und Geduld gefragt um die exakten Werte zu ermitteln. Auch wenn der "Slowdown-Effekt" beim Ein- oder Ausfahren genutzt werden soll, muss für den Punkt ab dem das Verlangsamen einsetzen soll die Schrittweite berücksichtigt werden.
Und für alle die ohne die zip-Datei und mit eigenen Bildern gleich loslegen wollen:
INPUT des Moduls
Code: Alles auswählen
/***********************************************
* CONTENIDO MODUL - INPUT
*
* Modulname : slider-teaser
* Author(s) : www.Seamless-Design.de Markus Hübner
* Copyright : www.Seamless-Design.de Markus Hübner
* Created : 11.12.2010
************************************************/
echo "<strong>".mi18n("number of teasers").':</strong> 1 - <input type="text" size="1" name="CMS_VAR[10]" value="CMS_VALUE[10]">';
echo '<hr>';
echo '<strong>Teaser 1:</strong><br/>';
echo '<table>';
echo '<tr><td>'.mi18n("Theme").'</td><td><input type="text" size="50" name="CMS_VAR[100]" value="CMS_VALUE[100]"></td></tr>';
echo '<tr><td>'.mi18n("Link").'</td><td><input type="text" size="50" name="CMS_VAR[110]" value="CMS_VALUE[110]">
<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("Slider Headline").'</td><td><input type="text" size="50" name="CMS_VAR[130]" value="CMS_VALUE[130]"></td></tr>';
echo '<tr><td>'.mi18n("Slider Content").'</td><td><input type="text" size="50" name="CMS_VAR[140]" value="CMS_VALUE[140]"></td></tr>';
echo '<tr><td>'.mi18n("Teaser Background").'</td><td><input type="text" size="50" name="CMS_VAR[150]" value="CMS_VALUE[150]"></td></tr>';
echo '<tr><td>'.mi18n("Hover Background").'</td><td><input type="text" size="50" name="CMS_VAR[160]" value="CMS_VALUE[160]"></td></tr>';
echo '<tr><td>'.mi18n("Slider Background").'</td><td><input type="text" size="50" name="CMS_VAR[170]" value="CMS_VALUE[170]"></td></tr>';
echo '</table>';
echo '<hr/>';
echo '<strong>Teaser 2:</strong><br/>';
echo '<table>';
echo '<tr><td>'.mi18n("Theme").'</td><td><input type="text" size="50" name="CMS_VAR[200]" value="CMS_VALUE[200]"></td></tr>';
echo '<tr><td>'.mi18n("Link").'</td><td><input type="text" size="50" name="CMS_VAR[210]" value="CMS_VALUE[210]">
<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("Slider Headline").'</td><td><input type="text" size="50" name="CMS_VAR[230]" value="CMS_VALUE[230]"></td></tr>';
echo '<tr><td>'.mi18n("Slider Content").'</td><td><input type="text" size="50" name="CMS_VAR[240]" value="CMS_VALUE[240]"></td></tr>';
echo '<tr><td>'.mi18n("Teaser Background").'</td><td><input type="text" size="50" name="CMS_VAR[250]" value="CMS_VALUE[250]"></td></tr>';
echo '<tr><td>'.mi18n("Hover Background").'</td><td><input type="text" size="50" name="CMS_VAR[260]" value="CMS_VALUE[260]"></td></tr>';
echo '<tr><td>'.mi18n("Slider Background").'</td><td><input type="text" size="50" name="CMS_VAR[270]" value="CMS_VALUE[270]"></td></tr>';
echo '</table>';
echo '<hr/>';
echo '<strong>Teaser 3:</strong><br/>';
echo '<table>';
echo '<tr><td>'.mi18n("Theme").'</td><td><input type="text" size="50" name="CMS_VAR[300]" value="CMS_VALUE[300]"></td></tr>';
echo '<tr><td>'.mi18n("Link").'</td><td><input type="text" size="50" name="CMS_VAR[310]" value="CMS_VALUE[310]">
<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("Slider Headline").'</td><td><input type="text" size="50" name="CMS_VAR[330]" value="CMS_VALUE[330]"></td></tr>';
echo '<tr><td>'.mi18n("Slider Content").'</td><td><input type="text" size="50" name="CMS_VAR[340]" value="CMS_VALUE[340]"></td></tr>';
echo '<tr><td>'.mi18n("Teaser Background").'</td><td><input type="text" size="50" name="CMS_VAR[350]" value="CMS_VALUE[350]"></td></tr>';
echo '<tr><td>'.mi18n("Hover Background").'</td><td><input type="text" size="50" name="CMS_VAR[360]" value="CMS_VALUE[360]"></td></tr>';
echo '<tr><td>'.mi18n("Slider Background").'</td><td><input type="text" size="50" name="CMS_VAR[370]" value="CMS_VALUE[370]"></td></tr>';
echo '</table>';
echo '<hr/>';
echo '<strong>Teaser 4:</strong><br/>';
echo '<table>';
echo '<tr><td>'.mi18n("Theme").'</td><td><input type="text" size="50" name="CMS_VAR[400]" value="CMS_VALUE[400]"></td></tr>';
echo '<tr><td>'.mi18n("Link").'</td><td><input type="text" size="50" name="CMS_VAR[410]" value="CMS_VALUE[410]">
<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("Slider Headline").'</td><td><input type="text" size="50" name="CMS_VAR[430]" value="CMS_VALUE[430]"></td></tr>';
echo '<tr><td>'.mi18n("Slider Content").'</td><td><input type="text" size="50" name="CMS_VAR[440]" value="CMS_VALUE[440]"></td></tr>';
echo '<tr><td>'.mi18n("Teaser Background").'</td><td><input type="text" size="50" name="CMS_VAR[450]" value="CMS_VALUE[450]"></td></tr>';
echo '<tr><td>'.mi18n("Hover Background").'</td><td><input type="text" size="50" name="CMS_VAR[460]" value="CMS_VALUE[460]"></td></tr>';
echo '<tr><td>'.mi18n("Slider Background").'</td><td><input type="text" size="50" name="CMS_VAR[470]" value="CMS_VALUE[470]"></td></tr>';
echo '</table>';
echo '<hr/>';
echo '<strong>Teaser 5:</strong><br/>';
echo '<table>';
echo '<tr><td>'.mi18n("Theme").'</td><td><input type="text" size="50" name="CMS_VAR[500]" value="CMS_VALUE[500]"></td></tr>';
echo '<tr><td>'.mi18n("Link").'</td><td><input type="text" size="50" name="CMS_VAR[510]" value="CMS_VALUE[510]">
<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("Slider Headline").'</td><td><input type="text" size="50" name="CMS_VAR[530]" value="CMS_VALUE[530]"></td></tr>';
echo '<tr><td>'.mi18n("Slider Content").'</td><td><input type="text" size="50" name="CMS_VAR[540]" value="CMS_VALUE[540]"></td></tr>';
echo '<tr><td>'.mi18n("Teaser Background").'</td><td><input type="text" size="50" name="CMS_VAR[550]" value="CMS_VALUE[550]"></td></tr>';
echo '<tr><td>'.mi18n("Hover Background").'</td><td><input type="text" size="50" name="CMS_VAR[560]" value="CMS_VALUE[560]"></td></tr>';
echo '<tr><td>'.mi18n("Slider Background").'</td><td><input type="text" size="50" name="CMS_VAR[570]" value="CMS_VALUE[570]"></td></tr>';
echo '</table>';
Code: Alles auswählen
<?php
/***********************************************
* CONTENIDO MODUL - OUTPUT
*
* Modulname : slider-teaser
* 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_01_theme="CMS_VALUE[100]";
$teaser_01_link="CMS_VALUE[110]";
$teaser_01_link_new_window="CMS_VALUE[115]";
$teaser_01_linktitle="CMS_VALUE[120]";
$teaser_01_slider_headline="CMS_VALUE[130]";
$teaser_01_slider_content="CMS_VALUE[140]";
$teaser_01_teaser_background="CMS_VALUE[150]";
$teaser_01_hover_background="CMS_VALUE[160]";
$teaser_01_slider_background="CMS_VALUE[170]";
$teaser_02_theme="CMS_VALUE[200]";
$teaser_02_link="CMS_VALUE[210]";
$teaser_02_link_new_window="CMS_VALUE[215]";
$teaser_02_linktitle="CMS_VALUE[220]";
$teaser_02_slider_headline="CMS_VALUE[230]";
$teaser_02_slider_content="CMS_VALUE[240]";
$teaser_02_teaser_background="CMS_VALUE[250]";
$teaser_02_hover_background="CMS_VALUE[260]";
$teaser_02_slider_background="CMS_VALUE[270]";
$teaser_03_theme="CMS_VALUE[300]";
$teaser_03_link="CMS_VALUE[310]";
$teaser_03_link_new_window="CMS_VALUE[315]";
$teaser_03_linktitle="CMS_VALUE[320]";
$teaser_03_slider_headline="CMS_VALUE[330]";
$teaser_03_slider_content="CMS_VALUE[340]";
$teaser_03_teaser_background="CMS_VALUE[350]";
$teaser_03_hover_background="CMS_VALUE[360]";
$teaser_03_slider_background="CMS_VALUE[370]";
$teaser_04_theme="CMS_VALUE[400]";
$teaser_04_link="CMS_VALUE[410]";
$teaser_04_link_new_window="CMS_VALUE[415]";
$teaser_04_linktitle="CMS_VALUE[420]";
$teaser_04_slider_headline="CMS_VALUE[430]";
$teaser_04_slider_content="CMS_VALUE[440]";
$teaser_04_teaser_background="CMS_VALUE[450]";
$teaser_04_hover_background="CMS_VALUE[460]";
$teaser_04_slider_background="CMS_VALUE[470]";
$teaser_05_theme="CMS_VALUE[500]";
$teaser_05_link="CMS_VALUE[510]";
$teaser_05_link_new_window="CMS_VALUE[515]";
$teaser_05_linktitle="CMS_VALUE[520]";
$teaser_05_slider_headline="CMS_VALUE[530]";
$teaser_05_slider_content="CMS_VALUE[540]";
$teaser_05_teaser_background="CMS_VALUE[550]";
$teaser_05_hover_background="CMS_VALUE[560]";
$teaser_05_slider_background="CMS_VALUE[570]";
?>
<script type="text/javascript">
<!--
var var_step_out=10; /*pixelschritt pro schleife beim ausfahren des teasers*/
var var_step_in=40; /*pixelschritt pro schleife beim einfahren des teasers*/
var var_speed_out=10; /*verzögerung zwischen den schleifen beim ausfahren des teasers*/
var var_speed_in=0; /*verzögerung zwischen den schleifen beim einfahren des teasers*/
var var_slow_out1=-200; /*ausfahrweite bis zu der das ausfahren am anfang verlangsamt werden soll auf x pixel pro schleife*/
var var_slow_out2=80; /*ausfahrweite ab der das ausfahren am ende verlangsamt werden soll auf x pixel pro schleife*/
var var_slow_in1=100; /*einfahrweite bis zu der das einfahren am anfang verlangsamt werden soll auf x pixel pro schleife*/
var var_slow_in2=-200; /*einfahrweite ab der das einfahren am ende verlangsamt werden soll auf x pixel pro schleife*/
var var_start=-200; /*startposition der teaser beim ausfahren*/
var var_end=100; /*endposition der teaser beim ausfahren*/
var var_i; /*zählvariable beim ausfahren*/
var var_j; /*zählvariable beim einfahren*/
var var_teaser; /*zur übermittlung des teasernummer*/
var var_t; /*teasernummer innerhalb der funktion*/
var var_number_of_teasers=3; /* anzahl der teaser, wird für die reset-funktion der teaser genutzt die nicht gehovert werden*/
function slideout_movement(var_teaser)
{
var_t=var_teaser;
if (var_i<var_end)
{
if (var_i<=var_slow_out1)var_i=var_i+1;
if (var_i>var_slow_out1 && var_i<var_slow_out2) var_i=var_i+var_step_out;
if (var_i>=var_slow_out2)var_i=var_i+1;
if (var_t==0) document.getElementById("slider_teaser_0").style.left=var_i + 'px';
if (var_t==1) document.getElementById("slider_teaser_1").style.left=var_i + 'px';
if (var_t==2) document.getElementById("slider_teaser_2").style.left=var_i + 'px';
if (var_t==3) document.getElementById("slider_teaser_3").style.left=var_i + 'px';
if (var_t==4) document.getElementById("slider_teaser_4").style.left=var_i + 'px';
window.setTimeout ('slideout_movement(var_t)', var_speed_out);
}
}
function slideout(var_teaser)
{
if(var_teaser==0) {
if(var_number_of_teasers>1) document.getElementById("slider_teaser_1").style.left=var_start + 'px';
if(var_number_of_teasers>2) document.getElementById("slider_teaser_2").style.left=var_start + 'px';
if(var_number_of_teasers>3) document.getElementById("slider_teaser_3").style.left=var_start + 'px';
if(var_number_of_teasers>4) document.getElementById("slider_teaser_4").style.left=var_start + 'px';
}
if(var_teaser==1) {
if(var_number_of_teasers>1) document.getElementById("slider_teaser_0").style.left=var_start + 'px';
if(var_number_of_teasers>2) document.getElementById("slider_teaser_2").style.left=var_start + 'px';
if(var_number_of_teasers>3) document.getElementById("slider_teaser_3").style.left=var_start + 'px';
if(var_number_of_teasers>4) document.getElementById("slider_teaser_4").style.left=var_start + 'px';
}
if(var_teaser==2) {
if(var_number_of_teasers>1) document.getElementById("slider_teaser_0").style.left=var_start + 'px';
if(var_number_of_teasers>2) document.getElementById("slider_teaser_1").style.left=var_start + 'px';
if(var_number_of_teasers>3) document.getElementById("slider_teaser_3").style.left=var_start + 'px';
if(var_number_of_teasers>4) document.getElementById("slider_teaser_4").style.left=var_start + 'px';
}
if(var_teaser==3) {
if(var_number_of_teasers>1) document.getElementById("slider_teaser_0").style.left=var_start + 'px';
if(var_number_of_teasers>2) document.getElementById("slider_teaser_1").style.left=var_start + 'px';
if(var_number_of_teasers>3) document.getElementById("slider_teaser_2").style.left=var_start + 'px';
if(var_number_of_teasers>4) document.getElementById("slider_teaser_4").style.left=var_start + 'px';
}
if(var_teaser==4) {
if(var_number_of_teasers>1) document.getElementById("slider_teaser_0").style.left=var_start + 'px';
if(var_number_of_teasers>2) document.getElementById("slider_teaser_1").style.left=var_start + 'px';
if(var_number_of_teasers>3) document.getElementById("slider_teaser_2").style.left=var_start + 'px';
if(var_number_of_teasers>4) document.getElementById("slider_teaser_3").style.left=var_start + 'px';
}
var_i=var_start;
slideout_movement(var_teaser);
}
function slidein_movement(var_teaser)
{
var_t=var_teaser;
if (var_j>var_start)
{
if (var_j>=var_slow_in1)var_j=var_j-1;
if (var_j<var_slow_in1 && var_j>var_slow_in2) var_j=var_j-var_step_in;
if (var_j<=var_slow_in2)var_j=var_j-1;
if (var_t==0) document.getElementById("slider_teaser_0").style.left=var_j + 'px';
if (var_t==1) document.getElementById("slider_teaser_1").style.left=var_j + 'px';
if (var_t==2) document.getElementById("slider_teaser_2").style.left=var_j + 'px';
if (var_t==3) document.getElementById("slider_teaser_3").style.left=var_j + 'px';
if (var_t==4) document.getElementById("slider_teaser_4").style.left=var_j + 'px';
window.setTimeout ('slidein_movement(var_t)', var_speed_in);
}
}
function slidein(var_teaser)
{
var_j=var_end;
slidein_movement(var_teaser);
}
//-->
</script>
<?php
$loop=0;
$array_teaser_link=array($teaser_01_link,$teaser_02_link,$teaser_03_link,$teaser_04_link,$teaser_05_link);
$array_teaser_link_new_window=array($teaser_01_link_new_window,$teaser_02_link_new_window,$teaser_03_link_new_window,$teaser_04_link_new_window,$teaser_05_link_new_window);
$array_teaser_linktitle=array($teaser_01_linktitle,$teaser_02_linktitle,$teaser_03_linktitle,$teaser_04_linktitle,$teaser_05_linktitle);
$array_teaser_teaser_background=array($teaser_01_teaser_background,$teaser_02_teaser_background,$teaser_03_teaser_background,$teaser_04_teaser_background,$teaser_05_teaser_background);
$array_teaser_hover_background=array($teaser_01_hover_background,$teaser_02_hover_background,$teaser_03_hover_background,$teaser_04_hover_background,$teaser_05_hover_background);
$array_teaser_slider_background=array($teaser_01_slider_background,$teaser_02_slider_background,$teaser_03_slider_background,$teaser_04_slider_background,$teaser_05_slider_background);
$array_teaser_theme=array($teaser_01_theme,$teaser_02_theme,$teaser_03_theme,$teaser_04_theme,$teaser_05_theme);
$array_teaser_slider_headline=array($teaser_01_slider_headline,$teaser_02_slider_headline,$teaser_03_slider_headline,$teaser_04_slider_headline,$teaser_05_slider_headline);
$array_teaser_slider_content=array($teaser_01_slider_content,$teaser_02_slider_content,$teaser_03_slider_content,$teaser_04_slider_content,$teaser_05_slider_content);
while ($loop<$number_of_teasers)
{
$tpl->reset();
$tpl->set('s', 'teasernumber', $loop);
$tpl->set('s', 'teaser_link', $array_teaser_link[$loop]);
$tpl->set('s', 'teaser_link_new_window', $array_teaser_link_new_window[$loop]);
$tpl->set('s', 'teaser_linktitle', $array_teaser_linktitle[$loop]);
$tpl->set('s', 'teaser_teaser_background', $array_teaser_teaser_background[$loop]);
$tpl->set('s', 'teaser_hover_background', $array_teaser_hover_background[$loop]);
$tpl->set('s', 'teaser_slider_background', $array_teaser_slider_background[$loop]);
$tpl->set('s', 'teaser_theme', $array_teaser_theme[$loop]);
$tpl->set('s', 'teaser_slider_headline', $array_teaser_slider_headline[$loop]);
$tpl->set('s', 'teaser_slider_content', $array_teaser_slider_content[$loop]);
$tpl->generate('templates/slider-teaser.html');
$loop++;
}
?>
Code: Alles auswählen
<div class="sd_slider-teaser" style="background-image: url('{teaser_teaser_background}'); background-repeat: no-repeat;">
<NOSCRIPT>
<a class="sd_slider-teaser" href="{teaser_link}" title="{teaser_linktitle}" target="{teaser_link_new_window}">
<div class="sd_slider-teaser_hover" style="background-image: url('{teaser_hover_background}'); background-repeat: no-repeat;">
{teaser_theme}
</div>
</a>
<div class="sd_slider-teaser_slider_noscript" style="background-image: url('{teaser_slider_background}'); background-repeat: no-repeat;">
<span class="sd_slider-teaser_headline">
{teaser_slider_headline}
</span><br/>
{teaser_slider_content}
</div>
</NOSCRIPT>
<a class="sd_slider-teaser" href="{teaser_link}" title="{teaser_linktitle}" target="{teaser_link_new_window}">
<div onMouseOver="slideout({teasernumber})" onMouseOut="slidein({teasernumber})" class="sd_slider-teaser_hover" style="background-image: url('{teaser_hover_background}'); background-repeat: no-repeat;">
{teaser_theme}
</div>
</a>
<div id ="slider_teaser_{teasernumber}" class="sd_slider-teaser_slider" style="background-image: url('{teaser_slider_background}'); background-repeat: no-repeat;">
<span class="sd_slider-teaser_headline">
{teaser_slider_headline}
</span><br/>
{teaser_slider_content}
</div>
</div>
Code: Alles auswählen
/* ###################################################### */
/* ################### Slider-Teaser #################### */
/* ###################################################### */
a.sd_slider-teaser {
text-decoration: none;
}
div.sd_slider-teaser {
width: 400px;
height: 68px;
border: 1px solid #000000;
overflow: hidden;
margin-bottom: 20px;
font-size: 12px;
}
div.sd_slider-teaser_hover {
position: absolute;
z-index: 2;
float: left;
width: 70px;
height: 68px;
padding-right: 30px;
border-right: 1px solid #000000;
font-weight: 900;
}
div.sd_slider-teaser_slider,
div.sd_slider-teaser_slider_noscript {
z-index: 1;
float: left;
position: relative;
left: -200px;
border-right: 1px solid #000000;
width:294px;
height: 68px;
color: #000000;
padding: 3px;
}
div.sd_slider-teaser_slider_noscript {
left: 100px;
}
span.sd_slider-teaser_headline {
font-size: 12px;
font-weight: 900;
}
/* ie fixes*/
* html div.sd_slider-teaser_hover {
left: 0px;
padding-right: 20px;
width: 100px;
background-color: #555555;
}
* html div.sd_slider-teaser_slider {
width:300px;
}