css - Help debugging jquery simple gallery - swf / images -



css - Help debugging jquery simple gallery - swf / images -

i have next code:

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" language="javascript" src="jquery/jquery-1.5.1.js"></script> <script type="text/javascript" language="javascript" src="http://jquery.thewikies.com/swfobject/jquery.swfobject.1-1-1.min.js"></script> <style> div#test{background:#ffffff;width:360px;height:360px;display:none;z-index:5;position: fixed;} </style> </head> <body> <table border="1"> <tr> <td height="360"><div id="test"></div> <img id="full_image" src="1.jpg" alt="0" width="360" height="360" border="0" /> <span id="flash" style="width:360px;height:360px;border:0px;margin:0px;padding:0px;z-index:-1;"></span> </td> <td> <table> <tr> <td><a href="1.jpg" class="thumbnail"><img src="1.jpg" width="70" height="70"></a></td> </tr> <tr> <td><a href="2.jpg" class="thumbnail"><img src="2.jpg" width="70" height="70"></a></td> </tr> <tr> <td><a href="initial_cat.swf" class="video"><img src="3.jpg" width="70" height="70" class="video"></a></td> </tr> <tr> <td><a href="fireworks.swf" class="video"><img src="3.jpg" width="70" height="70"></a></td> </tr> </table> </td> </tr> </table> <br /><br /> <script type="text/javascript"> $(document).ready(function() { $("#flash").hide(); $('a.thumbnail').click(function(){ var src = $(this).attr('href'); if (src != $('img#full_image').attr('src').replace(/\?(.*)/,'')){ $("#test").fadein("slow", function () { $("#flash").hide(); $("#test").hide(); $("img#full_image").show(); $("img#full_image").css({ opacity: 0 }); $('img#full_image').attr('src', src+'?'+math.floor(math.random()*(10*100))); $('img#full_image').stop().animate({opacity: '1'}, 'slow'); }) }; homecoming false; }); $('a.video').click(function(){ var src = $(this).attr('href'); $("img#full_image").fadeout("slow", function () { $("#test").show(); $("#flash").show(); $('#flash').flash({swf: src+'?'+math.floor(math.random()*(10*100)), height: 360, width: 360}); $("img#full_image").hide(); $("#test").fadeout("slow"); }); homecoming false; }); }); </script> </body> </html>

this has thumb images, can clicked loaded main image or swf loaded fade in / fade out effect.

now there 2 bugs have found , need guidance in fixing them.

when clicking between thumb image loads swf / images after while of playing around, when 1 of swf's loaded sometimes, randomly 1 of thumbs (which loads image) stops working, clicking next thumb starts work again. unusual , i'm not sure how debug help appreciated. (this bug visible in chrome, firefox + ie).

when clicking thumb loads swf file in firefox table moves have set border, padding , margin 0. missing ?

-----------------------------------update----------------------

i have uploaded to:

http://www.kwedsd.byethost7.com/1.html viewing, please note maybe worth loading page , clicking through thumbs , reloading page see transitions working properly. (i haven't yet implemented preloading, caches files).

thanks

jquery css image flash

Comments

Popular posts from this blog

iphone - Dismissing a UIAlertView -

c# - Can ProtoBuf-Net deserialize to a flat class? -

javascript - Change element in each JQuery tab to dynamically generated colors -