Small coding issue

[iCeR]

I'm using a wordpress theme which comes with a zoom feature for the product (main image and image gallery thumbnails). 

It currently opens the primary image (and any thumbnail) in a modal window which is quite ugly for a product showcase. 

 

Code is:

 

    	$imgtag = '<img src="'.$src.'"'.$titleattr.' alt="'.$alt.'" width="'.$width_a.'" height="'.$height_a.'" '.$classes.' />';
    
    if (value_is_true($zoom))
    	return '<a href="'.ecarturl($img->id,'images').'/'.$img->filename.'" class="'.$zoomfx.'" rel="product-'.$this->id.'">'.$imgtag.'</a>';

I'm trying to implement Cloudzoom (http://www.professorcloud.com/mainsite/cloud-zoom-integration.htm)

 

I changed the code to:

$imgtag = '<a href="'.ecarturl($img->id,'images').'/'.$img->filename.'" class = "cloud-zoom" id="zoom1" rel="adjustX: 10, adjustY:-4, zoomWidth:150, zoomHeight:150, position:\'inside\'"> <img src="'.$src.'"'.$titleattr.' alt="'.$alt.'" width="'.$width_a.'" height="'.$height_a.'" '.$classes.' /></a>';

if (value_is_true($zoom))
	return '<a href="'.ecarturl($img->id,'images').'/'.$img->filename.'" class="cloud-zoom-gallery" rel="useZoom: \'zoom1\'">"'.$imgtag.'</a>';

HTML Output:

    <div id="main-picture-default">
    			<a href="http://www.url.com?siid=9/2-9202.jpg" class = "cloud-zoom" id="zoom1" rel="adjustX: 10, adjustY:-4, zoomWidth:150, zoomHeight:150, position:'inside'"> <img src="http://www.url.com?siid=9&#038;360,450,1,100,2441305929" alt="product-picture" width="360" height="450"  /></a>		</div>
    <div id="thumbs">
    <ul id="thumbs-list-default">
    
    <li class="one_third "><a href="http://www.url.com?siid=9/2-9202.jpg" class="cloud-zoom-gallery" rel="useZoom: 'zoom1'">&#8220;<a href="http://www.url.com?siid=9/2-9202.jpg" class = "cloud-zoom" id="zoom1" rel="adjustX: 10, adjustY:-4, zoomWidth:150, zoomHeight:150, position:'inside'"> <img src="http://www.url.com?siid=9&#038;64,64,1,452849676" alt="thumb" width="64" height="64"  class="thumb-picture" /></a></a></li>
    <li class="one_third "><a href="http://www.url.com?siid=17/2-9203.jpg" class="cloud-zoom-gallery" rel="useZoom: 'zoom1'">&#8220;<a href="http://www.url.com?siid=17/2-9203.jpg" class = "cloud-zoom" id="zoom1" rel="adjustX: 10, adjustY:-4, zoomWidth:150, zoomHeight:150, position:'inside'"> <img src="http://www.url.com?siid=17&#038;64,64,1,1330882420" alt="thumb" width="64" height="64"  class="thumb-picture" /></a></a></li>
    </ul>

 

The primary image zooms just fine. 

 

The trouble I have now caused is as follows: 

 

- On hovering the thumbnails, they automatically zoom. They shouldn't. Rather on clicking them it should change the primary image to that image. 

- There is a " on the page above each thumbnail which links to the thumbnail images bigger image, and on click it shows "loading" on the primary image but doesn't actually change the image.

 

How can I fix my code to work the way the script works here: http://www.professorcloud.com/mainsite/cloud-zoom-test.htm, so the thumbnail changes the primary image and the zoom doesn't occur on the thumbnail, only the primary image? 

 

Thanks!

 

Note: Would changing the last line `'.$imgtag.'` to `'.ecarturl($img->id,'images').'/'.$img->filename.'` be the fix? Don't want to try it before I get confirmation

[Buddski]

Your thumbnails have 2 A tags.

The external one is the correct use of the gallery feature but the internal one is creating a new instance of the zoom function.

You will need to detect the first image, set code for it then use different code for the rest of the images. Its this is in a loop it should be an easy fix You also had an extra " inside the thumbnail views A tag.

$imgtag = '<img src="'.$src.'"'.$titleattr.' alt="'.$alt.'" width="'.$width_a.'" height="'.$height_a.'" '.$classes.' />';
if (value_is_true($zoom)) {
// determine if its the first image or not 
if (is_first_image_statement) {
	return '<a href="'.ecarturl($img->id,'images').'/'.$img->filename.'" class = "cloud-zoom" id="zoom1" rel="adjustX: 10, adjustY:-4, zoomWidth:150, zoomHeight:150, position:\'inside\'">'.$imgtag.'</a>';
} else {
	return '<a href="'.ecarturl($img->id,'images').'/'.$img->filename.'" class="cloud-zoom-gallery" rel="useZoom: \'zoom1\'">'.$imgtag.'</a>';
}
}

[iCeR]

Thanks buddski - a little too complex though..

 

This works, however on clicking the second thumbnail, it doesn't change the primary image. Although!! When you zoom over the primary image it does the zoom on the right image.

 

So now I just need to know how to go about when clicking on the 2nd thumbnail, it changes the primary image the zoom is now working perfectly.

 

				$imgtag = '<a href="'.ecarturl($img->id,'images').'/'.$img->filename.'" class = "cloud-zoom" id="zoom1" rel="adjustX: 10, adjustY:-4, zoomWidth:150, zoomHeight:150, position:\'inside\'"> <img src="'.$src.'"'.$titleattr.' alt="'.$alt.'" width="'.$width_a.'" height="'.$height_a.'" '.$classes.' /></a>';

			if (value_is_true($zoom))
				return '<a href="'.ecarturl($img->id,'images').'/'.$img->filename.'" class="cloud-zoom-gallery" rel="useZoom: \'zoom1\'"><img src="'.$src.'"'.$titleattr.' alt="'.$alt.'" width="'.$width_a.'" height="'.$height_a.'" '.$classes.' /></a>';

[iCeR]

Required 'smallimage'..

 

				$imgtag = '<a href="'.ecarturl($img->id,'images').'/'.$img->filename.'" class = "cloud-zoom" id="zoom1" rel="adjustX: 10, adjustY:-4, zoomWidth:150, zoomHeight:150, position:\'inside\'"> <img src="'.$src.'"'.$titleattr.' alt="'.$alt.'" width="'.$width_a.'" height="'.$height_a.'" '.$classes.' /></a>';

			if (value_is_true($zoom))
				return '<a href="'.ecarturl($img->id,'images').'/'.$img->filename.'" class="cloud-zoom-gallery" rel="useZoom: \'zoom1\', smallImage: \''.ecarturl($img->id,'images').'/'.$img->filename.'\'"><img src="'.$src.'"'.$titleattr.' alt="'.$alt.'" width="'.$width_a.'" height="'.$height_a.'" '.$classes.' /></a>';

 

 

Solved - thanks so much!!