Support
Download

Einbinden des Nivo-Sliders auf der Startseite

Aus Wiki | modified eCommerce Shopsoftware
Zur Navigation springenZur Suche springen


Tutorial Update[Bearbeiten]

2013-05-13[Bearbeiten]

Shopsystem:

  • modified eCommerce Shopssoftware v1.06 rev 4642 dated: 2013-04-20
  • Datenbank Version: "MOD_1.0.6.0"

Update:

  • Aufräumen und Strukturierung Wiki Markup
  • 6. (2.1) Neue Version jquery 1.9.0
  (Kommentar von noRiddle: !! nicht höher als 1.8.3 benutzen da ansonsten Probleme mit jQuery-ui (Tabs) und Thickbox !!)
  • 8.1. (2.3.2) Ergänzung Slider in id="content"

Einbau des Nivo Sliders auf der Startseite[Bearbeiten]

Es gibt ja schon ein gutes Slider-Modul von hetfield, allerdings ist das sehr Komplex, da die Verwaltung danach auch im Shop-Admin funktionieren soll. Wer einfach nur einen Slider auf der Startseite möchte, der obendrein noch tolle Effekte bietet, der kann sich den Nivo-Slider ja mal anschauen.

Vor dem verändern von Dateien immer ein Backup anlegen!!!

Voraussetzungen schaffen[Bearbeiten]

  1. Nivo-Slider herunterladen und entpacken. [1]
  2. Die Datei "jquery.nivo.slider.js" nach /templates/DeinTemplate/javascript/ kopieren.
  3. Die Datei "nivo-slider.css" nach /templates/DeinTemplate/css/ kopieren.
  4. Den Inhalt des Ordner "themes" (die 4 Templateordner) nach /templates/DeinTemplate/css/nivo-slider/ kopieren (den Ordner nivo-slider vorher anlegen).
  5. Den Inhalt des Ordners /demo/images nach /templates/DeinTemplate/img/nivo-slider/ kopieren (den Ordner nivo-slider vorher anlegen).

Dateien anpassen[Bearbeiten]

Auch hier sei nochmals darauf hingewiesen:

Vor dem verändern von Dateien immer ein Backup anlegen!!!

general.js.php[Bearbeiten]

Datei /templates/DeinTemplate/javascript/general.js.php

suche 

    <script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.js" type="text/javascript"></script>
    <script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/thickbox.js" type="text/javascript"></script>

DANACH 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.nivo.slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
        slices: 15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed: 500, // Slide transition speed
        pauseTime: 3000, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: true, // Next & Prev navigation
        controlNav: true, // 1,2,3... navigation
        controlNavThumbs: false, // Use thumbnails for Control Nav
        pauseOnHover: true, // Stop animation while hovering
        manualAdvance: false, // Force manual transitions
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
        randomStart: false, // Start on a random slide
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});
</script>

einfügen.

general.css.php[Bearbeiten]

Die Datei /templates/DeinTemplate/css/general.css.php mit einem Editor öffnen und folgendes hinzufügen: 

<?php // Nivo-Slider ?>
<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/css/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/css/nivo-slider/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/css/nivo-slider/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/css/nivo-slider/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/css/nivo-slider/bar/bar.css" type="text/css" media="screen" />
<?php // Nivo-Slider ?>

So stehen automatisch alle Templates zur Verfügung. Wenn man sich später für ein Template entschieden hat, können die überflüssigen Zeilen wieder gelöscht werden.

Integration Template[Bearbeiten]

Es gibt zwei möglichkeiten den Slider in das Template einzubinden. Zum einen im Bereich id="contentwrap" zum anderen im Bereich id="content". Je nach dem ob der Slider die komplette Breite oder nur die Breite des eigentlichen Inhalts ohne Boxen haben soll.

Einbinden in contentwrap[Bearbeiten]

Schließlich müssen wir den Slider noch in die index.html einbinden. Dazu an beliebiger Stelle der Datei /templates/DeinTemplate/index.html folgenden Code hinzufügen: 

  {if strstr ($smarty.server.PHP_SELF, 'index')}
    {if $smarty.get.cPath==null and $smarty.get.manufacturers_id==''}
    <div class="slider-wrapper theme-default">
      <div id="slider" class="nivoSlider">
        <img src="{$tpl_path}img/nivo-slider/toystory.jpg" alt="" />
        <a href="http://dev7studios.com"><img src="{$tpl_path}img/nivo-slider/up.jpg" alt="" title="This is an example of a caption" /></a>
        <img src="{$tpl_path}img/nivo-slider/walle.jpg" alt="" data-transition="slideInLeft" />
        <img src="{$tpl_path}img/nivo-slider/nemo.jpg" alt="" title="#htmlcaption" />
      </div>
    </div>
    <div id="htmlcaption" class="nivo-html-caption">
      <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
    </div>
    {/if}
  {/if}

Das Klasse "theme-default" kann z.B. durch "theme-light" ersetzt werden, um das Template zu wechseln.

Einbinden in content[Bearbeiten]

Alternativ kann der Slider in den Content Bereich eingebunden werden. Dazu in der Datei /templates/DeinTemplate/module/main_content.html den Bereich 

 <h1>{$title}</h1>
<div> {$text}</div>

suchen und ergänzen mit 

<h1>{$title}</h1>
<div>
  {if strstr ($smarty.server.PHP_SELF, 'index')}
    {if $smarty.get.cPath==null and $smarty.get.manufacturers_id==''}
    <div class="slider-wrapper theme-default">
      <div id="slider" class="nivoSlider">
        <img src="{$tpl_path}img/nivo-slider/toystory.jpg" alt="" />
        <a href="http://dev7studios.com"><img src="{$tpl_path}img/nivo-slider/up.jpg" alt="" title="This is an example of a caption" /></a>
        <img src="{$tpl_path}img/nivo-slider/walle.jpg" alt="" data-transition="slideInLeft" />
        <img src="{$tpl_path}img/nivo-slider/nemo.jpg" alt="" title="#htmlcaption" />
      </div>
    </div>
    <div id="htmlcaption" class="nivo-html-caption">
      <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
    </div>
    {/if}
  {/if}
{$text}</div>

Nun sollte der Slider schon ganz gut funktionieren. Bis hier hatte ich lediglich noch das Problem, dass der Slider seine Größe beim Übergang änderte und das alte Bild beim Übergang leicht gestaucht wurde.

Slider anpassen[Bearbeiten]

Um das zu beheben, folgenden Code in /templates/DeinTemplate/css/nivo-slider.css direkt nach dem Copyright-Hinweis hinzufügen: 

#slider{
	height: 246px; /* Make sure your images are the same size */
	width: 618px; /* Make sure your images are the same size */  
}
.slider-wrapper {
	width: 618px; /* Make sure your images are the same size */ 
}

Jetzt wird der Slider wunderbar dargestellt und man kann die Übergangseffekte sogar auf "random" stehen lassen.

Zur Erklärung: Der PHP-Code dient dazu, den Slider NUR auf der Hauptseite index.php anzuzeigen. Siehe auch hier: Eigenen DIV Container nur auf Startseite Der Div-Container wird wie im stylesheet mit id="slider" benannt. Dazu muss noch die Class "nivoSlider" hinzugefügt werden, um die Styles für die Effekte zu aktivieren.

Innerhalb dieses Containers verlinken wir die gewünschten Bilder. Dazu nehmen wir die Variable 

{$tpl_path}

Damit wir auch den gewünschten Ordner in unserem Template ansprechen.

Jetzt kommt der Ordner, in dem die Bilder gespeichert sind. In meinem Fall ist es der Ordner /img/ im Templateverzeichnis.

Jetzt werden die bearbeiten Dateien wieder hochgeladen und die vorhandenen Files überschrieben.

Jetzt solltet ihr auf eurer Startseite den gewünschten Slider haben.

Selbstverständlich können die Stylesheet-Angaben nach den eigenen Wünschen angepasst werden. In dem ZIP-Archiv des Nivo Sliders gibt es eine Demo.html und die dazu gehörige style.css. Dort könnt ihr Beispiele finden und ausprobieren.

Gleiches gilt für die Angaben in der general.js.php. Auch dort können z.B. Geschwindigkeit, Effekte, usw. angepasst werden. Natürlich können die Beispielbilder in /img/ wieder entfernt werden. Sie dienen nur dem ersten Test, ob alles funktioniert.

Die Dateinamen slider1.jpg, slider2.jpg, etc. müssen bei Verwendung obiger Beispieldateien angepasst werden. Das obige Layout ist für das modified eCommerce Shopsoftware-Layout zu gross. Achtet besonders darauf, dass die Bilder in der gewünschten Größe auf den Server geladen werden, da die Bilder für die Bildershow nicht skaliert werden können.

Support für den Slider gibt es unter [2]


Automatisches laden der Sliderbilder aus einem Verzeichnis[Bearbeiten]

Statt dem oben genannten Änderungen in der /templates/DeinTemplate/index.html folgende verwenden: 

{*Startseiten Slideshow*}
<div class="slider-wrapper theme-default">
  <div id="slider" class="nivoSlider">
  {php}
    $path=$this->get_template_vars('tpl_path').'img/slider/'.$this->get_template_vars('language').'/';
    $handle = opendir ($path);
    while ($file = readdir ($handle)) {
      if(substr($file,-4)=='jpeg'||substr($file,-3)=='jpg'||substr($file,-3)=='png'){
        echo '<img src="'.$path.$file.'" alt="" />';
      }
    }
    closedir($handle);
  {/php}
  </div>
</div>
{*Startseiten Slideshow*}

Damit werden dann automatisch alle Bilder aus dem Verzeichnis /templates/(xtc5)/img/slider/german/* in den Slider geladen.

Abgerufen von „https://www.modified-shop.org/mediawiki/index.php?title=Einbinden_des_Nivo-Sliders_auf_der_Startseite&oldid=3377“
Unterstützt die Entwicklung
mit einer Spende
© 2024 modified eCommerce Shopsoftware
           
anything