Slider-Teaser

Gesperrt
McHubi
Beiträge: 1209
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Slider-Teaser

Beitrag von McHubi » Fr 31. Dez 2010, 16:04

Hallo zusammen,

zum ausklingenden Jahr 2010 noch einmal ein neues Modul. Auf das 2011 viele weitere folgen mögen :wink:

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:

Bild

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>';
OUTPUT des Moduls:

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++;
}

?>
Das Modul-Template:

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>
CSS-Styles

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;
}
Zuletzt geändert von McHubi am Di 1. Feb 2011, 14:00, insgesamt 1-mal geändert.
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.

Das Handbuch zur Version 4.10: CONTENIDO für Einsteiger (4.10)

Das Handbuch zur Version 4.9: CONTENIDO für Einsteiger (4.9)

McHubi
Beiträge: 1209
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Re: Slider-Teaser

Beitrag von McHubi » Mo 17. Jan 2011, 23:29

Hmmm....

Hab da was entdeckt, was mir gar nicht gefällt. Es läuft in allen Browsern, nur nicht im Firefox - ich nutze im Moment den 3.6.13. Im Opera läuft's kurioserweise, obwohl der sich ja sonst eigentlich immer genauso verhält wie der FF und umgekehrt. Im FF wird der slider nicht ausgefahren wenn ich folgenden XHTML-Doctype nutze:

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Im FF klappt es nur mit diesem HTML-Doctype, was aber in punkto Validierung nicht wirklich prickelnd ist:

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
So geht's übrigens auch nicht, wenn zum Public-Part der System-Part (?) dazu kommt.

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Hab mir schon einen abgebrochen mit allen möglichen Varianten von document.getElementById usw., Tante G's Suchtreffer hab ich auch schon auf den ersten 20 Seiten durch aber ich komme einfach nicht weiter.

Die Fehlerkonsole zeigt im jetzigen Zustand des Moduls und dem validen Doctype immer diese Fehlermeldung

slider_teaser_0 is not defined
slider_teaser_1 is not defined
...


Das Modul-Template wird per Schleife mehrfach aufgerufen wobei diese ID des DIV hochgezählt und so zusammengebaut wird:

Code: Alles auswählen

<div id="slider_teaser_{teasernumber}" ... 
Vielleicht ist ja ein "Javascript-Erhellter" unter euch der mir den Rumms auf den Hinterkopf geben kann.


Danke euch! :D
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.

Das Handbuch zur Version 4.10: CONTENIDO für Einsteiger (4.10)

Das Handbuch zur Version 4.9: CONTENIDO für Einsteiger (4.9)

McHubi
Beiträge: 1209
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Re: Slider-Teaser

Beitrag von McHubi » Di 1. Feb 2011, 14:04

Soo...
...spontane Eingebung gehabt und Lösung ist da:
statt z.B.

Code: Alles auswählen

slider_teaser_0.style.left=var_j;
sollte man

Code: Alles auswählen

document.getElementById("slider_teaser_0").style.left=var_j + 'px';
verwenden!

Das getElementById-Gedöns hatte ich ja schon ausprobiert. Aber dass der FF bei fehlenden Maßeinheiten etwas pingelig sein kann, da bin ich nicht drauf gekommen :motz:
Eigentlich kein Wunder, schließlich kann man mit "Abstand links = 300 Tomaten" nix anfangen.

Codes im ersten Post sind angepasst, ebenso die zip-Datei zum Download.

Warum nicht gleich so? :mrgreen:
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.

Das Handbuch zur Version 4.10: CONTENIDO für Einsteiger (4.10)

Das Handbuch zur Version 4.9: CONTENIDO für Einsteiger (4.9)

Gesperrt