Question

the below mentioned code is working perfectly, that when clicking the thumbnail the larger image is opening in a blank window, but i have an html page fprod.html with a
<div id="mainimg></div>.

I want the image to be open there. Now, how to target the div in that html page?

$(function () {

  $(document).on('click', 'div.prodcls img', function (e) {
    e.preventDefault();
    window.open($(this).attr('src').replace('images/zara/thumbnails/1.png', 'images/zara/big.png'), '');
  });

});

Answer 1

You could open the fprod.html in a new window instead of the image. The URL to the image could be provided as a parameter and you could have a javascript in fprod.html put the image in the you wanted.

http://..../fprod.html?image=images/zara/thumbnails/1.png

The script in fprod.html could look something like:

var img = $("<img/>").attr("src","window.location.search.replace("?","")");
$("#mainimg").append(img);