Ankündigung

Einklappen
Keine Ankündigung bisher.

Slider Problem

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    Slider Problem

    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

    #2
    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:
    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:
    [COLOR=Blue]/* // Easy Slider */[/COLOR]
    [COLOR=Blue]    img{border:none;}[/COLOR]
    [COLOR=Blue]    /* image replacement */[/COLOR]
    [COLOR=Blue]        .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{[/COLOR]
    [COLOR=Blue]            margin:0;[/COLOR]
    [COLOR=Blue]            padding:0;[/COLOR]
    [COLOR=Blue]            display:block;[/COLOR]
    [COLOR=Blue]            overflow:hidden;[/COLOR]
    [COLOR=Blue]            text-indent:-8000px;[/COLOR]
    [COLOR=Blue]            }[/COLOR]
    [COLOR=Blue]    /* // image replacement */[/COLOR]
    
    [COLOR=Blue]    #container{[/COLOR]
    [COLOR=Blue]        margin:2em auto;[/COLOR]
    [COLOR=Blue]        position:relative;[/COLOR]
    [COLOR=Blue]        text-align:left;[/COLOR]
    [COLOR=Blue]        width:660px;[/COLOR]
    [COLOR=Blue]        background:#fff;[/COLOR]
    [COLOR=Blue]        }[/COLOR]
    [COLOR=Blue]    #header{[/COLOR]
    [COLOR=Blue]        height:80px;[/COLOR]
    [COLOR=Blue]        line-height:80px;[/COLOR]
    [COLOR=Blue]        background:#5DC9E1;[/COLOR]
    [COLOR=Blue]        color:#fff;[/COLOR]
    [COLOR=Blue]        }[/COLOR]
    [COLOR=Blue]    #content{[/COLOR]
    [COLOR=Blue]        position:relative;[/COLOR]
    [COLOR=Blue]        }           [/COLOR]
    
    [COLOR=Blue]/* Easy Slider */[/COLOR]
    
    [COLOR=Blue]    #slider ul, #slider li,[/COLOR]
    [COLOR=Blue]    #slider2 ul, #slider2 li{[/COLOR]
    [COLOR=Blue]        margin:0;[/COLOR]
    [COLOR=Blue]        padding:0;[/COLOR]
    [COLOR=Blue]        list-style:none;[/COLOR]
    [COLOR=Blue]        }[/COLOR]
    [COLOR=Blue]    #slider2{margin-top:1em;}[/COLOR]
    [COLOR=Blue]    #slider li, #slider2 li{[/COLOR]
    [COLOR=Blue]        /*[/COLOR]
    [COLOR=Blue]            define width and height of list item (slide)[/COLOR]
    [COLOR=Blue]            entire slider area will adjust according to the parameters provided here[/COLOR]
    [COLOR=Blue]        */[/COLOR]
    [COLOR=Blue]        width:660px;[/COLOR]
    [COLOR=Blue]        height:240px;[/COLOR]
    [COLOR=Blue]        overflow:hidden;[/COLOR]
    [COLOR=Blue]        }[/COLOR]
    [COLOR=Blue]    #prevBtn, #nextBtn,[/COLOR]
    [COLOR=Blue]    #slider1next, #slider1prev{[/COLOR]
    [COLOR=Blue]        display:block;[/COLOR]
    [COLOR=Blue]        width:30px;[/COLOR]
    [COLOR=Blue]        height:77px;[/COLOR]
    [COLOR=Blue]        position:absolute;[/COLOR]
    [COLOR=Blue]        left:-30px;[/COLOR]
    [COLOR=Blue]        top:71px;[/COLOR]
    [COLOR=Blue]        z-index:1000;[/COLOR]
    [COLOR=Blue]        }[/COLOR]
    [COLOR=Blue]    #nextBtn, #slider1next{[/COLOR]
    [COLOR=Blue]        left:660px;[/COLOR]
    [COLOR=Blue]        }[/COLOR]
    [COLOR=Blue]    #prevBtn a, #nextBtn a,[/COLOR]
    [COLOR=Blue]    #slider1next a, #slider1prev a{[/COLOR]
    [COLOR=Blue]        display:block;[/COLOR]
    [COLOR=Blue]        position:relative;[/COLOR]
    [COLOR=Blue]        width:30px;[/COLOR]
    [COLOR=Blue]        height:77px;[/COLOR]
    [COLOR=Blue]        background:url(../images/btn_prev.gif) no-repeat 0 0;[/COLOR]
    [COLOR=Blue]        }[/COLOR]
    [COLOR=Blue]    #nextBtn a, #slider1next a{[/COLOR]
    [COLOR=Blue]        background:url(../images/btn_next.gif) no-repeat 0 0;[/COLOR]
    [COLOR=Blue]        }   [/COLOR]
    
    [COLOR=Blue]    /* numeric controls */ [/COLOR]
    
    [COLOR=Blue]    ol#controls{[/COLOR]
    [COLOR=Blue]        margin:1em 0;[/COLOR]
    [COLOR=Blue]        padding:0;[/COLOR]
    [COLOR=Blue]        height:28px;[/COLOR]
    [COLOR=Blue]        }[/COLOR]
    [COLOR=Blue]    ol#controls li{[/COLOR]
    [COLOR=Blue]        margin:0 10px 0 0;[/COLOR]
    [COLOR=Blue]        padding:0;[/COLOR]
    [COLOR=Blue]        float:left;[/COLOR]
    [COLOR=Blue]        list-style:none;[/COLOR]
    [COLOR=Blue]        height:28px;[/COLOR]
    [COLOR=Blue]        line-height:28px;[/COLOR]
    [COLOR=Blue]        }[/COLOR]
    [COLOR=Blue]    ol#controls li a{[/COLOR]
    [COLOR=Blue]        float:left;[/COLOR]
    [COLOR=Blue]        height:28px;[/COLOR]
    [COLOR=Blue]        line-height:28px;[/COLOR]
    [COLOR=Blue]        border:1px solid #ccc;[/COLOR]
    [COLOR=Blue]        background:#DAF3F8;[/COLOR]
    [COLOR=Blue]        color:#555;[/COLOR]
    [COLOR=Blue]        padding:0 10px;[/COLOR]
    [COLOR=Blue]        text-decoration:none;[/COLOR]
    [COLOR=Blue]        }[/COLOR]
    [COLOR=Blue]    ol#controls li.current a{[/COLOR]
    [COLOR=Blue]        background:#5DC9E1;[/COLOR]
    [COLOR=Blue]        color:#fff;[/COLOR]
    [COLOR=Blue]        }[/COLOR]
    [COLOR=Blue]    ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}[/COLOR]
    
    [COLOR=Blue]/* // Easy Slider */[/COLOR]
    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:
    [COLOR=Blue] <?php[/COLOR][COLOR=Blue]/**[/COLOR]
    [COLOR=Blue] * get the Define Main Page Text[/COLOR]
    [COLOR=Blue] */[/COLOR]
    [COLOR=Blue]?>[/COLOR]
    [COLOR=Blue]<div id="indexDefaultMainContent" class="content"><?php require($define_page); ?></div>[/COLOR]
    [COLOR=Blue]<?php } ?>[/COLOR]
    14.) Füge genau darunter folgendes ein:
    Code:
    [COLOR=Blue]<!-- bof Easy Slider 1.7 -->[/COLOR][COLOR=Blue]<div id="container">[/COLOR]
    [COLOR=Blue]    <div id="content">[/COLOR]
    [COLOR=Blue]        <div id="slider">[/COLOR]
    [COLOR=Blue]            <ul>[/COLOR]
    [COLOR=Blue]                <li><a href="#"><img alt="Easy Slider 1.7 for Zen Cart" src="includes/templates/[COLOR=Red]classic[/COLOR]/images/slider1.jpg" /></a>[/COLOR]
    [COLOR=Blue]                <li><a href="#"><img alt="Easy Slider 1.7 for Zen Cart" src="includes/templates/[COLOR=Red]classic[/COLOR]/images/slider2.jpg" /></a>[/COLOR]
    [COLOR=Blue]                <li><a href="#"><img alt="Easy Slider 1.7 for Zen Cart" src="includes/templates/[COLOR=Red]classic[/COLOR]/images/slider3.jpg" /></a>[/COLOR]
    [COLOR=Blue]                <li><a href="#"><img alt="Easy Slider 1.7 for Zen Cart" src="includes/templates/[COLOR=Red]classic[/COLOR]/images/slider4.jpg" /></a>[/COLOR]
    [COLOR=Blue]            </li></ul>[/COLOR]
    [COLOR=Blue]        </div>[/COLOR]
    [COLOR=Blue]    </div>[/COLOR]
    [COLOR=Blue]</div>[/COLOR]
    [COLOR=Blue]<!-- eof Easy Slider 1.7 -->[/COLOR]
    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
    Zuletzt geändert von webchills; 05.03.2012, 16:29.

    Kommentar


      #3
      Katastropholous .... argl*

      @ 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

      Kommentar


        #4
        Zitat von Domain Beitrag anzeigen
        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.

        Kommentar


          #5
          leider nein

          Zitat von webchills Beitrag anzeigen
          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

          Kommentar


            #6
            ERLEDIGT - Funktioniert

            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

            Kommentar


              #7
              slider nicht zentriert

              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
              Angehängte Dateien

              Kommentar


                #8
                Hallo nochmal.
                Fehler behoben... man sollte auch das gesamte script kopieren und nicht nur einen Teil davon
                Tolles teil.
                Gruss Arne

                Kommentar


                  #9
                  Kerrin Hardy Slider - Links auf Fotos anwenden

                  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

                  Kommentar


                    #10
                    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)!

                    Kommentar


                      #11
                      Danksagung

                      Hallo Thommy,

                      dir vielen Dank! Hat geklappt.

                      Viele Grüße

                      Marc

                      Kommentar

                      Info zu diesem Forenarchiv:
                      Mit Release von 1.5.7 wurde die deutsche Zen Cart Version auf eine reine DIY-Lösung umgestellt.
                      Für einen Support via Forum stehen keine personellen und zeitlichen Ressourcen mehr zur Verfügung.
                      Dieses Supportforum bleibt im Nur-Lesen-Modus als Wissensarchiv noch online verfügbar.
                      PM Funktionalität, Registrierung und Posten neuer Beiträge sind deaktiviert.
                      Zugriff auf Anhänge in den Postings ist auch ohne Registrierung/Einloggen möglich.
                      FAQ und Downloadbereich des Forums wurden in die neue umfangreiche Knowledgebase auf der zen-cart-pro.at Website übernommen.

                      Das Development der deutschen Zen Cart Version geht wie bisher auf Github weiter.
                      Wir werden auch weiterhin neue Versionen bereitstellen und die Onlinedokumentation/Knowledgebase aktualisieren.
                      Fehler in der Software können auf Github als Issues gemeldet werden.
                      Follow us
                      aktuelle version
                      Zen Cart 1.5.7g deutsch
                      vom 12.12.2023
                      [Download]
                      Lädt...
                      X