MODUL: Hersteller-Slider für die Startseite

[newbee79]

Moin zusammen

muß diesen Thread mal wieder herauskramen... gibt es die Möglichkeit in diesen Slider auch die neuesten Produkte ( nur Bilder mit Links ) anzeigen zu lassen ???

Habe schon gesucht, aber nicht das Passende gefunden. Der Treadmill kommt dem zwar nahe, ist mir aber zu kompliziert und ich brauche kein Admin Panel dafür. Und der Nivo überblendet ja immer nur.

Es soll ganz einfach gehalten werden.

Deshalb wäre das hier der ideale Slider zum links und rechts durchscrollen!

Ich denke ein Ansatz wäre, irgendwie die whatsnew_box zu implementieren ?!

Würde mich freuen, wenn mir jemand helfen könnte.

Vielen Dank im Voraus.

Gruß
David

[Dart Shop Frankfurt]

Das Geht auch ohne PHP, nur mit Smarty.

Code: PHP  [Auswählen]

    {if strstr($smarty.server.PHP_SELF, 'index')}
        {if $smarty.get.cPath==null and $smarty.get.manufacturers_id==''}
             [...]
       {/if}
    {/if}

Grüße

Torsten

Hallo Torsten,

könntest du mir vllt. sagen wie der komplette Code für die Index aussehen müsste damit er nur auf der Index zu sehen ist ?

Lg Alex

[Tomcraft]

Klar...

In der "/templates/<template-name>/index.html" an gewünschter Stelle das einfügen.

Code: PHP  [Auswählen]

  {if strstr($smarty.server.PHP_SELF, 'index')}
    {if $smarty.get.cPath==null and $smarty.get.manufacturers_id==''}
      <div id="slider">
        <a class="prev browse left"></a>
          <div class="scrollable">
            <div class="items">
              <div>
                {php}$counter = 0;{/php}
                {foreach name=aussen item=manufacturer from=$manufacturers_array}
                  {if $manufacturer.IMAGE}
                    <a href="{$manufacturer.URL}">
                      <img src="{$manufacturer.IMAGE}" alt="{$manufacturer.NAME}" />
                    </a>
                    {php}
                      $counter++;
                      if ($counter == 3) {
                        echo '</div><div>';
                        $counter = 0;
                      }
                    {/php}
                  {/if}
                {/foreach}
              </div>
            </div>
          </div>
        <a class="next browse right"></a>
      </div>
    {/if}
  {/if}

Grüße Torsten

[Dart Shop Frankfurt]

Vielen Dank das war ja mal richtig schnell

Lg Alex

[Sven_Voet]

Auch wenn ich mich damit weit aus dem Fenster lehnen werde... Versuche ich gerade, mir selber den Slider ein wenig Responsive zu machen. Für verbesserungen bin ich immer gern zu haben Ist halt mein erster Versuch und mit den "Maßen" muss noch gespielt werden.

In der classes.css hab ich den oberen Eintrag gegen den folgenden getauscht:

Code: CSS  [Auswählen]

@media only screen and (min-width: 869px) {
#slider{width:980px;height:50px;border:0px;background:#ffffff;position:relative;margin-bottom:2px;}
.scrollable{position:relative;overflow:hidden;width:880px;height:50px;float:left;}
.scrollable .items{width:20000em;position:absolute;clear:both;}
.items div{float:left;width:880px;}
.scrollable img{float:left;margin:5px 3px 0 5px;background:#fff;padding:2px;border:1px solid #ccc;width:100px;height:40px;}
a.browse{background:url(img/hori_large.png) no-repeat;display:block;width:30px;height:30px;float:left;margin:10px 10px;}
a.right{background-position:0 -30px;clear:right;margin-right:0px;}
a.right:hover{background-position:-30px -30px;}
a.right:active{background-position:-60px -30px;}
a.left{margin-left:10px;}
a.left:hover{background-position:-30px 0;}
a.left:active{background-position:-60px 0;}
}

@media only screen and (min-width: 481px) and (max-width: 867px) {
#slider{width:480px;height:50px;border:0px;background:#ffffff;position:relative;margin-bottom:2px;}
.scrollable{position:relative;overflow:hidden;width:480px;height:50px;float:left;}
.scrollable .items{width:20000em;position:absolute;clear:both;}
.items div{float:left;width:480px;}
.scrollable img{float:left;margin:5px 3px 0 5px;background:#fff;padding:2px;border:1px solid #ccc;width:50px;height:20px;}
a.browse{background:url(img/hori_large.png) no-repeat;display:block;width:15px;height:15px;float:left;margin:10px 10px;}
a.right{background-position:0 -30px;clear:right;margin-right:0px;}
a.right:hover{background-position:-30px -30px;}
a.right:active{background-position:-60px -30px;}
a.left{margin-left:10px;}
a.left:hover{background-position:-30px 0;}
a.left:active{background-position:-60px 0;}

}

@media only screen and (max-width: 480px) {
#slider{width:300px;height:50px;border:0px;background:#ffffff;position:relative;margin-bottom:2px;}
.scrollable{position:relative;overflow:hidden;width:300px;height:50px;float:left;}
.scrollable .items{width:20000em;position:absolute;clear:both;}
.items div{float:left;width:300px;}
.scrollable img{float:left;margin:5px 3px 0 5px;background:#fff;padding:2px;border:1px solid #ccc;width:25px;height:10px;}
a.browse{background:url(img/hori_large.png) no-repeat;display:block;width:15px;height:15px;float:left;margin:10px 10px;}
a.right{background-position:0 -30px;clear:right;margin-right:0px;}
a.right:hover{background-position:-30px -30px;}
a.right:active{background-position:-60px -30px;}
a.left{margin-left:10px;}
a.left:hover{background-position:-30px 0;}
a.left:active{background-position:-60px 0;}

}