Slider Problem

**wolfiernst** · 04.03.2012, 22:25

Hallo an alle ich versuche einen Slider in meinen Shop einzubauen. Dafür benutze ich die Installationsvorgabe von www.kerrinhardy.com. Leider funktioniert diese nicht. Wer kann mir ein paar Typs dazu geben.
ich bin über jede Hilfe dankbar, viele Grüße aus Mittelhessen.Wolfgang

**Thommy** · 05.03.2012, 01:12

Hallo!
Ist gar nicht sooo schwer!
BEVOR DU LOSLEGST!!!! SICHERUNG ANLEGEN; DATENBANK SICHERN!

1.) Erstelle deine Bilder 660 x 240 pixels und benenne diese in slider1.jpg, slider2.jpg, slider3.jpg und slider4.jpg
2.) Lade diese Bilder in: /includes/templates/DEIN TEMPLATE/images
3.) Lade diese Datei auf deinen Rechner: http://www.kerrinhardy.com/resources...syslider17.zip
4.) Entpacke die Datei, darin sind zwei Dateien enthalten (jscript_easyslider_settings.js und jscript_easySlider1.7.js)
5.) Lade diese beiden Dateien in den Ordner: includes/modules/pages/index
6.) Lade dir folgende Datei auf deinen Rechner: Anhang 611
7.) Diese Datei entpacken und auf deinen Server hochladen unter: includes/templates/DEIN TEMPLATE/jscript/
8.) Sollte der Ordner jscript nicht bestehen, erzeuge diesen Ordner!
9.) Lade dir deine stylesheet.css Datei auf deinen Rechner, du findest sie unter: /includes/templates/DEIN TEMPLATE/css/
10.) Öffne diese CSS Datei mit einem Editor (Notepad++), scrolle bis zum Ende und füge nach der letzten Zeile folgendes ein:

Code:

/* // Easy Slider */
    img{border:none;}
    /* image replacement */
        .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }
    /* // image replacement */

    #container{
        margin:2em auto;
        position:relative;
        text-align:left;
        width:660px;
        background:#fff;
        }
    #header{
        height:80px;
        line-height:80px;
        background:#5DC9E1;
        color:#fff;
        }
    #content{
        position:relative;
        }           

/* Easy Slider */

    #slider ul, #slider li,
    #slider2 ul, #slider2 li{
        margin:0;
        padding:0;
        list-style:none;
        }
    #slider2{margin-top:1em;}
    #slider li, #slider2 li{
        /*
            define width and height of list item (slide)
            entire slider area will adjust according to the parameters provided here
        */
        width:660px;
        height:240px;
        overflow:hidden;
        }
    #prevBtn, #nextBtn,
    #slider1next, #slider1prev{
        display:block;
        width:30px;
        height:77px;
        position:absolute;
        left:-30px;
        top:71px;
        z-index:1000;
        }
    #nextBtn, #slider1next{
        left:660px;
        }
    #prevBtn a, #nextBtn a,
    #slider1next a, #slider1prev a{
        display:block;
        position:relative;
        width:30px;
        height:77px;
        background:url(../images/btn_prev.gif) no-repeat 0 0;
        }
    #nextBtn a, #slider1next a{
        background:url(../images/btn_next.gif) no-repeat 0 0;
        }   

    /* numeric controls */ 

    ol#controls{
        margin:1em 0;
        padding:0;
        height:28px;
        }
    ol#controls li{
        margin:0 10px 0 0;
        padding:0;
        float:left;
        list-style:none;
        height:28px;
        line-height:28px;
        }
    ol#controls li a{
        float:left;
        height:28px;
        line-height:28px;
        border:1px solid #ccc;
        background:#DAF3F8;
        color:#555;
        padding:0 10px;
        text-decoration:none;
        }
    ol#controls li.current a{
        background:#5DC9E1;
        color:#fff;
        }
    ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

/* // Easy Slider */

11.) Speichere die CSS Datei und lade sie wieder auf deinen Server, dabei wird die Originaldatei überschrieben (Zur Erinnerung:/includes/templates/DEIN TEMPLATE/css/) .
12.) Lade die Datei: tpl_index_default.php auf deinen Rechner, du findest sie unter: /includes/templates/DEIN TEMPLATE/templates/
13.) Öffne diese Datei mit einem Editor (Notepad++) und suche darin folgendes:

Code:

 <?php/**
 * get the Define Main Page Text
 */
?>
<div id="indexDefaultMainContent" class="content"><?php require($define_page); ?></div>
<?php } ?>

14.) Füge genau darunter folgendes ein:

Code:

<!-- bof Easy Slider 1.7 --><div id="container">
    <div id="content">
        <div id="slider">
            <ul>
                <li><a href="#"><img alt="Easy Slider 1.7 for Zen Cart" src="includes/templates/classic/images/slider1.jpg" /></a>
                <li><a href="#"><img alt="Easy Slider 1.7 for Zen Cart" src="includes/templates/classic/images/slider2.jpg" /></a>
                <li><a href="#"><img alt="Easy Slider 1.7 for Zen Cart" src="includes/templates/classic/images/slider3.jpg" /></a>
                <li><a href="#"><img alt="Easy Slider 1.7 for Zen Cart" src="includes/templates/classic/images/slider4.jpg" /></a>
            </li></ul>
        </div>
    </div>
</div>
<!-- eof Easy Slider 1.7 -->

15.) Die rot markierten Stellen musst du noch ändern, in den Namen deines Templates (benutzt du das Template Classic brauchst du natürlich nichts machen)
16.) Datei speichern und auf deinen Webspace wieder hochladen unter: /includes/templates/DEIN TEMPLATE/templates/
Dabei wird wieder die Originaldatei überschrieben.

17.) Deine Webseite aufrufen, Browser aktualisieren und über den Erfolg freuen!

So, ich hoffe es hilft!
Nette Grüße
Thommy

**Domain** · 05.03.2012, 16:06

@ Thommy

herzlichen Dank für die coole deutsche F.A.Q

@alle

Leider läuft das Sliderteil bei mir auch nirgendwo... ich habe das erst in EN dann lt. Thommy's Anweisung nun mehrfach versucht einzupfriemeln, leider immer ohne Erfolg.

Ich raffe i.d.R. die Jquery, auf normalen Sites habe ich alle Varianten durch.

Was ich bei ZEN momentan gar nicht verstehe ist, ...

die Query muss doch irgendwo im Header *aktiviert oder include* werden, Zen weiss doch den Pfad zur .js Datei nicht, oder?

Das gleiche gilt für die beiden Slider - JS - Files. ZEN ruft die beiden ja nirgendwo auf??? koppkratz*

Müssen die nicht auch irgendwie erstmal ANGEMELDET werden???

verzweifelt gugg

Wäre einer der Profis so lieb und hätte einen Ansatz oder eine Erklärung für mich, bitte?

Herzlichen Dank und LG

Frankie

**webchills** · 05.03.2012, 17:25

Zitat von Domain

Was ich bei ZEN momentan gar nicht verstehe ist, ...
die Query muss doch irgendwo im Header *aktiviert oder include* werden, Zen weiss doch den Pfad zur .js Datei nicht, oder?
Das gleiche gilt für die beiden Slider - JS - Files. ZEN ruft die beiden ja nirgendwo auf???

Zen-Cart lädt auf ALLEN Seiten automatisch ALLE Javascripts, die im Ordner includes/templates/DEINTEMPLATE/jscript liegen und mit jscript_ beginnen
Daher wird die jquery als jscript_jqueryxxx benannt und dort abgelegt

Zen-Cart lädt auf bestimmten Seiten automatisch die in der zur Seite passenden Ordner gelegten Javascripts.
Also z.B. Artikeldetailseite: includes/modules/pages/product_info
Startseite: includes/modules/pages/index
Daher werden die beiden anderen Scripts nach includes/modules/pages/index gelegt.

**Domain** · 05.03.2012, 19:33

Zitat von webchills

Zen-Cart lädt auf ALLEN Seiten automatisch ALLE Javascripts, die im Ordner includes/templates/DEINTEMPLATE/jscript liegen und mit jscript_ beginnen
Daher wird die jquery als jscript_jqueryxxx benannt und dort abgelegt

@webchill
Vielen Dank für Deine Hilfe...

Das ist a) wieder mal klasse von ZEN und b) hilft mir erstmal weiter, in der Form, das die JS-Files eingebunden sind...

@all

Aber nichts desto trotz, der (mir langsam massiv auf den Nerv gehende

-
Slider macht immer noch keinen mucks...

Keine Fehlermeldung, kein leerer Rahmen... einfach gar nix... seufz*

awa... RIESENSEUFZER :-(

Oh Mann, hat zufällig noch irgend jemand eine Idee?

Ich bin auch dankbar FÜR JEDE ANREGUNG, wie der Threadersteller

Merci

Frankie

**Domain** · 05.03.2012, 21:27

Bleibt nur nochmals übrig, VIELEN DANK euch allen, nu slidert's endlich auch bei mir

@mario
Das war kein Gäg*

aber damit war klar, das Du niemals irgendwas inner php Datei verwurschtelst hast, und dann konnte es nur noch an dem Aufruf in der tpl_default liegen

In diesem Sinne...

Beste Grüsse

Frankie

**zencartuser** · 26.04.2012, 13:23

Hallo Zusammen.
ich habe den Slider erfogreich in meine Seite eingefügt, und er läuft auch.
Problem ist jedoch, das die Bilder nicht vollständig in die Box einlaufen, sondern nur zu 80% slider1, zu 70% slider2, 60% slider3 usw.
die Grafiken sind 660x240 wie angegeben.
Meine seite ist auf 1100px Breite fixiert. Kann das Problem hier liegen? Und wenn ja, wie bekomme ich es behoben ?
Danke für die Unterstützung.
Gruss Arne
PS. Shop läuft auf XAMPP Lokal

**zencartuser** · 26.04.2012, 13:55

Hallo nochmal.
Fehler behoben... man sollte auch das gesamte script kopieren und nicht nur einen Teil davon

Tolles teil.
Gruss Arne

**MarcR** · 18.03.2013, 13:44

Liebes Forum,

leider hat es mit XZ Slider nicht geklappt. Daher habe ich den Kerrin Hardy Slider eingebaut. Läuft auch.

Frage: Wie kann ich die Bilder, die dort laufen, verlinken, so dass ich, wenn ich auf das Foto klicke, auch in die entsprechende Rubrik komme? Zen Cart 1.3.9

Vielen Dank für eure Antworten.

MarcR

**Thommy** · 18.03.2013, 14:33

Ist nicht sooo schwer, öffne die Datei:
tpl_index_default.php
Diese findest du unter: /includes/templates/DEIN_TEMPLATE/templates
scrolle nach unten bis zur Zeile mit deinen Bildern für den Slider.
Im Originalscript steht:

PHP-Code:


<li><a href="#"><img alt="Easy Slider 1.7 for Zen Cart" src="includes/templates/classic/images/slider1.jpg" /></a>

Ändere dies auf:

PHP-Code:


<li><a href="http://www.hier-der-Link-zum-Artikel"><img alt="Name-des-Artikels" src="includes/templates/DEIN_TEMPLATE/images/slider1.jpg" /></a></li>

Weitere Bilder fügst du nachstehend an (mit entsprechendem Link und Beschreibung)!