stockton Posted June 12, 2009 Share Posted June 12, 2009 In the following code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <head> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script language="javascript" type="text/javascript"> (document.getElementById) ? dom = true : dom = false; //select ie mozilla function hideIt() { if (dom) {document.getElementById("layer1").style.visibility='hidden';} //ie if (document.layers) {document.layers["layer1"].visibility='hide';} //mozilla } function showIt(image) { $(document).ready(function() { $('#bigimage').load(image); }); if (dom) {document.getElementById("layer1").style.visibility='visible'; document.getElementByID('bigimage').src=image;} if (document.layers) {document.layers["layer1"].visibility='show'; document.getElementByID('bigimage').src=image;} } onResize="window.location.href = window.location.href"; </script> </head> <body> <img src='images/dogs/PB030060A_thumb.JPG' onClick="showIt('images/dogs/PB030060A.JPG');"> <img src='images/dogs/P4220081B_thumb.JPG' onClick="showIt('images/dogs/P4220081B.JPG');"> <img src='images/dogs/P4220084B_thumb.JPG' onClick="showIt('images/dogs/P4220084B.JPG');"> <img src='images/dogs/P6050086A_thumb.JPG' onClick="showIt('images/dogs/P6050086A.JPG');"> <div id="layer1" style="position:fixed; left:20px; width:65%; top:20px; visibility:hidden;"> <img id='bigimage' src='blank.jpg' onClick="hideIt();" alt='Click to close this image'> </div> </body> </html> I get the bigimage image contents(?hex?) to dispay rather than the image itself. This can be seen at http://www.stockton.co.za/prince1.shtml and click on a thumbnail. Please tell me how I got this wrong. Quote Link to comment Share on other sites More sharing options...
rhodesa Posted June 12, 2009 Share Posted June 12, 2009 you don't want to do an AJAX call...you want to create an <IMG> tag and set the source of that to the image source Quote Link to comment Share on other sites More sharing options...
rhodesa Posted June 12, 2009 Share Posted June 12, 2009 p.s. - since you are already using jQuery...check out something like this: http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/ Quote Link to comment Share on other sites More sharing options...
stockton Posted June 12, 2009 Author Share Posted June 12, 2009 Thank you for your reply but that does not explain why the image is displaying in the manner that it is. Quote Link to comment Share on other sites More sharing options...
Axeia Posted June 12, 2009 Share Posted June 12, 2009 Actually it does, you're loading the image via ajax which makes no sense at all, try opening the very same image in your text editor.. it will look the same. Solution is also already provided, change the src attribute to point to the URL of the image. Quote Link to comment Share on other sites More sharing options...
stockton Posted June 12, 2009 Author Share Posted June 12, 2009 Thank you for your reply and I did not really understand the original solution, getting old I suppose. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.