I'm working on a facebook landing page using iFrames and am having some issues with the java script in our code. Considering i don't have much experience when it comes to JS i figured i'd head to the forums after about 6 hrs every leaning over the keyboard attempting to figure out what's wrong. Essentially i have 8 thumbnails that are supposed to show an expanded image once clicked. This is executed using java script, but for some reason it's not working in the iframe. The 3rd party developer of the iframe app i'm using is supposed to be JS friendly, so i think the problem is in the script. Currently, when you click on the thumbnail absolutely nothing happens, but a it's still showing a url in the bottom left corner of my browser, but it's the app's default error page. I double checked all the source url's & they are all correct. Not sure what i'm missing here. Here's a copy: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Facebook Page Template 30 - Forsage Facebook Template</title> <STYLE TYPE="text/css"> <!-- A:link {text-decoration: none; color: red} A:hover {text-decoration: underline; color:blue} //--> </style> <script type="text/javascript"> function showImage(imgName) { var curImage = document.getElementById('currentImg'); var thePath = 'http://www.xxx.com/facebook/Templates/30/html/images/'; var theSource = thePath + imgName; curImage.src = theSource; } </script> </head> <body style="margin:0; padding:0;"> <div style="width:520px; background:#000000 url(http://www.xxx.com/facebook/Templates/30/html/images/pageBackground.jpg) no-repeat left top; min-height:700px; font-family:Arial, Helvetica, sans-serif; color:#a08ca1; font-size:12px;"> <div style="padding:10px 0 0 30px;"><img src="http://www.xxx.com/facebook/Templates/30/html/images/logo.png" border="0" alt="" /></a></div> <div style="padding: 0px 30px 10px 30px;"> <div id="photo00" style="float:left;"><img id="currentImg" src="http://www.xxx.com/facebook/Templates/30/html/images/p00.png" alt="" /></div> <div id="photo01" style="display:none; float:left;"><img id="currentImg" src="http://www.xxx.com/facebook/Templates/30/html/images/p01.png" alt="" /></div> <div id="photo02" style="display:none; float:left;"><img id="currentImg" src="http://www.xxx.com/facebook/Templates/30/html/images/p02.png" alt="" /></div> <div id="photo03" style="display:none; float:left;"><img id="currentImg" src="http://www.xxx.com/facebook/Templates/30/html/images/p03.png" alt="" /></div> <div id="photo04" style="display:none; float:left;"><img id="currentImg" src="http://www.xxx.com/facebook/Templates/30/html/images/p04.png" alt="" /></div> <div id="photo05" style="display:none; float:left;"><img id="currentImg" src="http://www.xxx.com/facebook/Templates/30/html/images/p05.png" alt="" /></div> <div id="photo06" style="display:none; float:left;"><img id="currentImg" src="http://www.xxx.com/facebook/Templates/30/html/images/p06.png" alt="" /></div> <div id="photo07" style="display:none; float:left;"><img id="currentImg" src="http://www.xxx.com/facebook/Templates/30/html/images/p07.png" alt="" /></div> <div style="float:right;"> <a href="#" clicktoshow="photo00" clicktohide="photo01,photo02,photo03,photo04,photo05,photo06,photo07"><img src="http://www.xxx.com/facebook/Templates/30/html/images/th00.png" border="0" alt="thumb 00" /></a> <a href="#" clicktoshow="photo01" clicktohide="photo00,photo02,photo03,photo04,photo05,photo06,photo07"><img src="http://www.xxx.com/facebook/Templates/30/html/images/th01.png" border="0" alt="thumb 01" /></a><br /> <div style="padding-top:2px;"></div> <a href="#" clicktoshow="photo02" clicktohide="photo01,photo00,photo03,photo04,photo05,photo06,photo07"><img src="http://www.xxx.com/facebook/Templates/30/html/images/th02.png" border="0" alt="thumb 02" /></a> <a href="#" clicktoshow="photo03" clicktohide="photo01,photo02,photo00,photo04,photo05,photo06,photo07"><img src="http://www.xxx.com/facebook/Templates/30/html/images/th03.png" border="0" alt="thumb 03" /></a><br /> <div style="padding-top:2px;"></div> <a href="#" clicktoshow="photo04" clicktohide="photo01,photo02,photo03,photo00,photo05,photo06,photo07"><img src="http://www.xxx.com/facebook/Templates/30/html/images/th04.png" border="0" alt="thumb 04" /></a> <a href="#" clicktoshow="photo05" clicktohide="photo01,photo02,photo03,photo04,photo00,photo06,photo07"><img src="http://www.xxx.com/facebook/Templates/30/html/images/th05.png" border="0" alt="thumb 05" /></a><br /> <div style="padding-top:2px;"></div> <a href="#" clicktoshow="photo06" clicktohide="photo01,photo02,photo03,photo04,photo05,photo00,photo07"><img src="http://www.xxx.com/facebook/Templates/30/html/images/th06.png" border="0" alt="thumb 06" /></a> <a href="#" clicktoshow="photo07" clicktohide="photo01,photo02,photo03,photo04,photo05,photo06,photo00"><img src="http://www.xxx.com/facebook/Templates/30/html/images/th07.png" border="0" alt="thumb 07" /></a> </div> </div> <div style="clear:both;"></div> <div> <div style="padding:5px 30px 0 30px;"><img src="http://www.xxx.com/facebook/Templates/30/html/images/arrow.png" style="float:left;" width="32" height="32" alt="" /><div style="color:#F00F0F; padding:5px 0 0 40px; font-size:24px;"><a href="http://www.xxx.com/boty"> "Click Here to Cast Your Vote</a></div></div> <div style="padding:10px 30px 30px 30px;"> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially<br /><br /> unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </div> <div style="background:url(http://www.xxx.com/facebook/Templates/30/html/images/footerBackground.jpg) repeat-x left top; height:53px;"> <div style="float:left; padding:20px 0 0 30px; color:#d4b9d8; font-size:10px;">Copyright © xxx| </a></div> <div style="float:right; padding:10px 30px 0 0;"> <ul style="margin:0; padding:0;"> <li style="list-style:none; float:left;"><a href=""><img src="http://www.xxx.com/facebook/Templates/30/html/images/Inside-twitter-32.png" border="0" alt="" /></a></li> <li style="list-style:none; float:left;"><a href=""><img src="http://www.xxx.com/facebook/Templates/30/html/images/Inside-facebook-32.png" border="0" alt="" /></a></li> <li style="list-style:none; float:left;"><a href=""><img src="http://www.xxx.com/facebook/Templates/30/html/images/Inside-flickr-32.png" border="0" alt="" /></a></li> <li style="list-style:none; float:left;"><a href=""><img src="http://www.xxx.com/facebook/Templates/30/html/images/Inside-rss-32.png" border="0" alt="" /></a></li> </ul> </div> </div> </div> <style type=text/css><A:link{text-decoration: none; color:#F00F0F"} A:hover {text-decoration: underline; color: # 0000FF'}</style>
Please ignore the very last line of code. Just scrap code i was playing with... not supposed to be in there.
I would change your script from: To: <script type="text/javascript"> function showImage(imgNumber) { /*first hide all the div's*/ document.getElementById('photo00').style.display = "none"; document.getElementById('photo01').style.display = "none"; document.getElementById('photo02').style.display = "none"; document.getElementById('photo03').style.display = "none"; document.getElementById('photo04').style.display = "none"; document.getElementById('photo05').style.display = "none"; document.getElementById('photo06').style.display = "none"; document.getElementById('photo07').style.display = "none"; /*now show appropriate div with photo*/ document.getElementById('photo0'+imgNumber).style.display = "block"; } </script> Code (markup): And then your html code from: To: <a href="javascript:showImage(0);"><img src="http://www.xxx.com/facebook/Templates/30/html/images/th00.png" border="0" alt="thumb 00" /></a> <a href="javascript:showImage(1);"><img src="http://www.xxx.com/facebook/Templates/30/html/images/th01.png" border="0" alt="thumb 01" /></a><br /> <div style="padding-top:2px;"></div> <a href="javascript:showImage(2);"><img src="http://www.xxx.com/facebook/Templates/30/html/images/th02.png" border="0" alt="thumb 02" /></a> <a href="javascript:showImage(3);"><img src="http://www.xxx.com/facebook/Templates/30/html/images/th03.png" border="0" alt="thumb 03" /></a><br /> <div style="padding-top:2px;"></div> <a href="javascript:showImage(4);"><img src="http://www.xxx.com/facebook/Templates/30/html/images/th04.png" border="0" alt="thumb 04" /></a> <a href="javascript:showImage(5);"><img src="http://www.xxx.com/facebook/Templates/30/html/images/th05.png" border="0" alt="thumb 05" /></a><br /> <div style="padding-top:2px;"></div> <a href="javascript:showImage(6);"><img src="http://www.xxx.com/facebook/Templates/30/html/images/th06.png" border="0" alt="thumb 06" /></a> <a href="javascript:showImage(7);"><img src="http://www.xxx.com/facebook/Templates/30/html/images/th07.png" border="0" alt="thumb 07" /></a> Code (markup): This is a very basic routine example. If you want it to look a bit cooler with some effects when changing displayed picture, then you can try using jquery maybe. BTW: You can't have multiple items with the same ID on your page. So id="currentImg" will mess up with your scripts if you try to call it by ID, that's for sure. It will not display any errors though.
That works perfectly. Apparently the image id's were the issue. I'll look into some jquery methods, as i've never used it before but am interested in learning. Thanks!!!
Here's one quick example. I'm sure it can be improved more, but it works, so that's what's important. Javascript part in heading: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> function showImage(imgNumber) { /*first hide all the div's*/ $(".targetpics").animate({ opacity: 'hide' }, "fast"); /*now show appropriate div with photo*/ $("#photo0"+imgNumber).show("slow"); } </script> Code (markup): To each picture div that needs to be enlarged add class="targetpics" so it looks for example like this: <div id="photo00" class="targetpics" style="float:left;"> <div id="photo01" class="targetpics" style="display:none; float:left;"> ... <div id="photo07" class="targetpics" style="display:none; float:left;"> Code (markup): and the part you have already changed in previous example for links on thumbnails: <a href="javascript:showImage(0);"> <a href="javascript:showImage(1);"> ... <a href="javascript:showImage(7);"> Code (markup): You can experiment further from there by changing javascript code. Cheers!