PHP and Cloud Zoom.....need help..

[pavelazad]

hii,

I want use cloud zoom script (http://www.professorcloud.com/mainsite/cloud-zoom.htm) in my ecommerce website for image zoomer. I have checked the code and I think I need 3 different size image of an image to implement cloud zoom script. I have 4 different images of a product which link is saved in my database table. Is it possible to retrieve a singe image with different size from my table to implement cloud zoom image gallary? please let me know your advice or ways to implement. thanks.

[Cups]

According to their docs you only need 3 images, and you'd probably do well to only keep the address of one image in your database.

eg

dogs_table
=========
id | dog_name | image
----------------------
2 | bozo | /dogs/bozo.jpg

Then on your file system have 3 images you create elsewhere, but always adhere to a strict naming convention:

/images/dogs/bozo.jpg
/images/dogs/bozo-medium.jpg
/images/dogs/bozo-large.jpg

(with that naming convention you could even get away with not storing the image name)

Then it will be quite easy to generate the necessary matching code that cloud zoom requires. Use PHP to output the necessary vars into each loop.

<a href='/images/dogs/bozo-large.jpg' class='cloud-zoom-gallery' title='Bozo'
        	rel="useZoom: 'zoom1', smallImage: '/images/dogs/bozo.jpg' ">
        <img src="/images/dogs/bozo-medium.jpg" alt = "Bozo"/></a>

You could also use the id number alone as the identifier as they show in their demo code.

<a href='/images/zoomengine/bigimage00.jpg' class='cloud-zoom-gallery' title='Thumbnail 1'
        	rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage.jpg' ">
        <img src="/images/zoomengine/tinyimage.jpg" alt = "Thumbnail 1"/></a>
        
        <a href='/images/zoomengine/bigimage01.jpg' class='cloud-zoom-gallery' title='Thumbnail 2'
        	rel="useZoom: 'zoom1', smallImage: ' /images/zoomengine/smallimage-1.jpg'">
        <img src="/images/zoomengine/tinyimage-1.jpg" alt = "Thumbnail 2"/></a>                  
        
        <a href='/images/zoomengine/bigimage02.jpg' class='cloud-zoom-gallery' title='Thumbnail 3'
        	rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage-2.jpg' ">
        <img src="/images/zoomengine/tinyimage-2.jpg" alt = "Thumbnail 3"/></a>

You may have other reasons to store 4 image paths in your database table, but setting up a naming convention and following it would probably be enough to use this jQuery code.

[pavelazad]

Dear Cups,

Thanks for your reply. I am a bit confused about your given solution as i am bit new. for a bit for explanation suppose this is my table..

product table:
==========
id | product_name | image1 | image2 | image3 | image4
---------------------------------------------------------------
2 | mobile | /images/front.jpg | /images/back.jpg | /images/right.jpg | /images/left.jpg

so, four different images link is stored in my table which are front, back, right and left image of a product.

Do you want me to store 3 sizes of a single image in my image folder manually as front-midium.jpg and front-tiny.jpg?

if so i will retrieve a product information with product id, how can i use three different php variable as cloud zoom require 3 images?

please give me a bit more explanation if possible. thanks.

[Cups]

2 | mobile | /images/front.jpg | /images/back.jpg | /images/right.jpg | /images/left.jpg

The problem is that each of these image names will not be unique if you want to show the front/back/left/right of other things.

Lets say the product 3 is "fixed" (as opposed to "mobile")

3 | fixed | /images/front.jpg | /images/back.jpg | /images/right.jpg | /images/left.jpg

so, you need to come up with a file naming convention that will scale....

3 | fixed | /images/3front.jpg | /images/3back.jpg | /images/3right.jpg | /images/3left.jpg

Then you can iterate through your products (or a given product) outputting those unique addresses...

foreach($rows as $row){

echo '<img src="'. $row['image1'] .'" />';
// gives <img src="images/3front.jpg" />

} 

Will each of your products have left/right/front/back ?

[pavelazad]

yes each product have front/back/right/left image. yeh you are right the product name is fixed and with your proposed naming convension how can I implement cloud zoom image gallary with these 4 images of a product? can you please write me a bit of code? thanks.

[Cups]

I looked at cloud zoom as I had not heard of that service, and you kindly linked to it -- to discover it is essentially a mixture of js/jQuery and HTML code which you can adapt to interleave with PHP generated to values. Nice.

You have a go at doing it yourself and come back with specific questions about PHP, I won't write code for you, but I will help you learn if that is what you are after...

Hint: get cloud zoom working with hardcoded values which you have entered concerning one of your products, then when that is working properly to your satisfaction start replacing the values from variables you create in PHP get that working, and only THEN replace them with values that PHP drags from your db.