Einbau des Nivo-Sliders

[alien]

Hallo,

ich installiere gerade den Nivo-Slider und nun taucht eine Frage auf:

Was hat "Jetzt öffnen wir die Datei /templates/DeinTemplate/index.html
Dort fügen wir an gewünschter Position folgendes ein" zu bedeuten?

Meine Index.html:

Code: PHP  [Auswählen]

Jetzt öffnen wir die Datei /templates/DeinTemplate/index.html

Dort fügen wir an gewünschter Position folgendes ein:

Und hier der PHP-Schippel des Nivo-Sliders:

Code: PHP  [Auswählen]

{if strstr ($smarty.server.PHP_SELF, 'index')}
    {if $smarty.get.cPath==null and $smarty.get.manufacturers_id==''}
         <div id="slider" class="nivoSlider">
                <img src="{$tpl_path}img/slider1.jpg" alt="Dein Alt-Text" />
                <img src="{$tpl_path}img/slider2.jpg" alt="Dein Alt-Text" />
                <img src="{$tpl_path}img/slider3.jpg" alt="Dein Alt-Text" />
                <img src="{$tpl_path}img/slider4.jpg" alt="Dein Alt-Text"  />
                <img src="{$tpl_path}img/slider5.jpg" alt="Dein Alt-Text"  />
            </div>
   {/if}
{/if}

Beste Grüße, Alien

Linkback: https://www.modified-shop.org/forum/index.php?topic=18987.0

[jannemann]

Hallo alien,

du kannst den Code an einer beliebigen Stelle in deiner Index eintragen.
Ich würde den Code für die Bilder allerdings in templates/modules/main_content.html einbinden.

Schöne Grüße,
Jan

[alien]

In Main_Content sieht es so aus:

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="index"}
{$MODULE_error}
<h1>{$title}</h1>
<div>{$text}</div>
{if $MODULE_new_products}
<div>{$MODULE_new_products}</div>
{/if}
{if $MODULE_upcoming_products}
<div>{$MODULE_upcoming_products}</div>
{/if}

Da soll ich es einfügen? Wenn ja wo, wenn ich es ganz oben haben möchte, wo ich momentan mit dem Index einen Text stehen habe?

Danke, Alien

[jannemann]

Damit wird dein Text angezeigt

Code: PHP  [Auswählen]

<div>{$text}</div>

Du hast die Wahl

Schöne Grüße,
Jan

[alien]

Hey,

Danke, jetzt läuft er schon mal.
Aber er überzieht immer die bilder so komisch nach unten mit den Effekten...
Kannst du dir das mal angucken? Ich kann es nicht wirklich beschreiben

Danke

http://bit.ly/yGdHE4

[jannemann]

Stell den Effekt auf fade um. Du findest zu deinem Problem etliche Beiträge. Bitte die Suche benutzen.

[Modfan]

Ich habe auch den Nivoslider nach einer Anleitung hier aus dem Forum und mit der Hilfsbereitschaft von Jannemann eingebaut.

@alien
Nach welcher Anleitung hast Du es gemacht?

Ich habe bei mir diese kleinen Navigations-Bullets aktiviert und die sind momentan unterhalb der Slideshow platziert.
Eigentlich hätte ich sie gern innerhalb der Bilder (am unteren Rand) in der Sliedeshow, aber ich bekomme es einfach nicht hin.
Ich war schon mal so weit, dass sie innerhalb der Bilder angezeigt bekam, aber bei jedem Slide waren sie dann irgendwie immer vom nächsten Bild kurzzeitig verdeckt. Ich habe aber leider aber auch keinerlei Ahnung von Webprogrammierung und so ging die ganze Testerei immer nach dem Prizip trial and error. Hat leider nicht zum Erfolg geführt.
Wenn mir jemand sagen könnte, wie ich die Bullets "ordentlich" verschieben kann, fänd ich es sehr nett.

Code: CSS  [Auswählen]

/*=================================*/
/* Nivo Slider Demo
/* November 2010
/* By: Gilbert Pellegrom
/* http://dev7studios.com
/*=================================*/
 
/* Hier gibst du an, wie groß dein Slider werden soll. Außerdem wird eine Ladeanimation eingebunden*/
 
#slider{
        height: 270px; /* Make sure your images are the same size */
        width: 525; /* Make sure your images are the same size */
        background:url(img/loading.gif) no-repeat 50% 50%;
}
#slider img {
        position:absolute;
        top:0px;
        left:0px;
        display:none;
}
#slider a {
        border:0;
        display:block;
}
/* Die Nivo Slider styles */
.nivoSlider {
        position:relative;
}
.nivoSlider img {
        position:absolute;
        top:0px;
        left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        border:0;
        padding:0;
        margin:0;
        z-index:60;
        display:none;
}
/* The slices in the Slider */
.nivo-slice {
        display:block;
        position:absolute;
        z-index:50;
        height:100%;
}
/* Caption styles */
.nivo-caption {
        position:absolute;
        left:0px;
        bottom:0px;
        background:#000;
        color:#fff;
        opacity:0.8; /* Overridden by captionOpacity setting */
        width:100%;
        z-index:89;
}
.nivo-caption p {
        padding:5px;
        margin:0;
}
.nivo-caption a {
        display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
        position:absolute;
        left:220px;   /* <-bullets-> */
        bottom:-20px;   /* -28   */
}
.nivo-controlNav a {
        display:block;
        width:22px;
        height:22px;
        background:url(img/bullets.png) no-repeat;
        text-indent:-9999px;
        border:0;
        margin-right:3px;
        float:left;
}
.nivo-controlNav a.active {
        background-position:0 -22px;
}
.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
    color:#efe9d1;
    text-decoration:underline;
}
/*=================Ende-Nivo-Slider===================*/

Eingebaut ist der Slider ansonsten nach so wie hier beschrieben:

https://www.modified-shop.org/wiki/Einbinden_des_Nivo-Sliders_auf_der_Startseite

Grüße