Magic Zoom und/oder jQZoom für modified eCommerce Shopsoftware

[bellagio]

Habs selbst rausbekommen, hatte die falsche Datei benutzt.

"thickbox.js" Datei muss verwendet werden.

[armandogarcia]

Hallo,

habe das Modul installiert und es funktioniert in Safari, Mozilla und IE8 einwandfrei, ich bedanke mich an dieser Stelle noch einmal! Das ist genial!

Aber was ganz Wichtig ist...

Wie sieht es jetzt mit den moreimages aus, diese sind ja sehr wichtig, da ich z. B. pro Produkt drei Ansichten habe (Vorder, Seit und Rückansicht) weiss jemand wie man das realisieren kann dass wenn man eins der kleinen pics unten anklickt Sie sich oben erscheinen und dann auch gezoomt werden kann. Hab den Zoom bei den kleinen abgeschalten.

Ich würde auch gerne unterdrücken dass sich die das Bild bei klick öffnet, da es doppelt eigentlich stört, was haltet Ihr davon? Meine Meinung ist entweder Lupe oder "Popup", wie kann ich das in der Product_Info einstellen?

Vielen Dank

Armand

[speedy]

Ich würde sagen, alles was du machen musst wäre das mit der Thickbox aus

Code: PHP  [Auswählen]

<a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" class="thickbox" rel="{$PRODUCTS_ID}">

zu entfernen.

[armandogarcia]

Hi Speedy,

Danke, kannst ja mal reinschauen, hat geklappt. Jetzt muss nur noch eine Lösung für die moreimages gefunden werden dann ist das Modul perfekt damit es dann so wie hier aussieht
http://www.professorcloud.com/mainsite/cloud-zoom.htm

vielleicht schafft das ja jemand.

Grüße

Armando

[DefCon2k]

Hi Jungs,

habe eben mal an dem Cloud-Zoom herum geschraubt, und wie es aussieht, eine brauchbare Lösung gefunden. Funktionell ist es das gleiche wie MagicZoom.

Da ich noch unterwegs bin, kann ich die Änderungen allerdings erst im Laufe des späten nachmittags posten.
Wäre cool, wenn der ein oder andere vielleicht mein Ergebnis auch mal testen könnte (habe es momentan nur in IE und FF getestet)?!

Und last, but not least müsste man sich um etwas grundlegendes Gedanken machen: die stylesheet.css des Templates und das cloud-zoom-Script beinhalten eine ID names "wrap".
Die Frage ist nun, wo diese ID umbenannt werden sollte, damit es richtig funktioniert, im Template- Stylesheet oder im Script?
Beides würde Änderungen nach sich ziehen. Wenn z.b. das Template-CSS geändert wird, reicht es, die ID in der index.html umzubenennen und das Javascript unangetastet zu lassen (sinnvoll für Updates des Scriptes), oder sollte man besser das Javascript und dessen CSS anpassen, welches dann bei Erscheinen einer neuen Version immer erst angepasst werden müsste, bevor es funktioniert?!

Wie gesagt, ich werde die Änderungen posten, sobald ich zu hause bin.

Gruß Tobi

[DefCon2k]

Servus,

habe meine "geistigen" Ergüsse mal hoch geladen: MODUL: Cloud Zoom als Alternative zu MagicZoom


Ich habe mich momentan für die Variante mit der Änderung des Template-Styleshhets entschieden (siehe vorheriger Post von mir).

Es darf getestet werden  

Gruß Tobias

[gar85]

Habe mit jqzoom noch ein Problem mit der Tab-Darstellung in modified eCommerce Shopsoftware 1.05

Bei product_info_v1 funktioniert es, aber mit product_info_tabs_v1 kommt nur "loading zoom", zudem wird die Zeile "Bild vergrößern" beim Produktbild auf die Trennlinie zu den Attributen geschrieben und im Tab "mehr Bilder" werden die Bilder untereinander statt nebeneinander angeordnet.

Die zusätzlichen Bilder werden bei product_info_v1 auch untereinander geschrieben, ebenso "Bild vergrößern" verschoben.

Bei den zusätzlichen Produktbildern (beide Module) verliert die Lupe nach dem 2. Bild die Bildposition, zeigt nur noch Fragmente des Bildes drüber/drunter an.

 

Gruß
Klaus

[gabto]

Naja, jetzt nicht so das Hexenwerk.

jQZoom runterladen und entpacken.

css/jqzoom.css öffnen und

Code: CSS  [Auswählen]

   background-image: url(../images/zoomloader.gif);

ändern in

Code: CSS  [Auswählen]

   background-image: url(../img/zoomloader.gif);

Das Bild images/zoomloader.gif nach templates/xtc5/img/ hochladen, css/jqzoom.css und js/jqzoom.pack.1.0.1.js nach templates/xtc5/javascript/ (das css hat da zwar eigentlich nichts verloren, aber es scheint bei modified eCommerce Shopsoftware so üblich zu sein, dass da keine wirklich Ordnung drin ist, siehe Thickbox).
templates/xtc5/javascript/general.js.php öffnen und am Ende einfügen:

Code: XML  [Auswählen]

<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>

templates/xtc5/javascript/thickbox.js öffnen und nach

Code: Javascript  [Auswählen]

        imgLoader.src = tb_pathToImage;

einfügen:

Code: Javascript  [Auswählen]

        var options = {
                xOffset: 20,
                yOffset: 0,
                zoomType: 'reverse'
        }
        $('.jqzoom').jqzoom(options);

Das Produkttemplate (normalerweise templates/xtc5/module/product_info/product_info_v1.html) öffnen und alle

Code: XML  [Auswählen]

class="thickbox"

durch

Code: XML  [Auswählen]

class="thickbox jqzoom"

ersetzen.

Mit den Optionen für jQZoom kann man natürlich spielen wie man lustig ist.

Fertig.

Hallo,

ich weiss wirklich nicht was ich falsch gemacht habe, ich bekomme das Ding nicht zum Laufen, habe alle Änderungen gemacht aber es passiert einfach gar nichts.

Um sicher zu gehen, dass ich den Code richtig eingefügt habe, poste ich die von gemachten Änderungen:
templates/xtc5/javascript/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/thickbox.js" type="text/javascript"></script>

<?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 ?>
 

templates/xtc5/javascript/thickbox.js

Code: PHP  [Auswählen]

//on page load call tb_init
$(document).ready(function(){
        tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox
        imgLoader = new Image();// preload image
        imgLoader.src = tb_pathToImage;
});

var options = {
    xOffset: 20,
    yOffset: 0,
    zoomType: 'reverse'
}
$('.jqzoom').jqzoom(options);
 

Für etwaige Hilfe wäre ich sehr dankbar.

Grüße

[gabto]

Ich sehe gerade, dass ich die Datei

Code: Javascript  [Auswählen]

jqzoom.pack.1.0.1.js

im javascript Ordner nicht habe, sondern

Code: Javascript  [Auswählen]

jquery.jqzoom-core.js, jquery.jqzoom-core-pack.js und jquery-1.6.js

Könnte es daran liegen, dass das Ganze bei mir nicht funktioniert?

Vielen Dank im Voraus

[baileys]

Hallo,

ich habe mal eine Frage zum Bildwechsel. jQZoom an sich läuft bei mir. Nur soll das Zoomen nur für das Hauptbild in der Produktinfo möglich sein. Bei Klick auf ein weiteres Produkt-Vorschaubild, soll das Produkthauptbild ersetzt werden. So wie es bei der Demo --> http://www.mind-projects.it/projects/jqzoom/demos.php#demo1 ist.

Wie muss denn der folgenden Code für das Template angepasst werden?

Mehrere Bilder:

Code: PHP  [Auswählen]

<ul id="thumblist" class="clearfix" >
     <li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small1.jpg',largeimage: './imgProd/triumph_big1.jpg'}"><img src='imgProd/thumbs/triumph_thumb1.jpg'></a></li>
     <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small2.jpg',largeimage: './imgProd/triumph_big2.jpg'}"><img src='imgProd/thumbs/triumph_thumb2.jpg'></a></li>
</ul>
 

Hauptbild:

Code: PHP  [Auswählen]

<a href="imgProd/triumph_big1.jpg" class="jqzoom" rel='gal1'  title="triumph" >
    <img src="imgProd/triumph_small1.jpg"  title="triumph" >
</a>
 

Hab schon im Netz und Forum überall geschaut, aber so richtig werde ich nicht schlau. Hoffe ihr könnt mir helfen.

LG baileys

[bludie]

jQZoom funktioniert auch mit Fancy

Ich habe in unserem Shop aufgrund der schöneren Darstellung thickbox durch fancy ersetzt. Beim Einbau von jQZoom hatte ich da natürlich das Problem der js Code Zeilen die man in die thickbox.js eintragen soll. Da ich selber kein Javascript Programmierer bin, habe ich die Code Zeilen aus der Datei  demo_standard.html genommen, hier:

Code: PHP  [Auswählen]

<script type="text/javascript">
$(document).ready(function() {
        $('.jqzoom').jqzoom({
            zoomType: 'standard',
            lens:true,
            preloadImages: false,
            alwaysOn:false
        });

});
</script>
 

und diese am Ende der general.js.php eingefügt. Klappt optimal, Fancy wie auch jQZoom

[rattenfänger]

jQZoom funktioniert auch mit Fancy

Ich habe in unserem Shop aufgrund der schöneren Darstellung thickbox durch fancy ersetzt. Beim Einbau von jQZoom hatte ich da natürlich das Problem der js Code Zeilen die man in die thickbox.js eintragen soll. Da ich selber kein Javascript Programmierer bin, habe ich die Code Zeilen aus der Datei  demo_standard.html genommen, hier:

Code: PHP  [Auswählen]

<script type="text/javascript">
$(document).ready(function() {
        $('.jqzoom').jqzoom({
            zoomType: 'standard',
            lens:true,
            preloadImages: false,
            alwaysOn:false
        });

});
</script>
 

und diese am Ende der general.js.php eingefügt. Klappt optimal, Fancy wie auch jQZoom

würdest du bitte eine kurze Anleitung bringen? Ich habe auch fancybox installiert, aber bringe das ganze nicht zum Laufen.

[peterpan19]

Hallo, lässt sich so etwas oder auch jQZomm in der product_listing_v1.html einbauen?
Quasi Vorschau schon in der Produktübersicht.
Gruß

[Tȟatȟáŋka Íyotake]

Hilft das weiter:

http://www.modified-shop.org/forum/index.php?topic=7650.0

http://www.modified-shop.org/forum/index.php?topic=4310.0

Grüße,

[peterpan19]

Hallo Markkk,

ich habe Cloud Zoom bereits (aber derzeit inaktiv) und das funktioniert auch einwandfrei. Aber auch in den zwei Links habe ich nichts über den Einbau in der "product_listing_v1.html" gefunden. Der Code lässt sich leider nicht ohne weiteres in die product_listing_v1.html einbauen, die Aufrufe sind etwas anders. Leider reichen dazu meine Programmierkenntnisse nicht aus 
Gruß