MODUL: jQuery Navislider auf Basis des xtc5-Templates

[Modulfux]

Aufgrund der großen Nachfragen hier nun endlich der Navislider inklusive der Einbauanleitung.

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

Bei Fragen und Problemen stehe ich wie immer gern zur Verfügung.

Gruß
Ronny

[EDIT Tomcraft 15.09.2010: Modul aktualisiert.]
[EDIT Tomcraft 17.09.2010: Modul aktualisiert.]



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

[albersmann]

Vielen Dank. Nettes Tool.  

Grüße

Sven  

[GTB]

hast auch noch einen Screenshot dafür ?

Danke GTB.

[Modulfux]

Den Screenshot habe ich mit angehängt. Ich dachte aber, dass man gleich im Beitrag das Bild sehen kann.

[Modulfux]

So, selber eben noch einmal nach gemäß der Anleitung eingebaut und siehe da, da habe ich doch glatt vergessen, die jQuery-Funktion aufzurufen.

Hier die korrigierte Version. Vielleicht kann Torsten diese mit der originalen austauschen.

Gruß
Ronny

[EDIT Tomcraft 15.09.2010: Modul in Beitrag 1 aktualisiert.]

[guensi]

Na das werd ich doch gleich mal testen.

Kurze Frage, welchen Sinn hat der doppelte Aufruf der jquery.js in der general.js.php?

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/jquery-ui.js" type="text/javascript"></script>
<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>
 

Einmal vor und einmal nach der jquery-ui.js. Würde da ein Aufruf nicht reichen?

Edit: Hab grade eine tückische Falle in der Anleitung gefunden. Der Text bricht genau bei jquery-ui.js um, und zwar so, dass der - am Ende der Zeile steht. Beim Kopieren in meinen Editor (Textwrangler auf Mac OSX) wird der Bindestrich geschluckt, weil wohl eine Trennung vermutet wird. Muss nicht jeder Editor so handhaben, aber ein Hinweis in der Anleitung auf dieses Problem könnte nicht schaden.

[Tomcraft]

Den Screenshot habe ich mit angehängt. Ich dachte aber, dass man gleich im Beitrag das Bild sehen kann.

Danke für das Modul!

Den Screenshot habe ich nochmal eingefügt.

Grüße

Torsten

[Modulfux]

An den weltbesten Tester guensi. Da hat sich der Fehlerteufel in Form einer doppelten Zeile eingeschlichen. Logischerweise wird wird die jquery.js nur einmal aufgerufen.

Damit es keiner falsch einbaut, nochmal die Anleitung.
Ist mir ja schon fast peinlich, dass ich hier zu dämlich bin eine Anleitung zu schreiben.

Gruß
Ronny

[EDIT Tomcraft 15.09.2010: Modul in Beitrag 1 aktualisiert.]

[guensi]

Na, na, nur nicht übertreiben und gleich auch noch deinen Intellekt in Frage stellen. Genau dafür gibts ja diese Community. Testen, und dann ggfs. ergänzen oder korrigieren. Jeder hilft so gut er kann, und am Ende kommt dann was Komplettes dabei raus. Das schmälert die Leistung des eigentlichen Modul-Bastlers in keinster Weise.

Mein aktuelles Einbauergebnis ist jedoch leider negativ. Der Slider erscheint nicht. Aber, meine aktuelle Testumgebung weist auch deutliche Änderungen zur xtc5 auf. Von daher kein Grund zum Alarm. Dass es im Standard-Template funktioniert setze ich nach der Testphase voraus. Werde das jetzt erst mal auf Eis legen, sollte ich mal wieder Zeit für eine "schön wäre es, die zu haben-Eigenschaft" (denglisch = nice to have feature) haben, werde ich mich dem Problem nochmal intensiv annehmen und den Fehler in meiner Konstellation ermitteln.

Ach ja eines fällt mir zur Anleitung noch ein: Die Code-Texte in blau dargestellt ist ein guter Ansatz, aber muss es unbedingt hell- oder mittelblau sein? Dunkelblau wäre deutlich besser lesbar.

[DanceOnTop]

Hallo
bei mir sieht es so aus und garnicht nach dem Navi Slider hier der Link zum Shop
SHOP

vielleicht liegt es an der general.js weil da glaube ich etwas falsch zu machen hier ist Sie.

Code: Javascript  [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 <a href="index.php?topic=3013.0">Forenregeln</a> 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/jqueryui.
js" type="text/javascript"></script>
<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 src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.mousewheel.js" type="text/javascript"></script>
<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>
        <!-- Products-Treadmill (c)2008 by Hetfield - www.MerZ-IT-SerVice.de - Begin -->
        <link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/treadmill.css" type="text/css" media="screen" />
        <script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.easing.1.3.js" type="text/javascript"></script>
        <script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jcarousellite_1.0.1.pack.js" type="text/javascript"></script>
        <script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/products_treadmill.js" type="text/javascript"></script>
        <?php
                if (SHOW_PRODUCTS_TREADMILL_POSITION == 'box') {
                        require(DIR_WS_MODULES . FILENAME_PRODUCTS_TREADMILL);
                }
        ?>
        <!-- Products-Treadmill (c)2008 by Hetfield - www.MerZ-IT-SerVice.de - End -->
<!-- Imageslider (c)2008 by Hetfield - www.MerZ-IT-SerVice.de - Begin -->
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.innerfade.js" type="text/javascript"></script>
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/imageslider.js" type="text/javascript"></script>
<!-- Imageslider (c)2008 by Hetfield - www.MerZ-IT-SerVice.de - End -->

<?php// BOF - web28 - 2010-07-09 - TABS/ACCORDION in product_info ?>
<?php
if (strstr($PHP_SELF, FILENAME_PRODUCT_INFO )) {
?>
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
        $(function() {
                $("#tabbed_product_info").tabs();
                $("#accordion_product_info").accordion({ autoHeight: false });
        });
</script>
<noscript>
        <link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/css/no_javascript.css" type="text/css" media="screen" />
</noscript>
<?php
}
?>
<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jqzoom.css" type="text/css" media="screen" />
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jqzoom.pack.1.0.1.js" type="text/javascript"></script>
<?php// EOF - web28 - 2010-07-09 - TABS/ACCORDION in product_info ?>
 

Gruß
danceontop

[hedon02]

Hallo Webkiste,

vielen Dank für die Veröffentlichung des tollen Sliders.
Sie verwenden offensichtlich eine andere jquery-ui.js als im xtc5 Shop installiert ist (hier: jquery-ui-1.8.2.custom.min.js). Die easeoutexpo Option steht in der xtc5 jquery nicht zur Verfügung, weshalb ich den Slider nicht von der Stelle bewegen kann.  

Lg

[hedon02]

P.S. Danceontop, Sie haben jqueryui.js anstelle von jquery-ui.js geschrieben. Deswegen wahrscheinlich keine Anzeige des Sliders.

[guensi]

Hab doch noch mal etwas am Einbau weiter gebastelt, hat mir keine Ruhe gelassen.  

Dabei ist mir folgendes in der Anleitung aufgefallen:

Sollte im Topmenü ein Link sein, der auf eine shop_content.php – Seite zeigt, zum Beispiel das  Kontaktformular (shop_content.php?coID=7), so muss diese Zeile folgenden Aufbau haben:

Code: PHP  [Auswählen]

<li{php} echo $selected = ($cur_link=='shop_content.php' and $id=='7') ? '
id="selected"' : ''; {/php}><a href="{php}echo xtc_href_link(FILENAME_CONTENT,  'coID=7');{/php}">
{#link_contact#}</a></li>
 

Das funktioniert aber nur, wenn für die jeweiligen Content-Seiten der Link nicht hardcoded gesetzt wurde, sondern in der lang_german.conf im Abschnitt [index] (ca. ab Zeile 425) auch entsprechend eingetragen wurde.
Also bei obigem Beispiel muss dort stehen:
link_contact = 'Kontakt'

Das ganze muss dann auch für jede weitere Content-Seite entsprechend gemacht werden, die im Top-Menue verlinkt wird.

Ein Hinweis darauf sollte in die Anleitung aufgenommen werden.

________

Nun, zum Stand meines Einbauversuches: Der Slider funktioniert noch nicht.
Fortschritt: Er erscheint zumindest bei den verlinkten Content-Seiten als einzelner Strich, zwar an der falschen Position, aber er ist immerhin schon mal statisch da, wenn die Seite aufgerufen ist.

Bei den Standardseiten erscheint er jedoch nicht. Dafür gibts folgende Fehlermeldung laut Firebug:
currentPageItem.position() has no properties
[Break on this error] left : currentPageItem.position().left,

Der Fehler bezieht sich auf Zeile 21 der jquery.spasticNav.js.

Code: Javascript  [Auswählen]

13 var nav = $(this),
14 currentPageItem = $('#selected', nav),
15 blob,
16 reset;
17
18 $('<li id="blob"></li>').css({
19 width : currentPageItem.outerWidth(),
20 height : currentPageItem.outerHeight() + options.overlap,
21 left : currentPageItem.position().left,
22 top : currentPageItem.position().top - options.overlap / 2,
23 backgroundColor : options.color
24 }).appendTo(this);

Die hier gesuchte Postitionsangabe ist wohl nicht vorhanden oder könnte durch eine Kollision mit anderen Angaben in meinem CSS außer Kraft gesetzt sein. Das muss ich wohl mal noch näher untersuchen.

Oder kann mir da jemand einen Hinweis geben, wo der Bock sitzen könnte?

[guensi]

Gerade gefunden: Fehler in der Anleitung beim Einbau der Hintergrundbilder in der stylesheet.css

Die Angabe der Bilder erfolgt mit ' ', im CSS werden die jedoch generell ohne ' ' angegeben.

Code: CSS  [Auswählen]

background-image:url('img/blob.png');

muss also so aussehen:

Code: CSS  [Auswählen]

background-image:url(img/blob.png);

Das gilt für alle Bildangaben in den Änderungen der stylesheet.css.

[guensi]

Code: Javascript  [Auswählen]

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

Da ist noch der doppelte jquery-Aufruf drin, dafür fehlt die jquery.spasticNav.js. Dazu kommt noch der bereits benannte Bindestrich-Fehler. So müsste das aussehen:

Code: Javascript  [Auswählen]

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

EDIT: Abgesehen davon wird die jquery.js etwas weiter unten nochmal aufgerufen, das ist unnötig. Die Zeile kann raus.