Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Mar 2006
    Posts
    200
    Thanks
    27
    Thanked 2 Times in 2 Posts

    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:

    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:

    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:

    Code:
     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
    Last edited by nickyfraggle; 07-28-2009 at 01:37 PM.

  • #2
    Regular Coder
    Join Date
    Mar 2006
    Posts
    200
    Thanks
    27
    Thanked 2 Times in 2 Posts
    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

    Code:
    <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

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    Shadowbox.clearCache();
    Shadowbox.setup();
    This is OK with me, hope that useful with u!

  • #4
    New to the CF scene
    Join Date
    May 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Quote Originally Posted by nvhcuong View Post
    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:
    Code:
    Shadowbox.clearCache();
    Shadowbox.setup();
    This is OK with me, hope that useful with u!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •