Thread

Hi,

Sorry if this question is irrelevant. I am designing a backend where the user uploads one big image with components on it like windows, tv aerials, chairs [all these appear on the bigger image]. This big image is gonna be shown on home page. These components represent products. Now on the homepage below the big image, there will be a photo gallery indicating the components added to the bigger image separately. For instance a window photo, tv aerial. On the photo gallery when the user clicks on the component or product, it should somehow be active on the bigger image as a link that will redirec to the product page. Now how do I know the coordinates of the clicked thumbnail? How will I tell where the clicked component is on the bigger image. Mind you, I need to determine the location on the big image after clicking on the thumbnail. I’ll use image maps on the bigger image, but the coordinates have to be passed to the relevant url dynamically based on the thumbnail clicked below on the photo gallery. Your help will be highly appreciated.

Regards,
Marks

Marks,

Can you post a screenshot of the design so we can see what you’re trying to do?

Ben

Hi,

Following is a series of the products that will be below the main picture[example image]. The main picture above these images will be one big image consisting of all the small images. When one clicks on a certain image [small images attached], an arrow should appear on the big image showing where the clicked thumbnail is on the bigger image. This should be done dynamically. A big image will be uploaded and products [small images] added afterwards. So the links on the small images should somehow be linked to the relevant location on the big image.

Regards,
Marks

Mark,

There’s nothing built in to Expression Engine that will do this.  Depending on the constraints of your page, you may be able to write some custom javascript to do this.  However, if the products appear in the big image in arbitrary positions, how will your code know these positions, without human input?

Hi,

Thanks for your feedback. It is exactly what I was telling my client. Because the idea I had was to capture the co-ordinates of the image location as well in the back-end so that I could target the correct products in the image map. Anyways, thanks a lot and suggestions are still welcome on this. I really appreciate it. Good for me that I am thinking the same way as you regarding this.

Regards,
Marks

With some fancy javascript or flash, you could allow the user to draw semi-opaque boxes on top of the uploaded image, and then tag them.  But this won’t be simple.

Ben

Hi,

I really appreciate your suggestions and I thought about that as well. But I’ll rather employ JavaScript because I am more comfortable with it more than flash. Thanks a million. I did not want to start on this project without proper planning. Now I know what I am up against and I hope all will go well.

Regards,
Marks