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.

Nivo Slider einbauen

Beitragvon rieste » Mo 17. Sep 2012, 15:27

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, 07:33, insgesamt 2-mal geändert.
rieste
 
Beiträge: 134
Registriert: Fr 18. Mär 2011, 08:54

Re: Nivo Slider einbauen

Beitragvon Xantiva » Mo 17. Sep 2012, 19:02

Danke für das Einstellen der Anleitung. Der Nächste kann es sicherlich gut gebrauchen.
Mein Shop: http://www.basteln-selbermachen.de
Xantiva
 
Beiträge: 948
Registriert: Mo 10. Mai 2010, 18:26

Re: Nivo Slider einbauen

Beitragvon rieste » Do 20. Sep 2012, 16:19

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; }
rieste
 
Beiträge: 134
Registriert: Fr 18. Mär 2011, 08:54

Re: Nivo Slider einbauen

Beitragvon Rainer » Sa 24. Nov 2012, 18:44

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
Rainer
 
Beiträge: 102
Registriert: Sa 5. Feb 2011, 11:17

Re: Nivo Slider einbauen

Beitragvon Xantiva » Sa 24. Nov 2012, 18:54

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
Xantiva
 
Beiträge: 948
Registriert: Mo 10. Mai 2010, 18:26

Re: Nivo Slider einbauen

Beitragvon Rainer » Sa 24. Nov 2012, 20:18

Hallo Mike,

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

Rainer
Rainer
 
Beiträge: 102
Registriert: Sa 5. Feb 2011, 11:17

Re: Nivo Slider einbauen

Beitragvon Xantiva » Sa 24. Nov 2012, 21:31

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
Xantiva
 
Beiträge: 948
Registriert: Mo 10. Mai 2010, 18:26

Re: Nivo Slider einbauen

Beitragvon Rainer » So 25. Nov 2012, 10:40

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

Rainer
Rainer
 
Beiträge: 102
Registriert: Sa 5. Feb 2011, 11:17

Re: Nivo Slider einbauen

Beitragvon Xantiva » So 25. Nov 2012, 17:27

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
Xantiva
 
Beiträge: 948
Registriert: Mo 10. Mai 2010, 18:26

Re: Nivo Slider einbauen

Beitragvon Rainer » So 25. Nov 2012, 20:00

Hallo,

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

Rainer
Rainer
 
Beiträge: 102
Registriert: Sa 5. Feb 2011, 11:17

Nächste


Ähnliche Beiträge


Zurück zu Best Practices

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast

cron