jqZoom in Oxid Shop einbinden

HeidelBAR · October 16, 2010, 12:02am

[QUOTE=aggrosoft;40051]Ein bisschen anders schon, du hast nämlich einen Admin für die jqzoom Einstellungen für Leute die mit code nichts anfangen können/wollen und der Einbau ist etwas einfacher. Aber wer soweit mit templates und javascript zurecht kommt kann es locker wie in diesem thread beschrieben machen.[/QUOTE]

Funktioniert das Modul auch mit der CE - Edition des Shops?

… und welche Version des Ioncube Loaders braucht man z.B. auf einem 1&1 Server … bei uns wird dort angezeigt:
Linux infong 2.4 #1 SMP Wed Nov 4 21:12:12 UTC 2009 i686 GNU/Linux
… und auf der Ioncube Seite ( http://www.ioncube.com/loaders.php ) gibt es mehrere Loader für Linux.

Wäre mit dem „Oxid Zoom Picture Plus“ Modul das Problem, dass nur das erste Zoombild angezeigt wird automatisch behoben?

andre4 · October 18, 2010, 5:11pm

hallo zusammen,

habe auch jqzoom eingebaut und das selbe problem: nur das erste zoombild wird geladen.

ich habe in das oxid.js eine neue funktion eingefügt, die den pfad (zoomimage) für den <a href> austauscht. laut firebug wird der neue pfad auch korrekt eingefügt:

anbei der generierte code (aus firebug)

vor dem klick, wenn die seite neu geladen wurde:

nach klick auf das thumbnail:

leider wird wird trotzdem nur das “z1/ama_z1.jpg” gezoomt.

testweise habe ich diese zwei codeschnipsel in die default.tpl eingefügt > funktioniert.

wird das JS irgendwie gecached?

rubbercut · October 18, 2010, 6:41pm

Ich habe die Demoseite nochmal hochgeladen:

Ihr braucht eure Seite / DETAILS.TPL nur anzupassen:

http://www.premiereline.de/test.html

coarsy2 · October 19, 2010, 10:29pm

Hi Andre,

hast Du die Seite irgendwo on, damit man sich das mal ansehen kann?
Solltest Du multidimensionale Varianten verwenden, wird das Ganze etwas schwieriger.

Die Klicklinks müssen mit dem entsprechenden oxid.image oder am besten mit einer eigenen JQuery funktion abgegriffen werden.

Das Ganze sieht dann so aus:

JS nach dem JQ inkludiert:


function jqzoomimage(id, src){
	$("#" + id).attr('href', src);
}

function jqzoomlink(id, src){
	$("#" + id).attr('src', src);	
}

Die Links zum Umschalten der Bilder machst Du dann in der Schleife oder
einfach so:


  [{if $product->oxarticles__oxpic2->value != "2/nopic.jpg"}]
      	<a href="/out/pictures/z[{$product->oxarticles__oxpic1->value|substr:0:-4}]_z1.jpg" id="test_MorePics_1" rel="nofollow" onfocus="this.blur();" onclick="jqzoomlink('product_img[{$smarty.foreach.variants.iteration}]','/out/pictures/[{$product->oxarticles__oxpic1->value|substr:0:-4}].jpg'); jqzoomimage('jqzoom_image[{$smarty.foreach.variants.iteration}]','/out/pictures/z[{$product->oxarticles__oxpic1->value|substr:0:-4}]_z1.jpg');return false;"><img src="/out/pictures/[{$product->oxarticles__oxpic1->value|substr:0:-4}]_ico.jpg"></a>
				<a href="/out/pictures/z[{$product->oxarticles__oxpic2->value|substr:0:-4}]_z2.jpg" id="test_MorePics_2" rel="nofollow" onfocus="this.blur();" onclick="jqzoomlink('product_img[{$smarty.foreach.variants.iteration}]','/out/pictures/[{$product->oxarticles__oxpic2->value|substr:0:-4}].jpg'); jqzoomimage('jqzoom_image[{$smarty.foreach.variants.iteration}]','/out/pictures/z[{$product->oxarticles__oxpic2->value|substr:0:-4}]_z2.jpg');return false;"><img src="/out/pictures/[{$product->oxarticles__oxpic2->value|substr:0:-4}]_ico.jpg"></a>
     [{/if}]   
      [{if $product->oxarticles__oxpic3->value != "3/nopic.jpg"}]
				<a href="/out/pictures/z[{$product->oxarticles__oxpic3->value|substr:0:-4}]_z3.jpg" id="test_MorePics_3" rel="nofollow" onfocus="this.blur();" onclick="jqzoomlink('product_img[{$smarty.foreach.variants.iteration}]','/out/pictures/[{$product->oxarticles__oxpic3->value|substr:0:-4}].jpg'); jqzoomimage('jqzoom_image[{$smarty.foreach.variants.iteration}]','/out/pictures/z[{$product->oxarticles__oxpic3->value|substr:0:-4}]_z3.jpg');return false;"><img src="/out/pictures/[{$product->oxarticles__oxpic3->value|substr:0:-4}]_ico.jpg"></a>
      [{/if}]
      [{if $product->oxarticles__oxpic4->value != "4/nopic.jpg"}]
				<a href="/out/pictures/z[{$product->oxarticles__oxpic4->value|substr:0:-4}]_z4.jpg" id="test_MorePics_4" rel="nofollow" onfocus="this.blur();" onclick="jqzoomlink('product_img[{$smarty.foreach.variants.iteration}]','/out/pictures/[{$product->oxarticles__oxpic4->value|substr:0:-4}].jpg'); jqzoomimage('jqzoom_image[{$smarty.foreach.variants.iteration}]','/out/pictures/z[{$product->oxarticles__oxpic4->value|substr:0:-4}]_z4.jpg');return false;"><img src="/out/pictures/[{$product->oxarticles__oxpic4->value|substr:0:-4}]_ico.jpg"></a>
      [{/if}]

Entweder in die Schleife oder einfach so, wie ichs geposted hab. Je nachdem, was Du denn benötigst.

Beste Grüße vom Chris

rubbercut · October 19, 2010, 11:10pm

Ach nö, schönen Abend (falsch gelesen).

andre4 · October 26, 2010, 2:41pm

coarsy, vielen Dank.

Die JS Funktionen hatte ich schon in der oxid.js gehabt. Leider wurde immer nur das erste Zoomimage in die “Zoombox” geladen.

Jetzt habe ich in der jqzoom.js eine Zeile (ca 814) verändert und es funktioniert:

document.body.appendChild( this.node );
//this.node.src = this.url;
this.node.src = $(’#jqzoom_img’).attr(‘href’);

Schöne Grüße
andre4

Marek1234 · November 8, 2010, 2:14am

Ich bin leider IMMERNOCh net weiter…
http://www.kreator-terrorshop.com/MAENNER/Shirts/World-Tour-2009.html

hab die Seite nun angepasst an die testseite von rubbercut aber nix… leider immernoch das selbe…

Jemand einen Rat?

rubbercut · November 8, 2010, 9:33am

…ich hab`s gerade nochmal überflogen und vermisse

class="jqzoom5"

und ersetze bitte die jqzoom.pack.1.0.1.js auf Deinem Server mit folgender:

http://www.premiereline.de/domains/oxid431/javascript/jqzoom.pack.1.0.1.js
…

Marek1234 · November 8, 2010, 9:40am

Ja sorry. Ist ein live shop und ich hab deswegen den zoom rausgenommen. Nix desto trotz geht es auch mit dem tag nicht. Wenn ich in 1 std zuhause bin bau ich das mal wieder ein. Lg marek

coarsy2 · November 8, 2010, 9:49am

Hi, das gibts ja gar net

Probiere doch mal folgendes ans Ende zu setzen:



function jqzoomimage(id, src){
	$("#md_variant_box " + "#" + id).attr('href', src);
}

function jqzoomlink(id, src){
	$("#md_variant_box " + "#" + id).attr('src', src);	
}

Der Linkaufbau ist ja oben schon näher von mir beschrieben worden.

Allerbeste Grüße vom Chris

rubbercut · November 8, 2010, 9:56am

[QUOTE=Marek1234;43659]Ja sorry. Ist ein live shop und ich hab deswegen den zoom rausgenommen. Nix desto trotz geht es auch mit dem tag nicht. Wenn ich in 1 std zuhause bin bau ich das mal wieder ein. Lg marek[/QUOTE]

…es liegt definitiv an der JS-Datei. Tausche diese aus, trage die Klasse ein und gut ist…

Marek1234 · November 8, 2010, 11:09am

[QUOTE=rubbercut;43664]…es liegt definitiv an der JS-Datei. Tausche diese aus, trage die Klasse ein und gut ist…[/QUOTE]

hab ich gemacht. Ersetzt, klasse drin und tmp gelöscht und leider… NIX!

Ich mal die tpl-codes


<div class="picturezoombig">
<a id="jqzoom_image" class="jqzoom5" href="[{$product->getZoomPictureUrl($iZoomPic)}]" title="[{ $productTitle }]" name="demo1">
<img src="[{ $oView->getActPicture() }]" id="product_img" alt="[{$productTitle}]" /></a>
</div>

und die Auswahl…

<div class="product moredetails">
[{if $oView->morePics() }]
  
    <div class="morepics">[{assign var="cnt" value=0 }]
    [{foreach from=$oView->getIcons() key=picnr item=ArtIcon name=MorePics}]
    [{assign var=cnt value=$cnt+1 }]
        <a id="test_MorePics_[{$smarty.foreach.MorePics.iteration}]" rel="nofollow" href="[{ $product->getLink()|oxaddparams:"actpicid=`$picnr`" }]" onclick="oxid.image('product_img','[{$product->getPictureUrl($picnr)}]'); [{ if ($aZoomPics[$cnt].file) != ""}]jqzoomimage('jqzoom_image','[{$aZoomPics[$cnt].file}]');[{/if}]return false;"><img src="[{$product->getIconUrl($picnr)}]" id="change[{$picnr}]" alt="[{$cnt}]"></a>
    [{/foreach}]</div>
    
    [{/if}] 

</div>

Marek1234 · November 8, 2010, 11:12am

Ok, im Safari 5 (Mac) geht es! Im IE8(Win) und im FF 4.0b6(Mac & Win) (und auch die normale Stable Version) geht es nicht.

Komisch!

rubbercut · November 8, 2010, 12:05pm

…wie ich geschrieben habe:

ersetze bitte:

<script type="text/javascript" src="http://www.kreator-terrorshop.com/out/basic/src/jquery.jqzoom1.0.1.js"></script>

von mir aus zunächst mit

<script type='text/javascript' src='http://www.premiereline.de/domains/oxid431/javascript/jqzoom.pack.1.0.1.js'></script>

Ergebnis:

http://www.premiereline.de/test3.html

…

Marek1234 · November 8, 2010, 12:18pm

perfekt! das klappt!!! Danke dir sehr! Nun muss ich gucken wie ich die JS Datei zu mir bekommen

rubbercut · November 11, 2010, 11:06am

So, dann kann ich ja die Datei wieder vom Server nehmen.

webtek · October 14, 2012, 5:18pm

Hallo rubbercut oder alle anderen OXID eShop Freunde,

das ist hier zwar schon eine Weile her und habe das hier bis zu deinem Codschnipsel ausprobiert, der auch prima dafür sorgt das jetzt bei Artikeln mit mehreren Bildern, diese wieder klickbar sind und das Hauptbild dann auch entsprechend verändern.
Klicke ich aber nun sagen wir zum Beispiel das 3. Artikelbild an wird das Hauptbild also entsprechend verändert jedoch beim darauflegen des Mauszeigers wird wieder nur das 1. Bild im Zoomfenster angezeigt.
Kannst du oder jemand mir da noch mal weiterhelfen. Ich denke es ist vielleicht nur ein Kleinigkeit die im Code noch nicht stimmt.
Vielen Dank im Voraus.