Nivo Slider einbauen

[rieste]

0. Sichern - sichern - sichern....
1. Nivo-Slider herunterladen. http://nivo.dev7studios.com/ - entpacken
2. Die Datei "jquery.nivo.slider.js" nach /templates/DeinTemplate/javascript/ kopieren.
3. Die Datei "nivo-slider.css" /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).
6. Die Datei /templates/DeinTemplate/javascript/slidernivo.js mit einem Editor erstellen und folgendes einfügen:

Code: Alles auswählen

    $(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>

7. Die CSS Daten im System anhängen /templates/DeinTemplate/source/template_defaults.php

Code: Alles auswählen

		'css/nivo-slider/default/default.css',
		'css/nivo-slider/light/light.css',
		'css/nivo-slider/dark/dark.css',
		'css/nivo-slider/bar/bar.css',
		'css/nivo-slider.css'

8. Die fehlenden JAVASCRIPT Dateien anhängen /templates/DeinTemplate/source/template_defaults.php

Code: Alles auswählen

	'javascript/jquery.nivo.slider.js',
	'javascript/slidernivo.js'

9. Den Slider in die index.html einbauen - dazu folgenden Code in templates/DeinTemplate/module/main_content.html

Code: Alles auswählen

    {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/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 Thema kann man einfach wechseln wenn man die Class theme-default ändert auf z.b. theme-bar, theme-light, theme-dark

Der Slider funktioniert bei mir soweit einwandfrei.

[Xantiva]

Danke für das Einstellen der Anleitung. Der Nächste kann es sicherlich gut gebrauchen.

[rieste]

Es kann beim Internet Explorer passieren das ein Image was verlinkt ist nicht funktioniert.

Hier die Erweiterung:

1. Transparentes Bild unter transparent.png speichern (im Ordner von Slide Images)
2. eine CSS Rule erstellen

Code: Alles auswählen

.nivoSlider a.nivo-imageLink { background: url(transparent.png) repeat 0 0; }

[Rainer]

Hallo,

anscheinend stelle ich mich zu blöd an.

Habe die Anleitung Schritt für Schritt durchgeführt aber dann war alles weiß.
Also die Version von Nivo slider ist die 3.1
wird die Datei jquery.nivo.slider.pack.js benötigt?

Unter Schritt 6 wird die Datei mit slidernivo.js.php benannt . Unter Schitt 8 nur noch slidernivo.js? Nehme mal an daß der Name unter 8. korrekt ist.

Browser FF 17.0

Und ich hätte das ganze dann noch gerne dynamisch. Habe dazu folgendes im Forum von Nivo-slider gefunden:

Code: Alles auswählen

I have found this to works well (Remove all asterisks):

<"div id="slider" class="nivoSlider">
*<?php $dir = "images/yoursubfoldername/"; $fd = opendir($dir); $x = 0; $slider = array(); for($i=1;$i<64;$i++){

if ($i<10){
    $slider[$i]="images/yoursubfoldername/image00" . $i . ".jpg";
    echo "<img src='" . $slider[$i] . "'/>";
}
else{
$slider[$i]="images/yoursubfoldername/image0" . $i . ".jpg";}
echo "<img src='" . $slider[$i] . "'/>";
}

?> </div*>

[Xantiva]

Was mir bei näherer Betrachtung der Datei unter Punkt 6 auffällt, ist der schliessende Script - Tag ...

Hast Du sonst mal bitte eine URL? (Meine Glaskugel ist kaputt. )

Ciao,
Mike

[Rainer]

Hallo Mike,

habe es wieder ausgebaut. Da die Seite komplett weiß wurde. Auch Seitenquelltext wurde keiner mehr angezeigt.

[Xantiva]

Komplett weiß ist meistens ein PHP - Fehler, der wegen abgeschalteten Fehlermeldungen nicht angezeit wird. Kommst Du dann das Error.log? Da könntest Du ihn sehen.

[Rainer]

Nö, aber wo solls denn liegen?

[Xantiva]

Da müsstest Du bei Deinem Provider nach fragen, oder mal schauen, welchen Zugriff Du auf log - Dateien des Servers hast. Das ist bei jedem Provider anders.

[Rainer]

Hallo,

ich richte mir jetzt gerade Eclipse, Xampp, SVN etc ein und werde das ganze dann mal lokal probieren.