How to show enlarged image in popup with only 1 popup?

Question

I am trying to show enlarged images of my products on my webpage. A popup should appear when I click on the thumbnail. Instead of creating a new popup for every thumbnail, how can I show the enlarged image in the thumbnail?

Here's my jQuery code for the popup, please tell me where to add the new code in.

<script type="text/javascript">

$(document).ready( function() {
    $('ul.animated li').click( function() {
        $('#popup_box').fadeIn();
        $('#cover').fadeIn();
    });
    $('#popupBoxClose').click( function() {            
        $('#popup_box').fadeOut();
        $('#cover').fadeOut(); 
    });
    $('#cover').click( function() {
        $('#popup_box').fadeOut();
        $('#cover').fadeOut(); 
    });
}); </script>

Answer 1

I can't comment your post so I have to write this as an answer. Have you checked this: jQuery target $(window) on a specific webpage ? This may be not your question but I assume you can work with target($window).