jQuery Forum

Hi there,
I'm using jQuery mobile with multi-page template.
In one of my pages I'm using a Loop and it built 5 pages:
<div data-role='page' id='page1'>, <div data-role='page' id='page2'> and etc,.
 which are same, just the values are different as it  taken from SQL tables.
I have an image tag that the id is named as mainPhoto, which is the main photo of of the page.
attached the mainPhoto HTML img tag:

<img id='mainPhoto' src='../image/items/page1.jpg' style='position: relative; margin-left: auto; margin-right: auto; margin-top: -15px;'/>

I also have 2-3 thumbnails photos on the page that when the user click on one of them the small thumbnail photo turn to be the mainPhoto.
Means the previous photo disappeared and the new thumbnail image source replaced with it.
attached the thumbnail HTML code:

<a href='../image/items/page1_01.jpg' data-ajax='false' class='thumbnail'><img src='../image/items/page_01.jpg'/></a>

<a href='../image/items/page1_02.jpg' data-ajax='false' class='thumbnail'><img src='../image/items/page_02.jpg'/></a>

And this is the jQuery code:

$(document).ready(function(){
        $('.thumbnail').click(function(){
        var mainImage = $(this).attr("href"); //Find Image Name
        $("#mainPhoto").attr({ src: mainImage });
        return false;
        });
        });

Everything works great and the swapping of the photos is working on all the pages and photos.
The only problem I'm facing with is that the last swapped image stay in the mainPhoto img class and not refreshed with the new vales, even when I navigate to another page.
For example the mainPhoto of page 1 is page1.jpg by default.
I clicked on the thumbnail and it changed the photo of mainPhoto to be page1_02.jpg.

Now the problem is when I turn to page 2, the new image "page2.jpg" that mentioned in the img html class is not loading, as the jQuery changed it to the previous thumbnail photo in the previous page.
So my problem is that the photo of the previous page is kept, while I already navigate to another page.
How can I set that when a new page loading the mainPhoto will be reset to the HTML code of the nee page that loaded?

Thanks in advanced  for your help!
Ofir.