MODUL: Fancybox für modified eCommerce Shopsoftware (ThickBox Alternative/Ersatz)

[flth]

Hallo,

da die ThickBox ja nicht mehr weiterentwickelt wird, habe ich modified eCommerce Shopsoftware 1.05 mal umgebaut auf die Fancybox. Vielleicht nicht jedermanns Geschmack, aber das Anleitung kann ja mit ein wenig Bastelei auf jede Javascript anpassen die mit jQuery läuft.

Anleitung hier oder in der angehängten Datei (inkl. der Dateien)

Angaben ohne Gewähr, Änderungen auf eigenes Risiko!

Wenn im folgenden TEMPLATE angegeben ist, dies immer durch das gewünschte Template ersetzen (z.B. standardmäßig "xtc5")

Öffne Datei
templates/TEMPLATE/module/product_info_v1.html

finde (ca. Zeile 9)

Code: PHP  [Auswählen]

<a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" class="thickbox" rel="{$PRODUCTS_ID}"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productimage" />{if $PRODUCTS_POPUP_LINK!=''}<br/>{#text_zoom#}{/if}</a>

und ersetze mit

Code: PHP  [Auswählen]

<a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" class="fancy" rel="{$PRODUCTS_ID}"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productimage" />{if $PRODUCTS_POPUP_LINK!=''}<br />{#text_zoom#}{/if}</a>

Öffne Datei
templates/TEMPLATE/module/product_info_x_accordion_v1.html

finde (ca. Zeile 9)

Code: PHP  [Auswählen]

<a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" class="thickbox" rel="{$PRODUCTS_ID}"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productimage" />{if $PRODUCTS_POPUP_LINK!=''}<br/>{#text_zoom#}{/if}</a>

und ersetze mit

Code: PHP  [Auswählen]

<a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" class="fancy" rel="{$PRODUCTS_ID}"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productimage" />{if $PRODUCTS_POPUP_LINK!=''}<br />{#text_zoom#}{/if}</a>

Öffne Datei
templates/TEMPLATE/module/product_info_tabs_v1.html

finde (ca. Zeile 9)

Code: PHP  [Auswählen]

<a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" class="thickbox" rel="{$PRODUCTS_ID}"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productimage" />{if $PRODUCTS_POPUP_LINK!=''}<br/>{#text_zoom#}{/if}</a>

und ersetze mit

Code: PHP  [Auswählen]

<a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" class="fancy" rel="{$PRODUCTS_ID}"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productimage" />{if $PRODUCTS_POPUP_LINK!=''}<br />{#text_zoom#}{/if}</a>

Öffne Datei
templates/TEMPLATE/javascript/general.js.php

finde (ca. Zeile 18)

Code: PHP  [Auswählen]

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

und ersetze es mit

Code: PHP  [Auswählen]

<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.fancybox-1.3.2.pack.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
        $(document).ready(function() {
                $("a.fancy").fancybox({
                        'padding' : 2,
                        'easingIn' : 'transition',
                        'easingOut' : 'transition'
                });
        });
        function getGroupItems(opts) {
                jQuery.each(imageList, function(i, val) {
                opts.itemArray.push(val);
            });
        }
//-->
</script>

Öffne Datei
templates/TEMPLATE/css/general.css.php

finde (ca. Zeile 16)

Code: PHP  [Auswählen]

<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/css/thickbox.css" type="text/css" media="screen" />

und ersetze es mit

Code: PHP  [Auswählen]

<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/css/jquery.fancybox-1.3.2.css" type="text/css" media="screen" />

Öffne Datei
includes/classes/main.php

finde ca. Zeile 50

Code: PHP  [Auswählen]

return ' '.SHIPPING_EXCL.' <a target="_blank" href="'.xtc_href_link(FILENAME_POPUP_CONTENT, 'coID='.SHIPPING_INFOS.'&KeepThis=true&TB_iframe=true&height=400&width=600').'" title="Information" class="thickbox">'.SHIPPING_COSTS.'</a>';

und ersetze es mit

Code: PHP  [Auswählen]

return ' '.SHIPPING_EXCL.' <a target="_blank" href="'.xtc_href_link(FILENAME_POPUP_CONTENT, 'coID='.SHIPPING_INFOS.'').'" title="'.SHIPPING_COSTS.'" class="fancy">'.SHIPPING_COSTS.'</a>';

Lösche die Dateien
templates/TEMPLATE/javascript/thickbox.js
templates/TEMPLATE/css/thickbox.css

und lade die beiliegenden Dateien hoch
es werden keine Standarddateien überschrieben

templates/TEMPLATE/javascript/jquery.fancybox-1.3.2.pack.js
templates/TEMPLATE/css/jquery.fancybox-1.3.2.css

und den Ordner
templates/TEMPLATE/img/

Fertig!
Für Optionen der Fancybox (anzugeben in der general.js.php) die Webseite Fancybox - Fancy jQuery lightbox alternative befragen.

Grüße

Florian

PS: Ups, Datei zweimal hochgeladen... ich hatte die Installationsanleitung nochmal geändert und die Zeilen

Code: Javascript  [Auswählen]

                        'zoomSpeedIn' : 900,
                        'zoomSpeedOut' : 800,

rausgenommen... ansonsten keine Änderung

Alternative Version von shopmudules (fancybox_install.zip):

Hallo zusammen,
ich kann mich irren, aber kann es sein, dass hier einfach zu viel des Guten gemacht wird? Ich habe mal eine Anleitung angehängt und da geht es dann superschnell mit der Integration der Fancybox.
Ich möchte die bisherige Arbeit nicht schlecht reden, sondern wollte viel mehr einen schnelleren Ansatz präsentieren.
Ich kann mich natürlich enorm irren.

Gruß aus Kyritz

Kerim

Alternative Version von web28 (Fancybox_1.01.zip):

Fancybox für modified eCommerce Shopsoftware 1.05 SP1

• Austausch der Thickbox gegen Fancybox ohne Änderung der Coredateien
• Unterstützung der Thickbox URL Parameter (IFrame, width, height)
• Mousewheelfunktion für Bildergalerien (Bilder werden durch das Mausrad weitergeschaltet)

Die Fancybox kann aber auch in ältere Versionen eingebaut werden!

Gruss Web28

[EDIT Tomcraft 30.10.2010: doppelten Anhang entfernt.]
[EDIT Tomcraft 31.10.2010: Modul auf Version 1.1 aktualisiert, Danke an flth.]
[EDIT Tomcraft 31.10.2010: Modul auf Version 1.2 aktualisiert, Danke an flth.]
[EDIT Tomcraft 31.10.2010: Modul auf Version 1.3 aktualisiert, Danke an flth.]
[EDIT Tomcraft 31.10.2010: Modul auf Version 1.3a aktualisiert, Danke an flth.]
[EDIT Tomcraft 31.10.2010: Modul auf Version 1.3b aktualisiert, Danke an flth.]
[EDIT Tomcraft 31.10.2010: Modul auf Version 1.4 aktualisiert, Danke an flth.]
[EDIT Tomcraft 08.11.2010: Modul auf Version 1.5 aktualisiert, Danke an flth.]
[EDIT Tomcraft 16.06.2010: Alternative Version von shopmodules angehängt.]
[EDIT Tomcraft 29.10.2011: Alternative Version von web28 angehängt.]
[EDIT Tomcraft 30.10.2011: Fehler in Modul von web28 korrigiert, Danke an Halli für den Hinweis.]
[EDIT Tomcraft 03.11.2011: Modul von web28 aktualisiert, Danke an jannemann.]

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

[Tomcraft]

Ganz lieben dank für diese tolle Erweiterung, die sicherlich viele haben wollen! Selbst wir hatten schon überlegt, ob wir die ThickBox gegen die Fancybox langfristig austauschen. Mal schauen, was die Zukunft bringt.

Grüße

Torsten

[gelbor1]

Super echt, finde die Effekte echt toll:D.

[Modulfux]

Die Fancybox verwende ich in all meinen Kundenprojekten, weil ich die Thickbox schon immer häßlich fand. Mit der Fancybox erhält man einen ähnlichen Effekt, wie man ihn vom Mac keent.

Leider ist die obige Anleitung nur zu 75% vollständig. Denn die Klasse "thickbox" kommt noch in anderen Dateien vor und sollte dort auch dementsprechend noch abgeändert werden.

Gruß
Ronny

[web28]

Mit der Thickbox wird u.a. auch der Versandkostenlink beim Produkt geöffnet.

Leider muss man bei der fancybox das ziemlich umständlich hinfummeln, da man keine Parameter für die Fenstergröße übergeben kann.

[flth]

Hier kommt Version 1.1
Wegen der Größe bei Textboxen habe ich leider auch noch keine Lösung....

Gruß
Florian

Hier kommt noch ein Bild

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

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

[flth]

Und hier ist Version 1.2
Änderungen:
main.php eine weitere Zeile geändert
Anleitung korrigiert

Viel Spaß damit

Florian

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

[h-h-h]

Hi Florian,
nach der Version 1.1 hab ich mir schon gedacht, nächste Woche gibt’s die Version 2.0.  
Trotzdem vielen Dank für die Bereitstellung des Moduls.

Gruß h-h-h

[flth]

War ein wenig spät gestern Aber Version 2.0 kommt bestimmt noch, vielleicht mit Auswahl der zu verwendenden Box

Florian

[Ronja]

Hi Ihr,

die Größe der Versandkostenbox (sowie anderer) läßt sich ganz einfach bestimmen, in dem man die Inhalte im Content Manager einfach in ein div legt.

Also z.B.

Code: PHP  [Auswählen]

<div style="width: 600px; height: 400px;">F&uuml;gen Sie hier Ihre Informationen &uuml;ber Liefer- und Versandkosten ein.</div>

Liebe Grüße
Ronja

[Ronja]

Hi,

ich nochmal.

Mir hat das keine Ruhe gelassen mit den Versandkosten/Help-Popups.

In der general.js.php einfach bei den Fancybox-Definitionen noch folgendes hinzufügen (und nach Bedarf anpassen).

Code: PHP  [Auswählen]

$(".rest").fancybox({
                                'autoDimensions'    : false,
                                'autoScale'         : false,
                                'width'             : 600,
                                'height'            : 'auto',
                                'titlePosition'     : 'outside',
                                'transitionIn'      : 'none',
                                'transitionOut'     : 'none'
                            });

Die Höhe läßt sich leider nicht wirklich einstellen, das scheint nach meinen Recherchen ein bug in der derzeitigen Version zu sein. Sie paßt sich dann aber automatisch dem Inhalt an.

In der classes/main.php, modules/oder_details_cart.php und der modules/advanced_search.php die Klassen der entsprechenden Links noch ändern auf

Code: PHP  [Auswählen]

class="rest"

ändern.

Gruß Ronja

[hansano]

Vielen Dank, es funktioniert....nach kleinen Änderungen(css img/Pfade)

[AEOne]

Erst mal danke für das Modul.
Habe es auch mal eingebaut und es funktioniert auf (fast) perfekt.

Allerdings kriege ich es nicht hin, dass sich die Fancybox öffnet, wenn ich mich im Warenkorb befinde und von dort die Versandkosten aufrufen möchte. Die Fancybox fängt zwar an, bleibt aber beim drehenden Ladekreis hängen und öffnet sich nicht.
Woran könnte das liegen?

Danke + Gruß AEOne (mein Shop)

[flth]

Hallo,

nun bin ich wieder zu Hause, mein Rechner, nun habe ich wieder Durchblick Deshalb kommt hier die Version 1.3  mit den Ergänzungen von Ronja.
Anleitung bitte beachten, es sind noch einige Dateien und Stellen hinzugekommen, das ist nun aber komplett. Außerdem fehlte in der main.php ein Anführungszeichen für Zeile 102, bitte ebenso nochmal kopieren

@AEOne
Letzteres sollte dein Problem beheben.

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

[andrusch]

Auch von mir vielen Dank für deine Arbeit und das bereitstellen!
Ist ja fast wie bei Chrome, jede 1-2 Stunden ein Update