"MACH DEINE SEITE JETZT FIT,
DER nächste SOMMER KOMMT BESTIMMT!"

Hast Du Lust auf einen schicken Nivo Slider? Kannst Du haben! Füge einfach folgenden Code in den Head-Bereich ein.


<style type="text/css">
/*<![CDATA[*/
 
.nivoSlider {
    position:relative;
    width:100%;
    height:auto;
    overflow: hidden;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    max-width: none;
    display: none;
}
.nivo-main-image {
    display: block !important;
    position: relative !important;
    width: 100% !important;
}

.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display:none;
}

.nivo-slice {
    border-radius: 5px;
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
    top:0;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
    overflow:hidden;
}
.nivo-box img { display:block; }

.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    text-align: center;
    color:#fff;
    width:100%;
    z-index:8;
    padding: 5px 10px;
    opacity: 0.8;
    overflow: hidden;
    display: none;
    -moz-opacity: 0.8;
    filter:alpha(opacity=8);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;    
    box-sizing: border-box;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
        
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}

.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}

.nivo-controlNav {
    text-align:center;
    padding: 15px 0;
}
.nivo-controlNav a {
    cursor:pointer;
}
.nivo-controlNav a.active {
    font-weight:bold;
}

.nivoSlider {
    position:relative;
    background:#fff url(http://u.jimdo.com/www52/o/s2ba029df7f23bf1c/userlayout/img/loading.gif) no-repeat 50% 50%;
    width:678px;
    height:100%;
    margin-bottom:10px;
    border-radius: 5px;
    box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.6);

}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
    border-radius: 5px;
    box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.6);

}
.nivoSlider a {
    border:0;
    display:block;
}

.nivo-controlNav {
    text-align: center;
    padding: 20px 0;
}
.nivo-controlNav a {
    display:inline-block;
    width:22px;
    height:22px;
    background:url(http://u.jimdo.com/www52/o/s2ba029df7f23bf1c/userlayout/img/bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin: 0 2px;
}
.nivo-controlNav a.active {
    background-position:0 -22px;
}

.nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(http://u.jimdo.com/www52/o/s2ba029df7f23bf1c/userlayout/img/arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
    opacity: 0;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
.nivoSlider:hover .nivo-directionNav a { opacity: 1; }
a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
 a.nivo-prevNav {
    left:15px;
}

.nivo-caption {
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
    color:#fff;
    border-bottom:1px dotted #fff;
}
.nivo-caption a:hover {
    color:#fff;
}

.nivo-controlNav.nivo-thumbs-enabled {
    width: 100%;
}
.nivo-controlNav.nivo-thumbs-enabled a {
    width: auto;
    height: auto;
    background: none;
    margin-bottom: 5px;
}
.nivo-controlNav.nivo-thumbs-enabled img {
    display: block;
    width: 120px;
    height: auto;
}
/*]]>*/
</style>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>

<script type="text/javascript" src="http://u.jimdo.com/www52/o/s2ba029df7f23bf1c/userlayout/js/jquery-nivo-slider-pack-neu.js">
</script>

<script type="text/javascript">
//<![CDATA[
  var $j = jQuery.noConflict();
        $j(window).load(function() {
        $j('#slider').nivoSlider({
        effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
        slices:15,
        animSpeed:500, //Slide transition speed
        pauseTime:3000,
        startSlide:0, //Set starting Slide (0 index)
        directionNav:true, //Next & Prev
        directionNavHide:true, //Only show on hover
        controlNav:true, //1,2,3...
        controlNavThumbs:false, //Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, //Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', //Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
        keyboardNav:true, //Use left & right arrows
        pauseOnHover:false, //Stop animation while hovering
        manualAdvance:false, //Force manual transitions
        captionOpacity:0.8, //Universal caption opacity
        beforeChange: function(){},
        afterChange: function(){},
        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>

Folgender Code muss in ein Widget/HTML-Modul eingefügt werden:

<div id="slider" class="nivoSlider">
    <a href="LINK"><img src="BILDADRESSE" alt="" title="TEXT" /></a> <a href=
    "LINK"><img src="BILDADRESSE" alt="" title="TEXT" /></a> <a href=
    "LINK"><img src="BILDADRESSE" alt="" title="TEXT" /></a> <a href=
    "LINK"><img src="BILDADRESSE" alt="" title="TEXT" /></a>
</div>

 

Hier musst Du nur noch Deine eigenen Bilder (Grafikadresse) einfügen.

Kommentare: 117

  • loading
  • #117

    romanhauch (Montag, 14 April 2014 15:50)

    Hallo,

    ich habe den Nivo und den Flexslider eingebaut aber jedesmal das Problem, dass sich mein Hintergrund verabschiedet. D.h. der Hintergrund meiner Seite wird schwarz. Ich muss dazu sagen, dass ich noch den supersize jquery als Hintergrundslider laufen habe.

    Hat jemand ne Ahnung wie ich das verhindern kann?

    Besten Dank für die tollen Tutorials!

  • #116

    René Thoben (Montag, 07 April 2014 23:36)

    Hey,
    richtig coole Tutorials die du da hast.
    Ich hab mir den Nivo-slider eingebaut.
    Habe auch bei <img src="BILD"> den pfad bzw. den Link angegeben ( Habe beide Wege probiert ).
    Trotzdem zeigt er mir auf meiner Homepage nur einen Ladekreis an und nicht mehr :/
    Kann mir einer helfen ?

  • JimdoBusiness
    #115

    agentur-artcontact (Montag, 07 April 2014 15:12)

    Vielen Dank!

  • #114

    Kathrin Müller (Freitag, 04 April 2014 13:45)

    Vielen lieben Dank! Deine seite ist großartig und hat uns super weitergeholfen! Läuft alles einwandfrei, sobald man sich etwas reingefuchst hat ;)

  • #113

    Roland (Mittwoch, 02 April 2014 13:56)

    Wie kriege ich den Slider in den Headbereich?

  • #112

    Sven Scheffel (Freitag, 07 März 2014)

    Sorry, meinte natürlich im Flex-Slider Tutorial.

    Grüße
    Sven

  • JimdoPro
    #111

    svenscheffel (Freitag, 07 März 2014 14:04)

    Beim Novio-Slider habe ich leider keine Möglichkeit gefunden einen Kommentar zu posten, deshalb hier:

    Vielen Dank zuerst einmal für deine coolen Tutorials!
    Ich stehe auch vor dem Problem, dass ich keine Möglichkeit finde den Slider auf die entsprechende Bildgröße einzustellen. Wo füge ich die Pixelzahl denn ein?

    Grüße
    Sven

  • JimdoPro
    #110

    Deine Slideshow (Mittwoch, 05 März 2014 07:30)

    Da empfehle ich Dir den FlexSlider, schaue dazu gerne mal hier vorbei:

    http://deine-slideshow.jimdo.com/dein-flexslider/

    Viele Grüße.

  • JimdoBusiness
    #109

    BEAUTEX hairlounge (Sonntag, 02 März 2014 14:18)

    Hallo nochmal die Frage ob es möglich ist, den Slider in der mobilen Version anzupassen.

  • JimdoPro
    #108

    beauty-haar (Freitag, 21 Februar 2014 00:14)

    @an Rene Eich
    ich habe zb bei
    width 700px
    height: 400px
    versuch mal andre Werte anzugeben
    siehe hier www.german-kosmetik.de

  • #107

    martinakoenig (Donnerstag, 20 Februar 2014 13:27)

    beim einfügen in head bereich auf meiner jimdo seite kommt die meldung html-code ungultig, kannst du mir dazu etwas sagen?

    danke vorab,
    katrin

  • JimdoBusiness
    #106

    Rene Eich (Dienstag, 11 Februar 2014 11:17)

    Hab ich gemacht doch leider ändert sich nichts

    nivoSlider {
    position:relative;
    width:80%;
    height:auto;
    overflow: hidden;

  • #105

    julia (Montag, 10 Februar 2014 22:50)

    du must im Head Bereich width und height die größe anpassen,

    Gruß
    Julia

  • JimdoBusiness
    #104

    Rene Eich (Montag, 10 Februar 2014 20:32)

    Hallo,
    leider bekomme ich die Größe des Sliders nicht kleiner...
    kann mir jemand helfen?
    Danke
    René

  • JimdoPro
    #103

    beauty-haar (Montag, 03 Februar 2014 22:03)

    Mag. Alexandra Lindenthal

    ich hatte das gleiche Problem, du musst die Bilder der Nivo Größe anpassen, dann hat man einen schönen übergang

  • JimdoPro
    #102

    Mag. Alexandra Lindenthal (Donnerstag, 30 Januar 2014 13:10)

    ich hab das Problem, dass die Fotos immer mit Abstand vom oberen Rand geladen werden und dann hinauf rutschen. Das sieht nicht wirklich gut aus, ich kann das Problem allerdings nicht finden. Hier der Link zur Website: http://www.motion2pictures.com

  • JimdoPro
    #101

    ingo-sandhofen (Dienstag, 28 Januar 2014 11:42)

    Super Slideshow! Funktioniert astrein! Danke dafür!

  • JimdoPro
    #100

    fotorei (Montag, 20 Januar 2014 15:38)

    Hallo,

    ich habe ein Problem mit der gemischten Darstellung von Hoch- und Querformat Bildern. Die Übergänge sehen leider etwas „wüst“ aus.
    Die Fußleiste (Impressum etc.) hüpft dabei immer hin und her.
    Kann ich im Vorfeld die Höhe des Slider fixieren?

    Danke!

  • #99

    gratzer3 (Freitag, 17 Januar 2014 16:38)

    Funktioniert super! DANKE:)

  • JimdoPro
    #98

    sinnreichleben (Samstag, 11 Januar 2014 01:12)

    Meine vorherige Frage #97 hat sich erledigt.
    Ist es aber möglich die Farbe in dem Textbalken zu ädern??
    LG
    www.sinnreichleben.de

  • JimdoPro
    #97

    sinnreichleben (Freitag, 10 Januar 2014 23:57)

    Ist es möglich den Nivo Slider als Header einzubauen?? Wenn ja wie :) :)
    LG
    www.sinnreichleben.de

  • #96

    David (Samstag, 04 Januar 2014 19:12)

    Ist es möglich den Nivo Slider auch auf die mobile Version anzupassen??

  • JimdoPro
    #95

    Ursula Schmid (Sonntag, 29 Dezember 2013 15:55)

    Ergänzung zu meiner unten stehenden Frage:
    Ich habe auf meiner Probeseite im Header die Slideshow eingefügt. Nun möchte ich im Contentbereich nur auf einer Seite einen Nivo Solider einfügen. Geht das überhaupt? Gelten die gleichen Codes? Sind beide Codes auf der gewünschten Content-Seite in ein Widget/HTML-Modul einzufügen?
    Probeseite: schmiddavos.jimdo.com / geschützter Bereich: kosmetikdavos
    Gewünschte Contentseite: Produkte. Nivo-Slider anstelle der Bildergalerie mit den Links.
    Danke für die Feedbacks und Hilfestellung(en)!

  • JimdoPro
    #94

    Ursula Schmid (Sonntag, 29 Dezember 2013 10:11)

    In diesen Weihnachtstagen habe ich Deine Seite entdeckt - vielen Dank dafür! Slideshow im Header auf einer Probeseite habe ich schon realisiert.
    Meine Frage:
    Kann ich den Nivo Slider auch in den Inhaltsbereich einer Seite einfügen?

  • JimdoBusiness
    #93

    ALLASIA Emmanuel (Donnerstag, 19 Dezember 2013 09:35)

    Frage beantwortet dank den folgenden Kommentaren. Danke an alle!

  • #92

    Emmanuel (Donnerstag, 19 Dezember 2013 09:17)

    Guten Tag,
    tausenddank für Ihre super Arbeit, die ich aus Frankreich seit gestern Abend nutze. Wäre es möglich die Schatten rund um die Bilder zu löschen? Ist es möglich, ein Rechteck mit rechten Winkel zu machen? Vielen Dank im voraus für Ihre Tipps!
    LG aus Lyon

  • JimdoPro
    #91

    derpromotionprofi (Mittwoch, 18 Dezember 2013 18:21)

    hätte den nivo slider gern zentriert
    Und in dieser breite bzw höhe
    width: 930px;
    height: 465px;

    wie stelle ich das an??

  • JimdoPro
    #90

    lauras-photodesign (Dienstag, 17 Dezember 2013 11:36)

    Das funktioniert bei mir leider nicht.
    Ich habe das problem, dass Hochkant-Bilder viel zu groß dargestellt werden.
    Querformat ist optimal.

    Ich kann zwar die Höhe des Sliders ändern, allerdings bleibt die Größe des Bildes bestehen und wird dann unten abgeschnitten.
    Die Originalgröße des Bildes ist nicht einmal so groß, sondern wird im Slider vergrößert.

    Was kann ich tun? Bin ratlos :-(

  • #89

    anwaltwebsite1 (Freitag, 13 Dezember 2013)

    @Fabian Winkler
    Deine Frage #88 bezieht sich auf ein Zitat von Deine Slideshow wie folgt: "Du musst zusätzlich die Werte unter .nivoSlider abändern."
    Im Code im obigen Fenster, etwa in der Mitte wenn du runterscrollst, findest du noch einmal

    .nivoSlider {
    width:678px;
    }
    Hier kannst du einen anderen Wert einsetzen, um die Breite deines Sliders zu ändern.
    Ich hoffe, das hilft dir.
    Gruß
    Joonie
    P.S.: Es wäre zu wünschen, wenn Fragesteller wie #38, die hier eine Antwort gefunden haben, hier anderen Teilnehmern auch an ihren Lösungen teilhaben lassen, nicht wahr?

  • JimdoBusiness
    #88

    Fabian Winkler (Mittwoch, 04 Dezember 2013 20:35)

    Hallo, ich nochmal, ich weiß mit Beitrag #38 wäre das Größen Problem gelöst. Bei mir ist es leider nicht so.
    "Du musst zusätzlich die Werte unter .nivoSlider { abändern."
    Hier finde ich folgendes:nivoSlider {
    position:relative;
    width:100%;
    height:auto%;
    overflow: hidden;
    Was kann ich hier eingeben damit der Slider kleiner wird? Bei mir ist er viel zu breit. Höhe ist okay aber die Breite geht nicht.
    Bitte um Hilfe. #38 hat sich selbst geholfen, und schrieb bereits:Die Größe abändern habe ich schon rausgefunden. Wie setze ich das ganze Mittig?

    Leider hat er es nur für sich rausgefunden und hier nicht gleich gepostet. Bitte um deine Hilfe. Danke dir!!

  • JimdoBusiness
    #87

    Fabian Winkler (Mittwoch, 04 Dezember 2013 19:19)

    Hallo, geht mir genau so. Der Slider, die Bilder werden zu groß dargestellt. Sieht schlimm aus. Wie sollte die Auflösung sein? Wie kann ich den Slider in seiner Größe verändern? Ansonsten sieht er sehr gut aus! Danke für deine Mühe!!

    Besten Gruß, Fabian

  • JimdoPro
    #86

    fotoscheu (Donnerstag, 28 November 2013 17:51)

    Hallo. Ich bekomme die richtige Größe von meinen Nivo Slider nicht hin (ehrlich gesagt ich kann ihn gar nicht verändern,... ich würd ihn gerne verkleinern.... :/ Was genau muss ich bei .NivoSlider ändern?

    Vielen Dank!

    Georg

  • #85

    tjweb (Montag, 28 Oktober 2013 18:01)

    Hallo,
    erstmal mein absoluten Respekt vor deiner Arbeit die Du hier leistest und das alles für umsonst, also vielen, vielen Dank.
    Trotzdem mal eine Frage: Ich habe den Slider Ein gepflegt und er Funktioniert auch, aber immer wenn ich ein Bild ein pflege kommt dann an der letzten stelle ein leeres Bild dazu.
    Zur Erklärung, ich habe 5 Bilder aber der Slider legt ein 6 Bild mit an.

    Wie kann ich dass abstellen?

    Gruß tjweb

  • JimdoPro
    #84

    Freiwillige Feuerwehr Miklauzhof (Dienstag, 22 Oktober 2013 15:08)

    Lassen sich die Navi-Punkte auch nach oben verschieben

    bzw besteht die Möglichkeit eine 1 - 2 - 3 ... Nummerierung rechts unten über den Bildern anstatt der Navi-Punkte einbauen?

    LG

  • JimdoBusiness
    #83

    Ariane Bioly (Dienstag, 22 Oktober 2013 14:25)

    Hallo,

    vielen Dank auch von mir für die großartige Hilfe beim Umgang mit Jimdo. Auch ich habe den Nivo Slider auf meiner Website erfolgreich eingefügt, würde nun gern dessen Breite an die Breite der Website von 960 pxl anpassen, leider habe ich noch keine hilfreiche Antwort gefunden, ich hoffe ich habe sie nicht überlesen und frage nun unnötiger Weise. Vielen Dank für mögliche Hilfe.
    Ariane

  • JimdoPro
    #82

    wieserle (Montag, 21 Oktober 2013 22:11)

    Hallo,
    nach vielem Rumspielen funktioniert es jetzt so, wie ich es will...
    Vielen Dank für die ganzen Tutorials.
    Gruß

  • #81

    Strap on it! (Montag, 21 Oktober 2013 19:58)

    Hat noch jemand das Problem, dass bei unserem Problemkind IE bei der ERSTEN Anzeige des ERSTEN Bildes ein Teil unten (ca. 10 Pixel) abgeschnitten wird??

  • JimdoPro
    #80

    im-takt (Sonntag, 20 Oktober 2013 12:05)

    gibt es eine möglichkeit den nivo-slider transparent zu machen?

  • #79

    Jan (Samstag, 19 Oktober 2013)

    Hallo Deine-Slideshow!
    Erstmal vielen Dank, für die Seite!! Hab bei mir die Slideshow jetzt auch drin. Klappt super!
    War zwischendurch stark am Grübeln, warum die Slideshow bei mir nicht angezeigt wird. Dabei war die Lösung so einfach: Adblocker aus! :P
    Gruß, Jan

  • #78

    jakob-michael (Donnerstag, 17 Oktober 2013 00:24)

    Hallo, vielen Dank für Slider skript!
    Ich hab's anscheinend auch eine blöde Frage, wie kann man - bullets.png- die Anzeigenbuttons im unteren Bilderbereich posizionieren.

  • #77

    Alex Grischkow (Mittwoch, 16 Oktober 2013 10:05)

    Hallo,

    gibts die Möglichkeit den Nivo SLider Light zu installieren? Muss dafür viel verändert werden?

    Vielen Dank im Voraus

  • #76

    Strap on it! (Dienstag, 15 Oktober 2013 17:38)

    Hab's gefunden: Einfach Alt und Titel entfernen! :)

  • #75

    Strap on it! (Montag, 14 Oktober 2013 19:23)

    Mist verdammter; jetzt hab ich doch noch ne Frage! :O
    Ich habe gesucht, aber bin nicht fündig geworden:
    In meinem Nivo Slider im Head wird unten ein halbdurchsichtiger Streifen mit Text eingeblendet.
    Den benötige ich nicht, da ich diesen vorraussichtlich im Logo unterbringen werde.
    Wie kann ich diese Zeile ausblenden?

    Danke!

  • JimdoPro
    #74

    Deine Slideshow (Montag, 14 Oktober 2013 12:49)

    @ Reni, poste hier mal deine Seite, dann schau ich mir das gerne an ;-)

    Viele Grüße.

  • #73

    Reni (Sonntag, 13 Oktober 2013 15:35)

    Hallo,
    seit ich den Nivo SLider im header eingebaut habe, ist eine background-color meiner Site nicht mehr möglich.
    Die backgroundfarbe meiner Seite wird seitdem nur in weiss gezeigt. Dafür funktioniert der Slider im header optimal.
    Woran kann es liegen, daß dadurch eine background Farbwahl der Seite nicht möglich ist?
    Viele Grüße

  • JimdoPro
    #72

    look-deco (Sonntag, 08 September 2013 17:07)

    Hello Leute.
    Ich kapier das nicht. Ich habe mein Navigator ganz oben. Darunter mein Logo.
    Und unter dem Logo möchte ich eine Slideshow einbauen. Aber irgendwie klappt das nicht.
    Wäre dankbar wenn ihr mir hilft. :)

  • #71

    Tami (Mittwoch, 04 September 2013 12:42)

    ...nochmal ich... nach langem warten geht es jetzt.
    Aber bei mir funktioniert keiner der Effekte. Woran kann das liegen?

  • #70

    Tami (Mittwoch, 04 September 2013 10:45)

    Hallo,
    ich habe versucht die Slideshow einzubauen, habe auch meine Grafikadressen eingefügt, aber leider wird nur eine weiße Box angezeigt und der sich drehende Kreis, der das "Laden" des Bildes anzeigt.
    Muss ich im Head auch noch irgendwo die Eingaben verändern?
    Danke schonmal,
    Grüße Tami

  • JimdoPro
    #69

    tuer-systeme (Sonntag, 01 September 2013 20:22)

    Hallo, ich habe heute den Slider in eine bestehende Startseite eingebaut. Funktioniert soweit auch gut. Ich wollte es allerdings nicht so groß haben und habe deshalb ein Spalten-Element verwendet, links Textfeld und rechts HTML mit dem entsprechenden Code. Im Head habe ich den Slider auf 330px Breite eingestellt. Wenn man die Seite jetzt aufruft wird das erste Sliderbild kurzfristig zu groß angezeigt und springt dann auf die gedachte Größe zurück und läuft dann perfekt.
    Wie bekomme ich das in den Griff?

    Gruß
    Udo

  • JimdoBusiness
    #68

    Christian Neulinger (Montag, 12 August 2013 09:59)

    Hallo!

    Hab den Slider jetzt mal getestet...funktioniert!! :-)
    Hätte dazu ne Frage: Ist es möglich, wenn ich jetzt auf ein Bild klicke, dass z.b. ein pdf geöffnet wird?

    Greetz
    Chris