updating href of link with shadowbox & flash

Hello,

I have a site that uses JS to swap images e.g. user clicks on a thumbnail and then the main image changes to show the thumb they've clicked on.

So now I'd like that main image to link somewhere, and to change where it links to when the thumb is clicked on also.

The link updates ok using my JS, but the shadowbox always loads the flash using the same image variable, not the new one my JS is specifying.

Here's my code:

Image in Source Code:


<div id="show_main_image">
<a href="http://www.mysite.co.uk/zoom/zoom.swf?image=http://www.mysite.co.uk/uploads/1234153173_original_1.jpg" rel="shadowbox;width=600;height=400" id="myAnchor">
<img src="../thumbnails/phpThumb.php?src=/home/sites/mysite.co.uk/public_html/uploads/1234153173_original_1.jpg&amp;w=333&amp;h=284" border="0" name="mainimage" alt="some alt"/></a>
</div>

Thumb in Source code:


<div id="thumbpics">
<p><a href="javascript:selectPicture('1234153173','1');"><img src="../thumbnails/phpThumb.php?src=/home/sites/mysite.co.uk/public_html/uploads/1234153173_thumb_1.jpg&amp;w=50&amp;h=50" border="0" class="thumbpic" alt="some alt"/></a>
<a href="javascript:selectPicture('1234153173','2');"><img src="../thumbnails/phpThumb.php?src=/home/sites/mysite.co.uk/public_html/uploads/1234153173_thumb_2.jpg&amp;w=50&amp;h=50" border="0" class="thumbpic" alt="some alt2"/></a></p>
</div>

Javascript to change the main image:

function selectPicture(uniqueid,imgno)
{
var filenamepic = '../thumbnails/phpThumb.php?h=333&w=284&src=../uploads/' + uniqueid + '_original_' + imgno + '.jpg';
var linkurl = 'http://www.mysite.co.uk/zoom/zoom.swf?image=../thumbnails/phpThumb.php?h=333&w=284&src=../uploads/' + uniqueid + '_original_' + imgno + '.jpg';

document.getElementById('myAnchor').href=linkurl;

document.mainimage.src=filenamepic;


}

So the document.mainimage.src bit works, as it updates the main image, the link is updated but the shawdowbox and Flash is always showing the image it is first sent when the page is loaded.

Does anyone have any ideas on how to get round this?

Thanks,

Nicola

I've found some info on the ShadowBox website that might help, but I genuinely don't understand it...

http://www.shadowbox-js.com/usage.html#advanced

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
// skip the automatic setup, we'll do this later manually
skipSetup: true,
// include the quicktime and windows media player players for playing
// movies (assuming we have some movies we want to show in either of
// those formats)
players: ["qt", "wmp"]
});

window.onload = function(){

// set up all anchor elements with a "movie" class to work with Shadowbox
Shadowbox.setup("a.movie", {
gallery: "My Movies",
autoplayMovies: true
});

};
</script>


If anyone could explain this I'd really appreciate it....

Thanks,

Nicola

Hi,

I get same issue with u and I find a solution.

In your selectPicture function, after the code assign new image:

document.mainimage.src=filenamepic;

please add:
Shadowbox.clearCache();
Shadowbox.setup();


This is OK with me, hope that useful with u!

Thank you very much, nvhcuong! I had the same problem and I've spent hours looking for a solution until I found this!!! Really appreciate your help as I noticed your solution to the original question was actually years after the original post, but please don't stop posting solutions as there are always some other people encountered the same problem and haven't got a solution yet.

Thanks again.

Hi,

I get same issue with u and I find a solution.

In your selectPicture function, after the code assign new image:

document.mainimage.src=filenamepic;

please add:
Shadowbox.clearCache();
Shadowbox.setup();


This is OK with me, hope that useful with u!