Vzoom oder jqzoom in jtl shop - geht das ?

[MOBAWE]

Hallo Templater,

ich versuche gerade folgendes javascript in die artikel.tpl einzubauen:

JQZOOM oder von mir aus kann es auch vzoom (das selbe unter anderem namen) sein, hat jemand das schon gemacht und kann mir einen Tipp dazu geben ?

Danke für jede Hilfe im vorraus,

gruß Carsten

[Jörg R.]

Was haste denn schon eingebunden?

[MOBAWE]

Also ich habe gedacht, das geht so einfach wie die thickbox, da habe ich alles in der artikel.tpl eingebunden:

PHP-Code:

{include file='tpl_inc/header.tpl'}
{assign var=nCheckAbhaengigkeit value="1"}
{if $Einstellungen.artikeldetails.artikeldetails_tabs_nutzen=="Y"}<script type="text/javascript" src="{$currentTemplateDir}js/tab/tab.js"></script>{/if}
<script type="text/javascript" src="{$currentTemplateDir}js/thickbox/jquery-latest.pack.js"></script>
<script type="text/javascript" src="{$currentTemplateDir}js/thickbox/thickbox.js"></script>
<script type="text/javascript" src="{$currentTemplateDir}js/thickbox/sendmail.js"></script>
<link rel="stylesheet" href="{$currentTemplateDir}js/thickbox/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="{$currentTemplateDir}js/thickbox/thickbox-with-html.js"></script>
<script type="text/javascript" src="{$currentTemplateDir}js/starrater/behaviour.js"></script>
<script type="text/javascript" src="{$currentTemplateDir}js/starrater/rating.js"></script>
<script type="text/javascript" src="{$currentTemplateDir}js/js/jquery.js"></script>
<script type="text/javascript" src="{$currentTemplateDir}js/js/jquery.jqzoom.js"></script>
<script language="JavaScript" type="text/JavaScript"> 


und darunter in javascript feld noch

PHP-Code:

// Do not remove: a8a62a7b87592a62afdb3698512cb966

jQuery.noConflict();
jQuery(document).ready(function(){
$("img.jqzoom").jqueryzoom({
                xzoom: 200, //zooming div default width(default width value is 200)
                yzoom: 200, //zooming div default width(default height value is 200)
                offset: 10 //zooming div default offset(default offset value is 10)
                //position: "right" //zooming div position(default position value is "right")
            });
});

function var_bild(div) {ldelim}
document.getElementById('sc0').style.display="none";
{foreach name=Variationen from=$Artikel->Variationen item=Variation}
{foreach name=Variationswerte from=$Variation->Werte item=Variationswert}
{if $Variationswert->cBildPfad}
document.getElementById("vc{$Variationswert->kEigenschaftWert}").style.display="none";
{/if}
{/foreach}
{/foreach}
document.getElementById(div).style.display="block";
document.getElementById('bild_ori').style.display="block";
if (div=='sc0')
    document.getElementById('bild_ori').style.display="none";
{rdelim}

function var_sel(kEigenschaft) {ldelim}
if (kEigenschaft>0)
{ldelim}
var_bild('sc0');
ewert = 'eigenschaftwert_'+kEigenschaft;
kEigenschaftWert = document.inWarenkorb.elements[ewert].options[document.inWarenkorb.elements[ewert].options.selectedIndex].value;
{foreach name=Variationen from=$Artikel->Variationen item=Variation}
{foreach name=Variationswerte from=$Variation->Werte item=Variationswert}
if (kEigenschaftWert>0 && kEigenschaftWert=={$Variationswert->kEigenschaftWert} && {if $Variationswert->cBildPfad}true{else}false{/if})
var_bild('vc'+kEigenschaftWert);
{/foreach}
{/foreach}
{rdelim}
{rdelim}

w = new Array();
{foreach name=Variationen from=$Artikel->Variationen item=Variation}
{foreach name=Variationswerte from=$Variation->Werte item=Variationswert}
{if $Variationswert->fAufpreisNetto!=0}
w[{$Variationswert->kEigenschaftWert}] = {$Variationswert->fAufpreis[$NettoPreise]};
{/if}
{/foreach}
{/foreach}

function aktualisierePreis(){ldelim}
document.getElementById('preis').innerHTML = gibPreis(preisBerechnen({$Artikel->Preise->fVK[$NettoPreise]}));
{if $Artikel->Preise->fPreis1>0 && $Artikel->Preise->nAnzahl1>0}document.getElementById('preis1').innerHTML = gibPreis(preisBerechnen({$Artikel->Preise->fStaffelpreis1[$NettoPreise]}));{/if}
{if $Artikel->Preise->fPreis2>0 && $Artikel->Preise->nAnzahl2>0}document.getElementById('preis2').innerHTML = gibPreis(preisBerechnen({$Artikel->Preise->fStaffelpreis2[$NettoPreise]}));{/if}
{if $Artikel->Preise->fPreis3>0 && $Artikel->Preise->nAnzahl3>0}document.getElementById('preis3').innerHTML = gibPreis(preisBerechnen({$Artikel->Preise->fStaffelpreis3[$NettoPreise]}));{/if}
{if $Artikel->Preise->fPreis4>0 && $Artikel->Preise->nAnzahl4>0}document.getElementById('preis4').innerHTML = gibPreis(preisBerechnen({$Artikel->Preise->fStaffelpreis4[$NettoPreise]}));{/if}
{if $Artikel->Preise->fPreis5>0 && $Artikel->Preise->nAnzahl5>0}document.getElementById('preis5').innerHTML = gibPreis(preisBerechnen({$Artikel->Preise->fStaffelpreis5[$NettoPreise]}));{/if}
{rdelim}

function preisBerechnen(preis){ldelim}
for(i=0;i<document.inWarenkorb.length;i++)
{ldelim}
if(document.inWarenkorb.elements[i].type=="radio" && document.inWarenkorb.elements[i].checked)
if (w[document.inWarenkorb.elements[i].value])
preis = preis + w[document.inWarenkorb.elements[i].value];
if(document.inWarenkorb.elements[i].type=="select-one" && document.inWarenkorb.elements[i].selectedIndex>=0)
if (document.inWarenkorb.elements[i].options[document.inWarenkorb.elements[i].selectedIndex].value>0)
if (w[document.inWarenkorb.elements[i].options[document.inWarenkorb.elements[i].selectedIndex].value])
preis = preis + w[document.inWarenkorb.elements[i].options[document.inWarenkorb.elements[i].selectedIndex].value];
{rdelim}
return preis;
{rdelim}

function gibPreis(preis){ldelim}
preis = preis.toFixed(2);
var po = preis.toString();
var preisString ="";
if (preis!=0)
{ldelim}
preisAbs = Math.abs(preis);
var ln = Math.floor(Math.log(Math.floor(Math.abs(preis)))*Math.LOG10E)+1;
var preisStr = Math.floor(Math.abs(preis)).toString();
if (ln>3)
{ldelim}
for(i=0;i<ln;i++)
{ldelim}
if (ln%3==i%3 && i>0) preisString = preisString + "{$smarty.session.Waehrung->cTrennzeichenTausend}"; preisString = preisString + preisStr[i];
{rdelim}{rdelim}
else preisString = preisStr; preisString = preisString + "{$smarty.session.Waehrung->cTrennzeichenCent}" + po.charAt(po.length-2) + po.charAt(po.length-1);
if (preis<0) preisString = "- "+preisString;
{rdelim}
return preisString + " " + unescape("{$smarty.session.Waehrung->cNameHTML}");
{rdelim}

{include file='tpl_inc/artikel_variations_abhaengigkeiten.tpl'} 


naja und an der stelle wo dann das bild erscheinen soll - habe ich anstatt der thickbox halt als class="tozoom" eingetragen, aber das smarty gibt mir schon nen error bei der function oben. daher habe ich es dann versucht in der header.tpl einzubinden, aber dort genau der selbe Error.

PHP-Code:

<div class="artikeldetails">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="padding-top:11px;border-color:#929292;border-width:1px; border-style:dotted;border-top-width:0px;border-right-width:0px;border-left-width:0px;">
                                                                                        <tr>
                                                <td width="260"  valign="top">
                                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                    <tr height="240">
                                                        <td align="center">
<div id="sc0">
<a href="{$Artikel->Bilder[0]->cPfadGross}" class="tozoom" >
    <img src="{$Artikel->Bilder[0]->cPfadNormal}" alt="{$Variationswert->cBildPfadGross}"
        title="Klicken um zu vergrößern - Click to enlarge - Cliquez pour agrandir"/></a>
</div>
{foreach name=Variationen from=$Artikel->Variationen item=Variation}
    {foreach name=Variationswerte from=$Variation->Werte item=Variationswert}
        {if $Variationswert->cBildPfad}
            <div style="display: none;" id="vc{$Variationswert->kEigenschaftWert}">
            <a href="{$Variationswert->cBildPfadGross}" class="tozoom" >
            <img src="{$Variationswert->cBildPfad}" alt="{$Variationswert->cBildPfadGross}" title="Klicken um zu vergrößern - Click to enlarge - Cliquez pour agrandir"/></a>
            </div> 


[ginaK.]

Hallo MOBAWE,

das tjpzoom ist bisher das einzige was funktioniert, da dieser nur innerhalb des Artikelbildes die Lupe aktiviert und Details vergrößert.

Das jqzoom funktioniert nur teilweise, er zeigt zwar die Lupe, aber neben dem Artikelbild nur ein weißes Fenster ohne Inhalt an. Es benötigt wahrscheinlich direkte Bildangaben.

[MOBAWE]

Danke für den Hinweis Gina,
ich werde es mal ausprobieren, das tjpzoom sieht ja auch net schlecht aus.

- danke für den tip nochmals -)

gruß carsten

[ginaK.]

Hallo Modellbahner, Schuhverkäufer, Detail-Freaks und die es brauchen können,

ich habe es nach langen quälenden Nächten und hunderten Experimenten geschafft eine Zoom-Funktion für den JTL-Shop zu Basteln, die Grundfunktion besteht aus dem Script jqZoom, leider verarbeitet dieses Script nur direkte Bildangaben, sodass eine umgestaltung in ein JTL-Konformes Script nötig war.

1.) Als erstes sollten die Bildeinstellungen im Admin-Bereich eingestellt werden. Hier muss, je nach Detailgenauigkeit ein wenig experimentiert werden. Diese einstellungen waren bei mir Optimal, wenn man alle vorhandenen Artikelbilder löscht, und nachdem die folgenden einstellungen im Shop-Admin vorgenommen wurden, alle Artikelbilder nocheinmal aus der WaWi zum Shop transferiert, (ist aber nicht zwingend).

Bild_1:



2.) Als zweites im Ordner "templates/MeinTemplate/js" einen Ordner mit Namen "zoom" anlegen. Sollte so aussehen wie in Bild_2.

Bild_2:



3.) Die im Ordner "templates/MeinTemplate/tpl_inc/header.tpl" öffnen und die in Bild_3 aufgeführten Zeilen einfügen.

Bild_3:



4.) Die im Ordner "templates/MeinTemplate/artikel.tpl" öffnen und die in Bild_4 aufgeführten Zeilen einfügen. Die Zeilennummern können je nach eigenen (einbauten) variieren. Anhaltspunkt ist der <div id="sc0"

Bild_4:



Getestet habe ich die funktionen im IE5, IE6 und Firefox 3.07, ob es im IE7, IE8 und Opera funzt, konnte ich nicht testen. Hier ein Screenshot im JTL Test-Shop.

Bild_5:



Als letztes ist die jtlzoom-Datei als zoom.zip beigefügt. Diese bitte entpacken und nach obiger Beschreibung einfügen.

Ich leiste für dieses Script keinen Support, das Grundscript stammt von
MindProjekt.