MODUL: Cloud Zoom als Alternative zu MagicZoom

[Oktay]

Kaum hat man ein Problem gelöst kommt auch schon das Nächste. Habe jetzt wie du gesagt hattest die Bilder der iPhone 4 Hüllen mit Photoshop um die Hälfte verkleinert weil die Ladezeit dann doch zu lange war wie du es schon vermutet hattest. Jetzt ist der Zoom total verschoben bei den Hüllen. Ich bin schon auf dem Produkt mit dem Zoom und er zeigt mir im Zoomfenster ein Stück vom Produktbild das etwas weiter rechts ist, den Hintergrund. Gehe ich mit dem Zoom in die Mitte des Produkts erscheint erst dann die Kante des Produkts im Zoomfenster. Kurz: Total Verschoben. Bei den anderen Produkten Computermäuse, Kopfhörer und Weinkühler wo ich die Bilder nicht verkleinern musste passt's.

[DefCon2k]

Servus,

wow, die Bilder von den Iphone-Hüllen sind ja riesig (2800x2400 Pixel)... Die könntest du ein wenig verkleinern.

So ganz verstehe ich das was du meinst, nicht... Aber egal. Du musst die Bilder auf jeden Fall neu hochladen, nachdem du sie bearbeitet hast.
Wieso es ausgerechnet nach dem Verkleinern mit Photoshop Probleme gibt, kann ich mir nicht erklären, ich gehe aber mal davon aus, dass es nicht an Photoshop selbst liegt. Du kannst ja mal ein anderes Bildprogramm ausprobieren (ich z.B. mache sowas immer mit Paint.NET) und schauen, was dann passiert.

Gruß Tobi

[DefCon2k]

Servus,

@Oktay
Was hat du genau angepasst, damit sowohl der Cloud-zoom als auch die Thickbox funnktioniert?
Wenn ich die Codezeile aus deiner "product_info_tabs" in meine einbinde, tut sich gar nichts.
Wo hast du noch was geändert?

Gruß Tobi

[Oktay]

Hi Tobi die Bilder sind riesengroß stimmt hatte das Model Black verkleinert wenn du darauf gehst dann siehst du was ich meine da ist der Zoom total verschoben aber du hast recht werde es mal versuchen die Bilder mit Paint zu verkleinern.
Du das mit der Thickbox hat der Karsten von Fishnet Services eingebaut den kannst du mal fragen, der sagt dir bestimmt, was er wo geändert hat ich kann ihn aber auch fragen und dir anschließend die geänderten notwendigen Codes zukommen lassen. Ich frag ihn mal.

[Tomcraft]

Ich wüsste ehrlich gesagt nicht, dass die ThickBox nicht weiter funktioniert, wenn das folgende Modul eingebaut wird: MODUL: Cloud Zoom als Alternative zu MagicZoom

Grüße

Torsten

[Jürgen]

[...]
wo genau hast du diese product_info_v1 her?
Im Original ist für alle weiteren Bilder eine Schleife drin, die das Bild ersetzt (siehe Originalanleitung).
[...]

Es ist ein Template (ähnlich dem "CSS xt:Commerce Template i24-css-universal-rot-SEO") von dem Anbieter "(( Wir dulden keine kommerziellen Werbelinks - Bitte Forenregeln beachten! ))", welches ich vor wenigen Tagen um etwa 90 EUR erworben habe. Leider sind in dem Template einige Ungereimtheiten drinnen, auf die ich an dieser Stelle noch nicht unbedingt eingehen möchte, da es nicht zum Thema gehört.

[...]
Zu den beiden Punkten mit Thickbox und den weiteren Bildern:

es war damals von mir nicht angedacht, beide Darstellungen zusammen zu nutzen, ich finde es zu verwirrend.
Deswegen habe ich da auch keine Zeit investiert, um dies zusammen zum Laufen zu bekommen.
[...]

Das ist wirklich schade... wie könnte ich denn, zusätzlich zu dem "Cloud Zoom", noch eine anklickbare Vergrösserung (ideal wäre Thickbox oder ähnliches) unterbringen? Wäre mir eigentlich sehr wichtig, nur fehlt mir (als Anfänger) im Ansatz die Idee.

[...]
Zur Thematik mit den weiteren Bildern:
Eigentlich hatte ich es so gelöst (und bei mir funktioniert es so auch), dass das Originalbild auch als Vorschaubild bei den weiteren Bildern angezeigt wird.
[...]

Sagen wir mal, ich habe einen Artikel mit 5 Bildern, dann ist es bei mir so:

Lade ich die Seite, wird mir das 1. Bild oben gross angezeigt und ich kann es mittels "Cloud Zoom" genauer betragen. Klicke ich auf das 2. oder 3. oder 4. oder 5 Bild, so wird das grosse Bild (also das 1. Bild) ersetzt und ich kann das jeweils angeklickte Bild mit "Cloud Zoom" vergrössern.

Jedoch habe ich danach (ausser durch Neuladen der Seite) keine Möglichkeit mehr an das 1. Bild dran zu kommen. Da ist doch wo ein Fehler, oder nicht?

Lg, Jürgen

[DefCon2k]

Servus,

@Tomcraft und Jürgen

Es funktioniert ja in Verbindung mit der Thickbox, nur momentan bei mir nicht (Oktay hat eine funktionsfähige Version, deswegen habe ich Ihn gefragt, was genau er da gemacht hat, er hat gesagt, er wolle die Lösung hierzu beisteuern).

@ Jürgen

Wie bereits geschrieben, habe ich das 1. Bild nicht nur als Hauptproduktbild eingebunden, sondern zusätzlich bei den weiteren Produktbilden.
Das heißt in Deinem Beispiel mit den 5 Bildern, dass du 5 "weitere Bilder" hast, wovon das erste direkt groß dargestellt wird (zusätzlich zum kleineren Vorschaubild).
So ist es auch standardmäßig im Modul mit drinne.

Teste mal, ob es funktioniert, wenn du die gestern von mir hochgeladene "product_info_v1" benutzt, damit sollte es funktionieren. Mit der von dir geposteten "product_info" kann es gut sein, dass es nicht so sauber funktioniert.
Aber wie gesagt, teste mal mit der von mir und gib Feedback (BACKUP nicht vergessen!!!!)

Gruß Tobi

[Oktay]

Hier die Antwort vom Informatiker kopier sie einfach mal hier rein hoffe das bringt euch weiter.

soweit ich das ohne tiefere Einsicht in das Template product_info_tab_1 beurteilen kann, müsste dem Bild folgende Angaben hinzugefügt werden:
- Der Pfad zu dem Bild im href-Tag sowie der Titel des Bildes im title-Tag

Falls das nichts bringt Tobi, hau ich ihn nochmal an, hoffe es bringt dich weiter.

[armandogarcia]

Hallo, wie von Torsten gewünscht meine Einstellungen für die CloudZoom.
Wenn Ihr noch Informationen benötigt, gebt Bescheid.

product_info.html

Zoom-Bild:

Code: PHP  [Auswählen]

{if $PRODUCTS_IMAGE!=''}
                <a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" class="cloud-zoom cloud-zoom-gallery" id="zoom1" rel="position: 'inside' , showTitle: false, adjustX:0, adjustY:0"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productimage" /></a>
{/if}
 

weitere Bilder:

Code: PHP  [Auswählen]

{if $more_images|@count> 0}
<div class="morepics">
<a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1',smallImage:'{$PRODUCTS_IMAGE}'"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" width="80" class="productimage" /></a>
<!-- More Pictures -->
{foreach item=more_images_data from=$more_images}
<a class="cloud-zoom-gallery" rel="useZoom: 'zoom1',smallImage:'{$more_images_data.PRODUCTS_IMAGE}'" title="{$PRODUCTS_NAME}" href="{$more_images_data.PRODUCTS_IMAGE|replace:"info_images":"popup_images"}"><img src="{$more_images_data.PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" width="60" /></a>
{/foreach}</div>
{/if}
 

falls Ihr noch was benötigt, gebt Bescheid, z. B. Code aus "cloudzoom.css" oder "cloudzoom.js", achtet immer darauf im "product_info" ein großes Bild zu hinterlegen, außerdem sollte das zoomende Bild ebenso richtig groß sein, falls jemand nur kleine oder schlechte Bilder hat sollte er auf die CloudZoom verzichten.

Lieb Grüße

euer Armando

[Tomcraft]

Naja, wenn du Veränderungen an der "cloudzoom.css" bzw. "cloudzoom.js" vorgenommen hast, dann wäre es natürlich prima, wenn du den Code auch noch zur Verfügung stellst.

Grüße

Torsten

[armandogarcia]

ob ich da Änderungen vorgenommen habe, hmm aber hier zur Sicherheit beide Codes

also js

Code: PHP  [Auswählen]

//////////////////////////////////////////////////////////////////////////////////
// Cloud Zoom V1.0.2
// (c) 2010 by R Cecco. <http://www.professorcloud.com>
// MIT License
//
// Please retain this copyright header in all versions of the software
//////////////////////////////////////////////////////////////////////////////////
(function($){$(document).ready(function(){$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom()});function format(str){for(var i=1;i<arguments.length;i++){str=str.replace('%'+(i-1),arguments[i])}return str}function CloudZoom(jWin,opts){var sImg=$('img',jWin);var img1;var img2;var zoomDiv=null;var $mouseTrap=null;var lens=null;var $tint=null;var softFocus=null;var $ie6Fix=null;var zoomImage;var controlTimer=0;var cw,ch;var destU=0;var destV=0;var currV=0;var currU=0;var filesLoaded=0;var mx,my;var ctx=this,zw;setTimeout(function(){if($mouseTrap===null){var w=jWin.width();jWin.parent().append(format('<div style="width:%0px;position:absolute;top:75%;left:%1px;text-align:center" class="cloud-zoom-loading">Loading...</div>',w/3,(w/2)-(w/6))).find(':last').css('opacity',0.5)}},200);var ie6FixRemove=function(){if($ie6Fix!==null){$ie6Fix.remove();$ie6Fix=null}};this.removeBits=function(){if(lens){lens.remove();lens=null}if($tint){$tint.remove();$tint=null}if(softFocus){softFocus.remove();softFocus=null}ie6FixRemove();$('.cloud-zoom-loading',jWin.parent()).remove()};this.destroy=function(){jWin.data('zoom',null);if($mouseTrap){$mouseTrap.unbind();$mouseTrap.remove();$mouseTrap=null}if(zoomDiv){zoomDiv.remove();zoomDiv=null}this.removeBits()};this.fadedOut=function(){if(zoomDiv){zoomDiv.remove();zoomDiv=null}this.removeBits()};this.controlLoop=function(){if(lens){var x=(mx-sImg.offset().left-(cw*0.5))>>0;var y=(my-sImg.offset().top-(ch*0.5))>>0;if(x<0){x=0}else if(x>(sImg.outerWidth()-cw)){x=(sImg.outerWidth()-cw)}if(y<0){y=0}else if(y>(sImg.outerHeight()-ch)){y=(sImg.outerHeight()-ch)}lens.css({left:x,top:y});lens.css('background-position',(-x)+'px '+(-y)+'px');destU=(((x)/sImg.outerWidth())*zoomImage.width)>>0;destV=(((y)/sImg.outerHeight())*zoomImage.height)>>0;currU+=(destU-currU)/opts.smoothMove;currV+=(destV-currV)/opts.smoothMove;zoomDiv.css('background-position',(-(currU>>0)+'px ')+(-(currV>>0)+'px'))}controlTimer=setTimeout(function(){ctx.controlLoop()},30)};this.init2=function(img,id){filesLoaded++;if(id===1){zoomImage=img}if(filesLoaded===2){this.init()}};this.init=function(){$('.cloud-zoom-loading',jWin.parent()).remove();$mouseTrap=jWin.parent().append(format("<div class='mousetrap' style='background-image:url(\".\");background-repeat:no-repeat;z-index:999;position:absolute;width:%0px;height:%1px;left:%2px;top:%3px;\'></div>",sImg.outerWidth(),sImg.outerHeight(),0,0)).find(':last');$mouseTrap.bind('mousemove',this,function(event){mx=event.pageX;my=event.pageY});$mouseTrap.bind('mouseleave',this,function(event){clearTimeout(controlTimer);if(lens){lens.fadeOut(299)}if($tint){$tint.fadeOut(299)}if(softFocus){softFocus.fadeOut(299)}zoomDiv.fadeOut(300,function(){ctx.fadedOut()});return false});$mouseTrap.bind('mouseenter',this,function(event){mx=event.pageX;my=event.pageY;zw=event.data;if(zoomDiv){zoomDiv.stop(true,false);zoomDiv.remove()}var xPos=opts.adjustX,yPos=opts.adjustY;var siw=sImg.outerWidth();var sih=sImg.outerHeight();var w=opts.zoomWidth;var h=opts.zoomHeight;if(opts.zoomWidth=='auto'){w=siw}if(opts.zoomHeight=='auto'){h=sih}var appendTo=jWin.parent();switch(opts.position){case'top':yPos-=h;break;case'right':xPos+=siw;break;case'bottom':yPos+=sih;break;case'left':xPos-=w;break;case'inside':w=siw;h=sih;break;default:appendTo=$('#'+opts.position);if(!appendTo.length){appendTo=jWin;xPos+=siw;yPos+=sih}else{w=appendTo.innerWidth();h=appendTo.innerHeight()}}zoomDiv=appendTo.append(format('<div id="cloud-zoom-big" class="cloud-zoom-big" style="display:none;position:absolute;left:%0px;top:%1px;width:%2px;height:%3px;background-image:url(\'%4\');background-repeat:no-repeat;z-index:99;"></div>',xPos,yPos,w,h,zoomImage.src)).find(':last');if(sImg.attr('title')&&opts.showTitle){zoomDiv.append(format('<div class="cloud-zoom-title">%0</div>',sImg.attr('title'))).find(':last').css('opacity',opts.titleOpacity)}if($.browser.msie&&$.browser.version<7){$ie6Fix=$('<iframe frameborder="0" src="#"></iframe>').css({position:"absolute",left:xPos,top:yPos,zIndex:99,width:w,height:h}).insertBefore(zoomDiv)}zoomDiv.fadeIn(500);if(lens){lens.remove();lens=null}cw=(sImg.outerWidth()/zoomImage.width)*zoomDiv.width();ch=(sImg.outerHeight()/zoomImage.height)*zoomDiv.height();lens=jWin.append(format("<div class = 'cloud-zoom-lens' style='display:none;z-index:98;position:absolute;width:%0px;height:%1px;'></div>",cw,ch)).find(':last');$mouseTrap.css('cursor',lens.css('cursor'));var noTrans=false;if(opts.tint){lens.css('background','url("'+sImg.attr('src')+'")');$tint=jWin.append(format('<div style="display:none;position:absolute; left:0px; top:0px; width:%0px; height:%1px; background-color:%2;" />',sImg.outerWidth(),sImg.outerHeight(),opts.tint)).find(':last');$tint.css('opacity',opts.tintOpacity);noTrans=true;$tint.fadeIn(500)}if(opts.softFocus){lens.css('background','url("'+sImg.attr('src')+'")');softFocus=jWin.append(format('<div style="position:absolute;display:none;top:2px; left:2px; width:%0px; height:%1px;" />',sImg.outerWidth()-2,sImg.outerHeight()-2,opts.tint)).find(':last');softFocus.css('background','url("'+sImg.attr('src')+'")');softFocus.css('opacity',0.5);noTrans=true;softFocus.fadeIn(500)}if(!noTrans){lens.css('opacity',opts.lensOpacity)}if(opts.position!=='inside'){lens.fadeIn(500)}zw.controlLoop();return})};img1=new Image();$(img1).load(function(){ctx.init2(this,0)});img1.src=sImg.attr('src');img2=new Image();$(img2).load(function(){ctx.init2(this,1)});img2.src=jWin.attr('href')}$.fn.CloudZoom=function(options){try{document.execCommand("BackgroundImageCache",false,true)}catch(e){}this.each(function(){var relOpts,opts;eval('var a = {'+$(this).attr('rel')+'}');relOpts=a;if($(this).is('.cloud-zoom')){$(this).css({'position':'relative','display':'block'});$('img',$(this)).css({'display':'block'});if($(this).parent().attr('id')!='cloud-zoom-wrap'){$(this).wrap('<div id="cloud-zoom-wrap" style="top:0px;z-index:9999;position:relative;"></div>')}opts=$.extend({},$.fn.CloudZoom.defaults,options);opts=$.extend({},opts,relOpts);$(this).data('zoom',new CloudZoom($(this),opts))}else if($(this).is('.cloud-zoom-gallery')){opts=$.extend({},relOpts,options);$(this).data('relOpts',opts);$(this).bind('click',$(this),function(event){var data=event.data.data('relOpts');$('#'+data.useZoom).data('zoom').destroy();$('#'+data.useZoom).attr('href',event.data.attr('href'));$('#'+data.useZoom+' img').attr('src',event.data.data('relOpts').smallImage);$('#'+event.data.data('relOpts').useZoom).CloudZoom();return false})}});return this};$.fn.CloudZoom.defaults={zoomWidth:'auto',zoomHeight:'auto',position:'right',tint:false,tintOpacity:0.5,lensOpacity:0.5,softFocus:false,smoothMove:3,showTitle:true,titleOpacity:0.5,adjustX:0,adjustY:0}})(jQuery);
 

und hier die gewünschte css

Code: CSS  [Auswählen]

.cloud-zoom-wrap {
        margin: 0 auto;
        width:980px;
        background-color:#fff;
        border: #fff solid;
        border-width:0px 10px 10px 10px;
        margin-bottom:10px;
}
.cloud-zoom-hint {
        font-size:11px;
        font-weight:normal;
        font-family:Verdana, Arial, Helvetica, sans-serif;
}

/* This is the moving lens square underneath the mouse pointer. */
.cloud-zoom-lens {
        border: 4px solid #888;
        margin:-4px;    /* Set this to minus the border thickness. */
        background-color:#fff;
        cursor:crosshair;
}
/* This is for the title text. */
.cloud-zoom-title {
        font-family:Arial, Helvetica, sans-serif;
        position:absolute !important;
        background-color:#000;
        color:#fff;
        padding:3px;
        width:100%;
        text-align:center;
        font-weight:bold;
        font-size:10px;
        top:0px;
}
/* This is the zoom window. */
.cloud-zoom-big {
        border:1px solid #fff;
        overflow:hidden;
}
/* This is the loading message. */
.cloud-zoom-loading {
        color:white;
        background:#222;
        padding:3px;
        border:1px solid #000;
}
 

LG

Armando

[Tomcraft]

Dankeschön.

Grüße

Torsten

[nicson]

Da es mich gefuchst hat, dass das schöne Modul nicht mit thickbox oder fancybox funzt hab ich mal meinen Sonntag damit verbracht das ganze gangbar zu machen ....

Hier eine Version mit der auch die Thickbox funzt... allerdings hab ich das mal mit onclick= gelöst.
Seite ist zwar gerade im Feinschliff aber so sieht es aus Glaswelt24.ch

Vielleicht noch erwähnenswert für alle die Cloud Optionen nutzen und anpassen möchten: http://professorcloud.com

Es muss dem image HTML Tag die id hinzugefügt werden welche die URL des Bildes enthält das geöffnet werden soll. Nicht vergessen auch bei den "more images" !

Code: PHP  [Auswählen]

id="{$PRODUCTS_IMAGE|replace:"info_images":"original_images"}" />

und in der "thickbox.js" muss diese Funktion rein (die ist nicht von mir! Quelle: TB Hack)

Code: PHP  [Auswählen]

function tb_open_new(jThickboxNewLink){
        tb_show(null,jThickboxNewLink,null);
}

Einfach mal probieren, soweit ich sagen kann funktioniert es sowohl im IE als auch den üblichen Kandidaten.

[EDIT Tomcraft 08.05.2011: Version in Beitrag 1 verlinkt.]

[DefCon2k]

Servus,
das werde ich direkt mal morgen ausprobieren.
Sieht aber interessant aus.

Gruß Tobi

[Tomcraft]

Danke nicson!

Grüße

Torsten