jqZoom in Oxid Shop einbinden

HeidelBAR · July 5, 2010, 4:14pm

Hallo zusammen,

ich bin gearde dabei, das Tool [B]jqZoom[/B] ( http://www.mind-projects.it/projects/jqzoom/) in meinen Oxid-Shop einzubinden … und hab dort aber ein paar Probleme.

Der Aufruf der JS- und CSS-Scripte erfolgte in der [I][B]header.tpl[/B][/I] entsprechend der Anleitung für:


<script type='text/javascript' src='js/jquery-1.2.6.js'></script>
<script type='text/javascript' src='js/jquery.jqzoom-1.0.1.js'></script>
<link rel="stylesheet" type="text/css" href="css/jqzoom.css" />

Meine [B][I]header.tpl[/I][/B] sieht dann so aus:


<link rel="shortcut icon" href="[{$oViewConf->getImageUrl()}]favicon.gif">
<link rel="stylesheet" type="text/css" href="[{ $oViewConf->getResourceUrl() }]oxid.css">
fxGallery.css">
<link rel="stylesheet" type="text/css" href="[{ $oViewConf->getResourceUrl() }]jqzoom.css">
<link rel="stylesheet" type="text/css" href="[{ $oViewConf->getResourceUrl() }]jquery-ui/css/dark-hive/jquery-ui-1.7.2.custom.css">
<script type="text/javascript" src="[{ $oViewConf->getResourceUrl() }]jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="[{ $oViewConf->getResourceUrl() }]jquery-ui/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="[{ $oViewConf->getResourceUrl() }]jquery.carousel.js"></script>
<script type="text/javascript" src="[{ $oViewConf->getResourceUrl() }]fxGallery.js"></script>
<script type="text/javascript" src="[{ $oViewConf->getResourceUrl() }]jquery.simpletip-1.3.1.js"></script>
<script type="text/javascript" src="[{ $oViewConf->getResourceUrl() }]jquery.jqzoom-1.0.1.js"></script>
<script type="text/javascript" src="[{ $oViewConf->getResourceUrl() }]general.js"></script>

Also alle Scripte werden schonmal geladen … in der [B][I]details.tpl[/I][/B] habe ich dann im Quellcode eingetragen:


<div class="picture">
<a class="jqzoom" href="[{$product->getZoomPictureUrl($iZoomPic)}]" title="[{ $productTitle }]" id="product_image_link">
<img id="product_img" src="[{ $oView->getActPicture() }]" alt="[{$productTitle}]" />
</div>

Das ArtikelBild wird auch richtig angezeigt aber es erscheint keine ZoomBox … nur beim Klick auf das Artikelbild wird dann das große Bild aufgerufen …

Was mache ich falsch bzw. wer hat eine Anleitung zum Einbinden von [B]jqZoom[/B] in einen Oxid-Shop?

tvtotal · July 5, 2010, 5:32pm

Hi,

ich habe auch diese Gratis-Version von Cutty bekommen. Bei mir ist die Einstellung etwas anders:

<a id="jqzoom_image" class="jqzoom5"

BR

tvtotal

HeidelBAR · July 5, 2010, 9:12pm

[QUOTE=tvtotal;35043] … Bei mir ist die Einstellung etwas anders:[/QUOTE]

Erst mal vielen Dank für die Info … und “Schande” über mich …

Meine Einstellungen waren eigentlich soweit richtig … ich hatte nur im “Programmier-Fieber” die Einbindung von:


$(document).ready(function(){
$('.MYCLASS).jqzoom();
});

… in der [I][B]details.tpl[/B][/I] übersehen … nun funktioniert es, außer dass er jetzt auch bei Artikeln “zoomen” will, die gar kein Zoom-Bild haben.

Lässt sich dies über eine IF-Abfrage lösen?

tvtotal · July 5, 2010, 9:46pm

Jo, bei mir steht da folgendes:

[{if $aZoomPics[$iZoomPic].file == "" }]
[{else}]
	<a id="jqzoom_image" class="jqzoom5" href="[{$aZoomPics[$iZoomPic].file}]" title="[{ $product->oxarticles__oxtitle->value|strip_tags }] [{ $product->oxarticles__oxvarselect->value|default:'' }]" name="demo1">[{/if}]

BR

tvtotal

PS: Wenn ich sehe, wie lange Du an der Sache sitzt, so haben sich meine paar Euros für den Einbau echt gelohnt.

exithh · July 27, 2010, 8:04pm

Hallo,

kann mir jemand verraten wie ich das mit mehrerne Bildern mache?
Im Moment läuft es nur mit einem Bild.

<div class="picture">
<a class="jqzoom" href="[{$product->getZoomPictureUrl($iZoomPic)}]" title="[{ $productTitle }]" id="product_image_link">
<img id="product_img" src="[{ $oView->getActPicture() }]" alt="[{$productTitle}]" />
</div>

HeidelBAR · August 1, 2010, 3:53pm

[QUOTE=exithh;36631]Hallo,

kann mir jemand verraten wie ich das mit mehrerne Bildern mache?
Im Moment läuft es nur mit einem Bild.
[/QUOTE]

Das gleiche Problem habe ich auch noch.
jqZoom funktioniert anscih tadellos, zeigt aber immer nur das erste Zoom-Bild an.
Ich habe z.B. 4 Bilder bei einem Artikel … im Shop wird das erste Bild groß angezeigt und das entsprechende Zoom-Bild über jqZoom auch. Klicke ich auf das nächste Thumbnail, wird dieses auch als großes Artikelbild gezeigt, das Zoom-Tool zeigt aber immer noch das erste Zoom-Bild … bei den anderen Artikelbildern auch …

Hier mein Quelltext:


<div class="picture">
<a class="jqzoom" href="[{$aZoomPics[$iZoomPic].file}]" title="[{ $productTitle }]" id="product_image_link">
<img id="product_img" src="[{ $oView->getActPicture() }]" title="[{ $productTitle }]" alt="[{$productTitle}]" />
</a>
</div>

Beim Thumbnail lautet der Quelltext:


[{if $oView->morePics() }]
<div class="morepics">
[{foreach from=$oView->getIcons() key=picnr item=ArtIcon name=MorePics}]
[{ assign var="picPrev" value=$product->getIconUrl($picnr) }]
[{if !$picPrev|strpos:"nopic"}]
<a href="[{ $product->getLink()|oxaddparams:"actpicid=`$picnr`" }][{if $preview}]&preview=[{$preview}][{/if}]"><img src="[{$picPrev}]" alt="[{$productTitle}] Vorschau [{ $picnr }]"></a>
[{/if}]
[{/foreach}]
</div>
[{/if}]

Wo liegt der Fehler, dass immer nur das erste Zoom-Bild angezeigt wirdß

exithh · August 9, 2010, 3:04pm

Hi,

ich habe es auch noch nicht hinbekommen :(.

Gruß

Marek1234 · August 28, 2010, 11:31pm

Ich hänge z.zt auch beim “mehrere Bilder” Problem.
Gibt es dazu schon was neues?

Bzw ich bin schon soweit, das die bilder zwar geändert werden, auch im Zoom aber

klein bleiben
komische darstellungsfehler auftauchen.

vllt kann ja ein JS experte mal helfen!

Link:
http://www.kreator-terrorshop.com/SPECIAL-OFFER/Kreator-World-Tour-2009.html

JS-Source:
http://www.kreator-terrorshop.com/out/basic/src/jquery.jqzoom1.0.1.js

Hilfe!

redone · August 29, 2010, 1:56pm

Hallo,

das Problem was mit mehreren Zoombildern besteht, ist das immer nur das erste bild im Original-Template bereitsteht. Es muss also dafür gesorgt werden, dass alle Zoombilder vorgeladen werden. Dazu muss man mit Smartymitteln etwas tricksen. Folgender Code lädt, wenn vorhanden alle Zoombilder, so dass sie in der JQuery-Lightbox durchgeklickt werden können:

<div class=“picture” id=“zoomimg”>
[{if $oView->showZoomPics() }]
[{assign var=“iImgNr” value=“1”}]
[{assign var=“sIndex” value=“ZoomPics” }]
[{assign var=“aZoomPics” value=$product->getPictureGallery() }]
[{assign var=“aZoomPics” value=$aZoomPics[$sIndex] }]
[{assign var=“iZoomPic” value=$oView->getActZoomPic() }]
[{if $aZoomPics|@count > 1}]
[{foreach from=$aZoomPics item=_zoomPic}]
<a href=“[{$_zoomPic.file}]” [{$sClass}] title=“[{$product->oxarticles__oxtitle->value}] [{$product->oxarticles__oxvarselect->value}]”><img src=“[{ $oView->getActPicture()}]” id=“product_img” alt=“[{ $product->oxarticles__oxtitle->value|strip_tags }] [{ $product->oxarticles__oxvarselect->value|default:‘’ }]”><br /><img src=“[{$oViewConf->getImageUrl()}]tsedv/search.gif”> <b>[{ oxmultilang ident=“DETAILS_ZOOM” }]</b></a>
[{assign var=“iImgNr” value=$iImgNr+1}]
[{if $iImgNr > 1}][{assign var=“sClass” value=“style=display:none;” }][{/if}]
[{/foreach}]
[{else}]
<a href=“[{$aZoomPics[$iZoomPic].file}]” title=“[{$product->oxarticles__oxtitle->value}] [{$product->oxarticles__oxvarselect->value}]”><img src=“[{ $oView->getActPicture()}]” id=“product_img” alt=“[{ $product->oxarticles__oxtitle->value|strip_tags }] [{ $product->oxarticles__oxvarselect->value|default:‘’ }]”><br /><img src=“[{$oViewConf->getImageUrl()}]tsedv/search.gif”> <b>[{ oxmultilang ident=“DETAILS_ZOOM” }]</b></a>
[{/if}]
[{else}]
<img src=“[{ $oView->getActPicture()}]” id=“product_img” class=“photo” alt=“[{ $product->oxarticles__oxtitle->value|strip_tags }] [{ $product->oxarticles__oxvarselect->value|default:‘’ }]”>
[{/if}]
</div>

Das ganze muss man an seine gegebenheiten anpassen, sollte aber kein Problem sein

rubbercut · August 29, 2010, 6:44pm

Das geht auch so:

[{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}]

Marek1234 · August 30, 2010, 10:05am

leider funktioniert beides nicht.
was mach ich falsch? der erste code geht gar nicht und der von rubbercut funktioniert zwar, also läuft… aber nicht so wie gedacht… also immernoch wird immer das hauptbild gezoomt. siehe hier;

http://www.kreator-terrorshop.com/SUMMER-SALE/Kreator-World-Tour-2009-Girly.html

coarsy2 · August 30, 2010, 10:27am

Hi,

auf die Schnelle kann ich mir das leider nicht ansehen.
Hast Du schon mal Magiczoom probiert? Das hat bei
mir absolut keine Probleme verursacht und ging direkt “out of the box”

Siehe:

Beste Grüße vom Chris

Marek1234 · August 30, 2010, 10:50am

[QUOTE=coarsy;39148]Hi,

auf die Schnelle kann ich mir das leider nicht ansehen.
Hast Du schon mal Magiczoom probiert? Das hat bei
mir absolut keine Probleme verursacht und ging direkt “out of the box”

Siehe:

Beste Grüße vom Chris[/QUOTE]

Danke für den Tipp. Nehm ich dann, wenn ich am Ende bin. hehe. Wollte erstmal eine Non-Paid Möglichkeit versuchen. Aber wenn die nicht klappt, guck ich mir Magic Zoom an.

rubbercut · August 30, 2010, 11:00am

Quark, sowas muss man nicht kaufen. Das geht auch so. Die Bilder z1 und z2 werden ja jetzt schon mal richtig geladen und es wird auch richtig gezählt (dafür habe ich Dir das alt="" eingefügt). Überprüfe Dein onlick-Ereignis:

Tip:

function jqzoomimage(id,src){
	document.getElementById(id).href = src;
}

Marek1234 · August 30, 2010, 11:07am

[QUOTE=rubbercut;39150]Quark, sowas muss man nicht kaufen. Das geht auch so. Die Bilder z1 und z2 werden ja jetzt schon mal richtig geladen und es wird auch richtig gezählt (dafür habe ich Dir das alt="" eingefügt). Überprüfe Dein onlick-Ereignis:

Tip:

function jqzoomimage(id,src){
	document.getElementById(id).href = src;
}

[/QUOTE]

im hauptbild, wo gezoomt werden soll, werden die hrefs ja auch super ausgetauscht. nur trotzdem will das script irgendwie net das neue zweite bild nehmen.

Muss ich im jq script selber was umbauen? oder hab ich noch irgendwo einen fehler?

Marek1234 · August 30, 2010, 11:10am

benutze by the way diesen code um die href zu wechseln und das funzt auch tadellos.

    
    jQuery(document).ready(function($){
        $('.product-imgs-preview').click(function()
        {
        
          var t_img_big = $(this).attr('rel');
          var t_img_thb = $(this).attr('rel');
            
            $('.picturezoombig a img').attr('src',t_img_thb);
            $('.picturezoombig a').attr('href',t_img_big);                
            $('.picturezoombig img').removeClass('selected');
            $(this).find('img').addClass('selected');            
            
            return false;
        });
    });

Bei deiner Version, komischerweise, ändert sich das href nicht!

EDIT
Sorry, hatte die ID net drin. Jetzt geht auch deine Version! Aber dennoch keine Änderung!

rubbercut · August 30, 2010, 2:09pm

Ein bischen anpassen:

jqzoomimage('jqzoom_image','http://www.kreator-terrorshop.com/out/pictures/z1/girly__world_tour__front_z1.jpg');return false;

jqzoomimage('picturezoom','http://www.kreator-terrorshop.com/out/pictures/z1/world_tour__front_z1.jpg');return false;

Sollte zu sehen sein…

karl · August 31, 2010, 3:07pm

Hallo,

ich bin hier noch neu, habe von html, css oder js nur sehr wenig bis keine Ahnung und muss gestehen, ich versteh nur Bahnhof. Genau genommen, hör ich nur noch das Geräusch der Züge, die ein- und ausfahren. Aber genug Metapher…

Zuerst hatte ich das Problem, dass sich die normalen Zoom-Bilder im Schop nur noch in einem sehr kleinen Fenster öffneten. Als ich nach einer Antwort suchte, wurde ich zu folgendem Thread verwiesen: http://www.oxid-esales.com/forum/showthread.php?t=5986&highlight=oxscript
Erfahrene Nutzer erkennen darin sicherlich einen Lösunsvorschlag, ich verstand nichts.

Dann dachte ich mir, als ich nach ein wenig Suchen auf jqzoom gestoßen war, das ist optisch sowieso viel ansprechender und wirkt professioneller. Und ich muss mich nicht weiter mit (für mich) kryptischen Problembehebungen herumschlagen. Tja, und jetzt stell ich mich sogar zu blöd an, die ersten Zeilen der Installationsanweisung auf mind-projects.it, die da lauten

"Upload all files and directories from the jQzoom package to your server.The current package includes the JS,CSS,IMAGES folders.
Note: If you decide to rename folders or to change the directory structure,take a look a the image paths inside the CSS and remember to specify the correct file paths in your calling page.

Add first the last jQuery release, then the jQZoom script(don’t forget this),the correct order is important.Look at the installation code below.

Add jqzoom.css to your header.

zu verstehen, geschweigedenn umzusetzen…

Des Englischen bin ich durchaus mächtig, aber wo binde ich denn erstmal diese ersten Zeilen ein, damit meine header.tpl ählich aussieht wie die von HeidelBÄR im ersten Post?

Ich bin mir sicher, den meisten von euch kommen solche Fragen echt dämllich vor, aber ich steh auf dem Schlauch und habe nach stundenlanger Suche keine Antworten oder andere Anleitungen im Netz oder im Forum gefunden.

Ist jemand im Stande und geduldig genug, mir etwas weiter zu helfen? Vorerst brauch ich ja nur einen Antoß…

Danke schonmal im Voraus!

coarsy2 · August 31, 2010, 3:30pm

Hi Karl,

lad Dir die _header.tpl vom Server und stelle Sie doch einfach mal hier rein,
am besten noch von PHP Tags umschlossen. Dann passe ich Dir diese schnell
den erfordernissen an und Du kannst das in Deine _header.tpl wiederum übernehmen
und diese dann wieder auf den Server uploaden.

Das Kopieren der Scripte für JQZoom bzw. das Übertragen auf den Server hast Du hinbekommen?

Ansonsten wirds hier schwierig, Dir an dieser Stelle ne komplette Anleitung zu schreiben.
Dann wäre Dein Beitrag wohl eher unter Job-Postings einzutüten…

Aber probieren wirs mal

Viele Grüße vom Chris

HeidelBAR · September 5, 2010, 12:52pm

Hallo zusammen,

endlich gibt es hier ja doch Tipps … auch wenn ich das eine oder andere nicht ganz verstehe, bzw. den Postings hier nicht unbedingt entnehmen kann in welcher Datei bzw. an welcher Stelle der Code oder Quelltext eingefügt werden soll…

@ coarsy , Marek 1234 und Rubbercut,
Hat von euch jemand das jqzoom so am laufen, dass alle Zoombilder richtig angezeigt werden?
Wenn ja, welche Dateien mussten wie modifiziert bzw. gändert werden dass der Shop das richtige Zoombild anzeigt?