Seite 1 von 1

Slider für Startseite & Co.

Verfasst: Di 28. Dez 2010, 21:40
von McHubi
N'Abend allerseits...

Habe mal wieder gebastelt und es ist das hier dabei herausgekommen:
Bild

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:
Bild

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

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">';

    ?>
Die CSS-Styles hab ich im Output drin gelassen. Kann ja jeder nach belieben in seine CSS-Dateien verschieben...

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! :mrgreen:

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! :D


Markus

Re: Slider für Startseite & Co.

Verfasst: Di 3. Mai 2011, 12:40
von marphin
Super Modul! - Wäre es möglich, dass die Bilder sich horizontal nach links oder rechts bewegen? Wenn ja, wie hoch ist der Aufwand?

VG, Martin

Re: Slider für Startseite & Co.

Verfasst: Di 3. Mai 2011, 19:21
von McHubi
Hallo Martin,

Danke für's Lob :D

Was meinst Du mit "horizontal bewegen"? Das die Vorschaubilder sich im Kreis bewegen oder bei mouseover ein Stück "zur Seite rücken"? - Egal wie es ist, es wäre ein in punkto Animation komplett neues Modul - soviel zum Thema Aufwand :wink:

Grüße,


Markus

Re: Slider für Startseite & Co.

Verfasst: Di 3. Mai 2011, 19:28
von marphin
Okay, danke!

Re: Slider für Startseite & Co.

Verfasst: Mo 20. Jun 2011, 13:23
von Balian
Hallo,

ein sehr schönes Modul, das sich auch klasse als eine Art Navigations-Leiste verwenden lässt! :)

Eine Frage habe ich noch: wie viel Aufwand ist es, das Folgende umzusetzen?

Ausgangslage: Im Moment kann ich pro Teaser nur ein Bild auswählen, welches "herauszoomt", wenn man mit der Maus drüber geht. (Das mit der Spiegelung lasse ich hier mal außen vor, weil das für mich nicht von Belang ist.)
Mein Ziel: das Modul so zu ändern, dass ich pro Teaser 2 Bilder wählen kann und sich das Teaserbild von Bild 1 zu Bild 2 verändert, wenn man mit der Maus drüber ist?

Ich hoffe, ich habe mich einigermaßen verständlich ausgedrückt ;)!

Viele Grüße

Balian

Re: Slider für Startseite & Co.

Verfasst: Mi 29. Jun 2011, 18:57
von McHubi
Hallo Balian,

mal ein Ansatz für Dich zum "Knöstern". Für eine direkte Lösung fehlt mir im Moment einfach die Zeit. Schau Dir mal diese Zeilen im Output an, insbesondere den img-Tag:

Code: Alles auswählen

/********** 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].'"/>';
Die von Dir im Input/ der Konfiguration eingetragenen Bilder werden in arrays eingelesen. Für Deine Alternativen brauchst Du also nur ein weiteres Array anlegen und an dieser Stelle einlesen. Eine Anpassung des Inputs kannst Du Dir sparen, wenn die Alternativen den gleichen Dateinamen haben und mit einer kleinen Ergänzung versehen im gleichen Verzeichnis liegen. Also neben "bild_1.jpg" usw. also als Alternative "bild_1_a.jpg" erstellen. Jetzt ein Array für die Alternativen mit den Inhalten von $array_teaser_teaser_background erstellen und die Elemente splitten um zwischen den Dateinamen und die Endung .jpg das _a einzufügen. Dann halt an der Stelle hier echo 'src="'.$array_teaser_teaser_background[$loop].'" auf das andere Array zugreifen...

Wenn's nicht direkt klappt, musst Du halt was rumprobieren... :wink:

Markus

Re: Slider für Startseite & Co.

Verfasst: Do 30. Jun 2011, 15:50
von Balian
Hallo Markus!

Erst mal danke für die Antwort! Ich werde das mal ausprobieren und mich dann noch mal melden!

Gruß
Balian