Cloud Zoom

schmaiki · February 28, 2011, 1:54pm

Könnte mir vielleicht jemand helfen. Versuche Cloud Zoom einzubauen. JS wird geladen und was nicht geht ist das fenster. könnte mir jemand sagen wie ich das einbaue? vielen dank im vorraus.

Priester · February 28, 2011, 2:52pm

Gibt es keine Einbauanleitung dafür? Wo hängt es denn?

schmaiki · February 28, 2011, 2:57pm

einbauleitung gibts hab es. problem ist das das zoomfenster nicht aufgeht. über das wo preis usw steht sollte das fenster sein. bei der beta version von oxid shop 4.5 azure theme geht das die haben denn gleichen.

http://www.professorcloud.com/mainsite/cloud-zoom.htm

Priester · February 28, 2011, 3:00pm

Dann erzähl mal wie Du was wohin installiert hast.

schmaiki · February 28, 2011, 3:09pm

also dateien hab ich in /out/basic/src die js und css

in der details.tpl:
<div class=“picture”>
<a href=“[{$product->getZoomPictureUrl($iZoomPic)}]” class=“cloud-zoom” id=“zoom1” rel=“adjustY:200, adjustx:-10, zoomWidth:‘124’, fixZoomWindow:‘124’”>
<img src=“[{$oView->getActPicture()}]” alt=“[{$oDetailsProduct->oxarticles__oxtitle->value|strip_tags}] [{$oDetailsProduct->oxarticles__oxvarselect->value|strip_tags}]”>
</a>
</div>

in der _header.tpl
<link rel=“stylesheet” type=“text/css” href=“[{ $oViewConf->getResourceUrl() }]cloud-zoom.css”>

&lt;script type="text/javascript" src="[{ $oViewConf-&gt;getResourceUrl() }]jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="[{ $oViewConf-&gt;getResourceUrl() }]cloud-zoom.1.0.2.js"&gt;&lt;/script&gt;

nun geht auch die anderen bilder nicht mehr vom produkt.

Priester · February 28, 2011, 3:22pm

Und was sagt die Einbauanleitung? Poste diese mal.

schmaiki · February 28, 2011, 3:25pm

Das steht in der einbauanleitung drin:

<html>
<head>

<!-- Load the Cloud Zoom CSS file –>
<link href=“/styles/cloud-zoom.css” rel=“stylesheet” type=“text/css” />

<!-- You can load the jQuery library from the Google Content Network.
Probably better than from your own server. –>
<script type=“text/javascript” src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>

<!-- Load the Cloud Zoom JavaScript file –>
<script type=“text/JavaScript” src=“/js/cloud-zoom.1.0.2.min.js”></script>

</head>
<body>

    &lt;!--	
    An anchor with class of 'cloud-zoom' should surround the small image.
    The anchor's href should point to the big zoom image.
    Any options can be specified in the rel attribute of the anchor.
    Options should be specified in regular JavaScript object format,
    but without the braces.
    --&gt;
	
    &lt;a href='/images/zoomengine/bigimage00.jpg' class = 'cloud-zoom' id='zoom1'
        rel="adjustX: 10, adjustY:-4"&gt;
        &lt;img src="/images/zoomengine/smallimage.jpg" alt='' title="Optional title display" /&gt;
    &lt;/a&gt;
    
     
    &lt;!--	
    You can optionally create a gallery by creating anchors with a class of 'cloud-zoom-gallery'.
    The anchor's href should point to the big zoom image.
    In the rel attribute you must specify the id of the zoom to use (useZoom: 'zoom1'),
    and also the small image to use (smallImage: /images/....)
    --&gt;
    
    &lt;a href='/images/zoomengine/bigimage00.jpg' class='cloud-zoom-gallery' title='Thumbnail 1'
    	rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage.jpg' "&gt;
    &lt;img src="/images/zoomengine/tinyimage.jpg" alt = "Thumbnail 1"/&gt;&lt;/a&gt;
    
    &lt;a href='/images/zoomengine/bigimage01.jpg' class='cloud-zoom-gallery' title='Thumbnail 2'
    	rel="useZoom: 'zoom1', smallImage: ' /images/zoomengine/smallimage-1.jpg'"&gt;
    &lt;img src="/images/zoomengine/tinyimage-1.jpg" alt = "Thumbnail 2"/&gt;&lt;/a&gt;                  
    
    &lt;a href='/images/zoomengine/bigimage02.jpg' class='cloud-zoom-gallery' title='Thumbnail 3'
    	rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage-2.jpg' "&gt;
    &lt;img src="/images/zoomengine/tinyimage-2.jpg" alt = "Thumbnail 3"/&gt;&lt;/a&gt;

&lt;/body&gt;

</html>

Setup parameters should appear in the rel attribute of the anchor surrounding the small image.

Any parameters not specified will have default values applied.
Parameter Description (from V1.0.0) Default Value
zoomWidth The width of the zoom window in pixels. If ‘auto’ is specified, the width will be the same as the small image. ‘auto’
zoomHeight The height of the zoom window in pixels. If ‘auto’ is specified, the height will be the same as the small image. ‘auto’
position Specifies the position of the zoom window relative to the small image. Allowable values are ‘left’, ‘right’, ‘top’, ‘bottom’, ‘inside’ or you can specifiy the id of an html element to place the zoom window in e.g. position: ‘element1’ ‘right’
adjustX Allows you to fine tune the x-position of the zoom window in pixels. 0
adjustY Allows you to fine tune the y-position of the zoom window in pixels. 0
tint Specifies a tint colour which will cover the small image. Colours should be specified in hex format, e.g. ‘#aa00aa’. Does not work with softFocus. false
tintOpacity Opacity of the tint, where 0 is fully transparent, and 1 is fully opaque. 0.5
lensOpacity Opacity of the lens mouse pointer, where 0 is fully transparent, and 1 is fully opaque. In tint and soft-focus modes, it will always be transparent. 0.5
softFocus Applies a subtle blur effect to the small image. Set to true or false. Does not work with tint. false
smoothMove Amount of smoothness/drift of the zoom image as it moves. The higher the number, the smoother/more drifty the movement will be. 1 = no smoothing. 3
showTitle Shows the title tag of the image. True or false. true
titleOpacity Specifies the opacity of the title if displayed, where 0 is fully transparent, and 1 is fully opaque. 0.5

rubbercut · February 28, 2011, 6:05pm

Also ich habs gerade mal eingebaut.

Dein erstes Problem wird wohl eher in der oxid.css zu suchen sein. Damit etwas erscheint, solltest Du bei der Klasse “picture” overflow: hidden; entfernen.

Die weiteren Probleme können wir dann später besprechen.

schmaiki · February 28, 2011, 6:25pm

echt super. vielen dank. hatte ich voll übersehen

amaya · March 1, 2011, 3:13pm

Hallo zusammen, ich habe mich daran versucht und bekomme immer nur ein Zoombild angezeigt, egal welcges Bidl ich anklicke. Hat das noch einer?

Danke amaya m.

rubbercut · March 1, 2011, 5:49pm

…dazu musst Du die Schleife der Thumbs anpassen. Das meinte ich übrigens mit “weitere Probleme”…

amaya · March 5, 2011, 3:03pm

Kann mir jemand erklären wie man das macht :mad:
Bin die einzigste mit dem Problem ?

Uwe_rupprecht · March 8, 2011, 8:32am

Was er damit meint ist, das du diesen Block in der details.tpl:

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

entsprechend der Anleitung anpassen mußt, damit das richtige Bild für den Zoom benutzt wird.

nettue · March 9, 2011, 11:08am

hallo leute…

erstma super, dass es bei mir bei einem bild geht…hab jetz aber auch das problem wie amaya…
kann jemand die angepasste schleife für die thumbnails posten, das wäre klasse…

danke im voraus
nettue

aggrosoft · March 9, 2011, 11:26am

wie wärs mit selber schreiben ?

nettue · March 9, 2011, 11:31am

würde ich gern…
nur leider fehlt mir dazu ein wenig das wissen diesbezüglich…
deswegen wäre ich froh, wenn hilfe von der community kommen würde

aggrosoft · March 9, 2011, 11:39am

so hört sich das schon anders an

nettue · March 9, 2011, 11:45am

=)
Und meinst du es könnte jemand helfen?! bin schon am verzweifeln, habe es natürlich schon selber probiert, nur irgendwie steige ich nicht recht dahinter…

aggrosoft · March 9, 2011, 12:28pm

Ich zitiere da mal joscha krugs foren footer:

[B]Hints for free - solutions NOT[/B]

Du wirst hier im Forum nie eine komplett fertige Sache kriegen, nur Hilfe dazu wie du da hin kommst. Also stell am besten die richtigen Fragen und befasse dich etwas damit. Wenn du es ganz und gar nicht schaffst dann beauftrage eine Agentur.

nettue · March 9, 2011, 1:09pm

ja, das ist mir ja bewußt, dass ich keine kompletten lösungen bekommen - einfach so…

Also mein bisheriger morePics - Code sieht folgendermaßen aus:


 <div class="picture">
<a href="[{$product->getZoomPictureUrl($iZoomPic)}]" class="cloud-zoom" id="zoom1" rel="adjustY:0, adjustx:0, zoomWidth:'200', fixZoomWindow:'200'">
<img src="[{$oView->getActPicture()}]" alt="[{$oDetailsProduct->oxarticles__oxtitle->value|strip_tags}] [{$oDetailsProduct->oxarticles__oxvarselect->value|strip_tags}]">
</a>


      <!-- MEHR BILDER -->
      [{if $oView->morePics() }]
      <div class="morepics">
      [{foreach from=$oView->getIcons() key=picnr item=ArtIcon name=MorePics}]
      <a id="test_MorePics_[{$smarty.foreach.MorePics.iteration}]"  
rel="useZoom: 'zoom1', smallImage: 'HIER WEISS ICH LEIDER DEN CODE NICHT!' " href="[{ $product->getLink()|oxaddparams:"actpicid=`$picnr`" }]"  onclick="oxid.image('zoom1','[{$product->getPictureUrl($picnr)}]');return false;"><img src="[{$product->getIconUrl($picnr)}]" alt=""></a> [{/foreach}] </div>
      [{/if}]
      <!-- ENDE MEHR BILDER -->
    </div>

wie weit bin ich vom wunschergebnis weg?!