jQuery Slider (Easy Slider) einbinden -> ohne Modul

[HennryGale]

Hey,

da mir der Slider, den man als Modul einbinden kann überhaupt nicht gefällt, würde ich gerne einen anderen Slider einbinden.

Deshalb saß ich vorhin ne Weile dran und hab versucht den Easy Slider einzubinden. Es gibt anscheinend nur für die Vorgänger Version eine Anleitung. (Und hier noch eine Livedemo)

Leider hab ich es nicht hin bekommen.. Es wäre super, wenn ihr mir helfen könnte, sodass ich den Slider einbinden kann. Bitte verweist mich nicht auf das Slider-Modul, denn ich würde gerne genau diesen Slider benutzen und außerdem lernen,wie man eigenständig jQuery Elemente in modified eCommerce Shopsoftware einbaut! Danke schonmal im Voraus !

Meine Schritte waren:
1. Die CSS Styles in das CSS des modified eCommerce Shopsoftware Shop einbinden.

Sah dann so aus:

Code: CSS  [Auswählen]

#slider{}
#slider ul, #slider li{
        margin:0;
        padding:0;
        list-style:none;
        }
#slider li{
        width:696px;
        height:241px;
        overflow:hidden;
        }
#prevBtn, #nextBtn{
        display:block;
        width:30px;
        height:77px;
        position:absolute;
        left:-30px;
        top:71px;
        }
#nextBtn{
        left:696px;
        }
#prevBtn a, #nextBtn a{
        display:block;
        width:30px;
        height:77px;
        background:url(images/btn_prev.gif) no-repeat 0 0;
        }
#nextBtn a{
        background:url(images/btn_next.gif) no-repeat 0 0;
        }
                        }*/                                                            

/* // slider */                                                                                                

/*      .col strong, .full strong{
                padding:0 2px;
                background:#f1f1f1;
                }
        .col a, .full a{
                font-weight:bold;
                text-decoration:underline;
                }              

        .full ul, .full li{
                margin:0;
                padding:0;
                list-style:none;
                }
        .full li{
                padding:3px 15px;
                background:#f1f1f1;
                margin-bottom:1px;
                }              

2. Die easySlider1.5.js in /javascript kopieren

3. Die general.js.php anpassen:

Hier müsste glaube ich der Fehler liegen.. Ich weiß nicht genau, wie ich diese Zeilen in die general.js.php schreiben soll:

Code: Javascript  [Auswählen]

<script type="text/javascript" src="javascript/jquery.js"></script>
        <script type="text/javascript" src="javascript/easySlider1.5.js"></script>
        <script type="text/javascript">
                $(document).ready(function(){
                        $("#slider").easySlider();
                });
        </script>

Bei jeder Möglichkeit, die ich bis jetzt probiert habe, bekomme ich immer das Ergebnis hier:

  [ Für Gäste sind keine Dateianhänge sichtbar ]



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

[web28]

general.js.php sieht gut aus.

Css Code sieht mies aus, bau den komplett wieder aus. Dann sollte alles wieder richtig angezeigt werden, natürlich ohne Slider.

Du musst bei CSS mit den Kommentarzeichen aufpassen /*  */
Alles ab dem Slider Kommentar gehört nicht mehr zum Slider

[HennryGale]

Jap die /* Kommentare stehen da noch drin, weil ich es im Stylesheet auskommentiert hatte und jetzt schlampig rein kopiert habe. Bei dem unteren Teil ab dem Slider Kommentar, dachte ich irgendwie das gehört noch dazu..

Nunja, danke für dein Kommentar, aber den Slider einfach wieder raus zu nehmen ist leider keine große Hilfe für mich.

[web28]

Du solltest den CSS Code nur entfernen, damit erst einmal alles wieder richtig angezeigt wird. Anschließend baust Du den Slidercode wieder ein, wobei Du einiges anpassen musst (Breite, Buttons, Bilderpfade).
Sonst wird das nix.

[HennryGale]

Okay, verstehe.

Gut ich habe das ganze Slider Zeug aus der CSS raus gelöscht.

Meine "general.js.php" sieht nun so aus:

Code: PHP  [Auswählen]

<?php
/* -----------------------------------------------------------------------------------------
   $Id: general.js.php 1262 2005-09-30 10:00:32Z mz $

   XT-Commerce - community made shopping
   http://www.(( Wir dulden keine kommerziellen Werbelinks - Bitte Forenregeln beachten! ))

   Copyright (c) 2003 XT-Commerce
   -----------------------------------------------------------------------------------------
   Released under the GNU General Public License
   ---------------------------------------------------------------------------------------*/

   // this javascriptfile get includes at the BOTTOM of every template page in shop
   // you can add your template specific js scripts here

?>

<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.js" type="text/javascript"></script>
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/thickbox.js" type="text/javascript"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
        <script type="text/javascript" src="javascript/easySlider1.5.js"></script>
<script type="text/javascript">
        $(document).ready(function(){
                $("#featured> ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
        });
</script>

<script type="text/javascript" src="javascript/jquery.js"></script>
        <script type="text/javascript" src="javascript/easySlider1.5.js"></script>
        <script type="text/javascript">
                $(document).ready(function(){
                        $("#slider").easySlider();
                });
        </script>

Zum Verständnis: Alles was in der general.js.php steht wird praktisch später in den HTML Header eingebunden oder??? Weil bei den ganzen Jquery Anleitungen der Javacode ja immer in den Header geschrieben wird?

Meine Index Datei sieht nun so aus:

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="index"}
<div id="wrap">
    <div id="header">
        <div id="logo"><img src="{$tpl_path}img/spacer.gif" width="400" alt="{$store_name}" /></div>
        <div id="search">{$box_CART}</div>
    </div>
    <div id="topmenuwrap">
        <ul id="topmenu">
            <li><a href="{$index}">{#link_index#}</a></li>
           <li><a href="{$cart}">{#link_cart#}</a></li>
           {if $account}
            <li><a href="{$account}">{#link_account#}</a></li>
           {/if}
            {if $smarty.session.customers_status.customers_status_id == '1'}
            <li><a href="{php}echo xtc_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL');{/php}">{#new_customer#}</a></li>
           {/if}
            <li><a href="{$checkout}">{#link_checkout#}</a></li>
           {if $smarty.session.customer_id}
            <li><a href="{$logoff}">{#link_logoff#}</a></li>
           {else}
            <li><a href="{$login}">{#link_login#}</a></li>
           {/if}
        </ul>
        <div id="languages"><!--{$box_LANGUAGES}--></div>
    </div>
    <div id="breadcrumb">{$navtrail}</div>
    <div id="contentwrap"> {if !strstr ($smarty.server.PHP_SELF, 'checkout')}
       <!-- <div id="leftcol"></div>-->
       <div id="slider">
                        <ul>
                                <li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
                                <li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
                                <li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
                                <li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
                                <li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>
                        </ul>
                </div>
        {/if}
        <div
                {if !strstr ($smarty.server.PHP_SELF, 'checkout')}
                        id="content"
                {else}
                        id="contentfull"
                {/if}
                >
        {if strstr ($smarty.server.PHP_SELF, 'index')}
            {if $smarty.get.cPath==null and $smarty.get.manufacturers_id==''}
                 {if $BANNER}{$BANNER}{/if}
           {/if}
        {/if}
        {$main_content}</div>
    {if !strstr ($smarty.server.PHP_SELF, 'checkout')}
    <div id="rightcol">{$box_LOGIN}{$box_ADMIN}{$box_NEWSLETTER}{$box_BESTSELLERS}{$box_CATEGORIES}{$box_CONTENT}{$box_INFORMATION} {$box_LAST_VIEWED}{$box_REVIEWS}{$box_SPECIALS}<!--{$box_CURRENCIES}{$box_MANUFACTURERS_INFO}{$box_MANUFACTURERS}{$box_INFOBOX}{$box_ADD_QUICKIE}{$box_WHATSNEW}--></div>
    {/if} </div>
<p class="footer">{$smarty.const.TITLE} © {$smarty.now|date_format:"%Y"} | Template © 2009 by modified eCommerce Shopsoftware eCommerce Shopsoftware</p>
</div>

Hier auch wieder zum Verständnis: Wie wird das Jquery überhaupt aktiviert? Weil das ja nach ganz normalen HTML Code aussieht (habe das so von der EasySlider Anleitung übernommen). Fehlt da noch was oder wird das per CSS also #slider aktiviert?

Achja und das so in die Index zu kopieren wird wohl auch nicht so gut sein, da es jetzt der Slider ja auf jeder Page sichtbar ist. Aber für das Testen ist es jetzt ja erstmal egal oder? Eigentlich sollte das später dann nur auf der Startseite angezeigt werden. Das muss ich dann wohl später im Backend in den Content Manager kopieren?

Wäre super, wenn du mir aus der Patsche helfen kannst.
Danke!

[HennryGale]

Okay, mir ist schonmal ein Fehler aufgefallen:

Das Bilder einbinden war nicht korrekt. Habe die Zeilen die so aussahen:

Code: PHP  [Auswählen]

<li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>

Jetzt auf diese hier korrigiert:

Code: PHP  [Auswählen]

<li><a href="http://templatica.com/preview/30"><img src="{$tpl_path}images/01.jpg" alt="Css Template Preview" /></a></li>

Leider hab ich das Gefühl, dass das Script irgendwie nicht aktiviert wird??

EDIT: Mir ist noch etwas aufgefallen. Kann es sein, dass das Pfadproblem auch für das Javascript gilt?

Also muss ich statt das hier:

Code: Javascript  [Auswählen]

<script type="text/javascript" src="javascript/jquery.js"></script>
    <script type="text/javascript" src="javascript/easySlider1.5.js"></script>

lieber das hier verwenden:

Code: Javascript  [Auswählen]

<script type="text/javascript" src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>javascript/jquery.js"></script>
        <script type="text/javascript" src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>javascript/easySlider1.5.js"></script>

Dabei ist mir noch aufgefallen: Muss ich das jquery.js überhaupt zweimal laden/einbinden???

Und kann es sein, dass ich diesen Befehl:

Code: Javascript  [Auswählen]

        $(document).ready(function(){
                        $("#slider").easySlider();
                });    

.. auch irgendwie in den bereits standardmäßig vorhandenen general.js.php Code einbinden muss??

[web28]

In der general.js.php sind doch bereits Javascripte enthalten. Da sollte es doch klar sein, das man zusätzliche Dateien nach dem gleichen Schema einbindet!

Eingebunden sind:

Code: PHP  [Auswählen]

<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.js" type="text/javascript"></script>
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/thickbox.js" type="text/javascript"></script>

Zusätzliche Dateien packts Du in den "/javascript/" Ordner in deinem Template!

BEACHTE: die "jquery.js" wird schon geladen, deshalb KEINE weitere Datei ("jquery.min.js") einbinden.
Auch das Einbinden über http://ajax.googleapis.com/ajax/libs/ ist völliger Käse, weil zu langsam.
Downloade die Dateien und packe sie in Deinen "/javascript/" Ordner.

Du musst ja nur noch "easySlider1.5.js" NACH "jquery.js" einbinden.

Und der Rest wir natürlich so eingebunden:

Code: PHP  [Auswählen]

<script type="text/javascript">
<!--
        $(document).ready(function(){
        $("#slider").easySlider();
    });
//-->
</script>

[Modulfux]

[...]
Achja und das so in die Index zu kopieren wird wohl auch nicht so gut sein, da es jetzt der Slider ja auf jeder Page sichtbar ist. Aber für das Testen ist es jetzt ja erstmal egal oder?
[...]

Um dieses Problem zu umgehen, packst du das ganze in die "/templates/dein_template/module/main_content.html" und schon siehst du den Slider nur auf der Startseite.

Gruß
Ronny

[HennryGale]

Um dieses Problem zu umgehen, packst du das ganze in die "/templates/dein_template/module/main_content.html" und schon siehst du den Slider nur auf der Startseite.

Gruß
Ronny

okay danke!

Nur das mit dem "Slider sehen" haut noch nicht ganz hin Im Moment sehe ich jetzt einfach die 4 Bilder untereinander, aber der Slider funktioniert nicht..

[HennryGale]

So, habe es nun selbst gelöst.

Es hat einzig und alleine gefehlt, dass man folgenden Code:

Code: PHP  [Auswählen]

<script type="text/javascript">
                $(document).ready(function(){
                        $("#slider").easySlider();
                });
</script>

zusätzlich noch in der Datei "/includes/header.php" (WICHTIG: Im root Verzeichnis, also nicht bei /templates) einfügt.

=> Und dafür wollte mir tatsächlich jemand per PM 40€ abluchsen

[Tomcraft]

Ich habe natürlich keine Ahnung, wer die das per PM angeboten hat, aber vergesst bitte nicht, dass ihr nicht nur unsere Zeit, sondern auch unser KnowHow kauft, wenn ihr uns engagiert, denn da steckt meist vorher Entwicklungsarbeit drin.

Wenn ich eine Rechnung über 10€ schreibe, dann habe ich ja allein mit Anlegen des Kunden in der Wawi und der Buchung mehr Zeit verbraucht.

Grüße

Torsten

[web28]

So, habe es nun selbst gelöst.

Es hat einzig und alleine gefehlt, dass man folgenden Code:

Code: PHP  [Auswählen]

<script type="text/javascript">
                $(document).ready(function(){
                        $("#slider").easySlider();
                });
</script>

zusätzlich noch in der Datei "/includes/header.php" (WICHTIG: Im root Verzeichnis, also nicht bei /templates) einfügt.
[...]

Genau das habe ich doch 3 Postings höher beschrieben. 

Und diesen Code kann man sehr wohl in die "general.js.php" einfügen! (Wenn diese Datei im header geladen wird)

Gruss Web28

[HennryGale]

wow.. ich hatte deine Antwort völlig überlesen... Da probier ich noch weiter rum, dabei steht die Lösung schon im Thread  Naja, trotzdem vielen Dank für's Helfen!

[Shoryuken]

Hi,

also ich versuche zur Zeit den Nivo Slider zu installieren und bin auch schon so weit, dass wie beim User über mir die Bilder untereinander angezeigt werden.

Was hab ich bisher getan?

1. Diesen Code in die "general.js.php" kopiert:

Code: PHP  [Auswählen]

<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/css/no_javascript.css" type="text/css" media="screen" />
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

2. Diesen Code via dem Content Manager in die Index reinkopiert (über den Quellcode):

Code: PHP  [Auswählen]

<div id="slider">
        <img src="images/slide1.jpg" alt="" />
        <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
        <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
        <img src="images/slide4.jpg" alt="" />
</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>

3. Diesen Code auch in die "general.js.php" kopiert:

Code: PHP  [Auswählen]

<script type="text/javascript">
$(window).load(function() {
        $('#slider').nivoSlider();
});
</script>

4. Die CSS sowie die .js Dateien von dem Nivo Slider in die entsprechenden Ordner gepackt (javascript & css).

Leider habe ich wie gesagt nur die Bilder untereinander und nicht als Slider - was hab ich denn falsch gemacht? 

Gruß Ken

[MagicFire]

Versuche mal den Code zu löschen

Code: PHP  [Auswählen]

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

Gruß
MagicFire