Nivo Slider einbauen

Viele Wege führen zum Ziel, doch nicht Jeder ist optimal. Hier werden die bestmöglichen Wege aufgeführt und erklärt.
rieste
Beiträge: 134
Registriert: Fr 18. Mär 2011, 07:54
Shop Version: ECB 1.08 leider

Nivo Slider einbauen

Beitrag von 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.
Zuletzt geändert von rieste am Mi 28. Nov 2012, 06:33, insgesamt 2-mal geändert.
Mein Seite: https://www.rieste.com
Mein Lichtshop https://licht365.com
Xantiva
Beiträge: 948
Registriert: Mo 10. Mai 2010, 16:26
Shop Version: 1.0.10 [dev]
Kontaktdaten:

Re: Nivo Slider einbauen

Beitrag von Xantiva »

Danke für das Einstellen der Anleitung. Der Nächste kann es sicherlich gut gebrauchen.
Mein Shop: http://www.basteln-selbermachen.de
rieste
Beiträge: 134
Registriert: Fr 18. Mär 2011, 07:54
Shop Version: ECB 1.08 leider

Re: Nivo Slider einbauen

Beitrag von 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; }
Mein Seite: https://www.rieste.com
Mein Lichtshop https://licht365.com
Rainer
Beiträge: 102
Registriert: Sa 5. Feb 2011, 10:17
Shop Version: 1.0.14

Re: Nivo Slider einbauen

Beitrag von 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*>
Freundlich grüßt

Rainer
Xantiva
Beiträge: 948
Registriert: Mo 10. Mai 2010, 16:26
Shop Version: 1.0.10 [dev]
Kontaktdaten:

Re: Nivo Slider einbauen

Beitrag von 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
Mein Shop: http://www.basteln-selbermachen.de
Rainer
Beiträge: 102
Registriert: Sa 5. Feb 2011, 10:17
Shop Version: 1.0.14

Re: Nivo Slider einbauen

Beitrag von Rainer »

Hallo Mike,

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

Rainer
Xantiva
Beiträge: 948
Registriert: Mo 10. Mai 2010, 16:26
Shop Version: 1.0.10 [dev]
Kontaktdaten:

Re: Nivo Slider einbauen

Beitrag von 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.
Mein Shop: http://www.basteln-selbermachen.de
Rainer
Beiträge: 102
Registriert: Sa 5. Feb 2011, 10:17
Shop Version: 1.0.14

Re: Nivo Slider einbauen

Beitrag von Rainer »

Nö, aber wo solls denn liegen?
Freundlich grüßt

Rainer
Xantiva
Beiträge: 948
Registriert: Mo 10. Mai 2010, 16:26
Shop Version: 1.0.10 [dev]
Kontaktdaten:

Re: Nivo Slider einbauen

Beitrag von 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.
Mein Shop: http://www.basteln-selbermachen.de
Rainer
Beiträge: 102
Registriert: Sa 5. Feb 2011, 10:17
Shop Version: 1.0.14

Re: Nivo Slider einbauen

Beitrag von Rainer »

Hallo,

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

Rainer
Antworten