June 9, 200818 yr Hi, I found the link to the Lightbox2 gallery on here and really want to use it on my website. I tried following the instructions on the site but as a complete beginner it still doesn't work. I copied the first three lines of javascript into the header like it said. I copied all of the downloaded files to my website folder (js, css & images) these have also been uploaded onto my server. This is the problem I had though: It doesn't work at all. The image opens up in a new page. What's wrong?This is commonly caused by a conflict between scripts. Check your body tag and look for an onload attribute. Example: <body onload="MM_preloadImages(‘/images/menu_on.gif’)…;"> A quick fix to this problem is to append the initLightbox() to the onload attribute as so: <body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()"> But I don't understand what the answer means It would be great if someone could give me a step by step guide for someone who has only just started web design!
June 9, 200818 yr Author Oops sorry, the actual site can be viewed at www.projectlumino.co.uk/gallery.html Here is the html for the gallery page with the scripting pasted in as the instructions said. Maybe there could be a problem with the linking of the lightbox css? Just under the friends list of the Album div there is a huge list of code but its my Last fm widget. <!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> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Welcome to Project Lumino</title> <link href="210508.css" rel="stylesheet" type="text/css" /></head> <body> <div id="wrapper"> <div id="header"> <h1><img src="../Images/headerblue.jpg" alt="Project Lumino Site" width="1000" height="174"/></h1> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> </div> <div id="navigation"> <ul> <li><a href="http://www.projectlumino.co.uk/index.html">Home</a></li> <li><a href="http://www.projectlumino.co.uk/biography.html">Biography</a></li> <li><a href="http://www.projectlumino.co.uk/gallery.html">Gallery</a></li> <li><a href="http://www.projectlumino.co.uk/media.html">Media</a></li> <li><a href="http://www.projectlumino.co.uk/merchandise.html">Merchandise</a></li> <li><a href="http://www.projectlumino.co.uk/recommend.html">Recommend</a></li> </ul> </div> <div id="skyline"> <img src="../Images/skyline1000.jpg" /> </div> <div id="main"> <h2>Gallery</h2> <p>This part of the site is still in development - watch this space!</p> </div> <div id="album"> <img src="../Images/PL ALBUM png.png" alt="Waking Up" width="175" height="169"/> <h3>Debut Album - Waking Up</h3> <p>If you would like to listen to my album it is available to purchase from:</p> <ul> <li><a href="http://www.msplinks.com/MDFodHRwOi8vcGhvYm9zLmFwcGxlLmNvbS9XZWJPYmplY3RzL01aU3RvcmUud29hL3dhL3ZpZXdBcnRp 3Q/aWQ9MjY2MjQ0MzY1">iTunes</a></li> <li><a href="http://www.amazon.com/gp/product/B000XSQAUI/ref=dm_sp_adp?ie=UTF8&qid=1212095156&sr=8-1">Amazon mp3</a></li> </ul> <p>To order a special hand-made album you will need a Paypal account.</p> <h3>Project Lumino Profiles:</h3> <ul> <li><a href="http://www.myspace.com/projectlumino">Myspace</a></li> <li><a href="http://www.virb.com/projectlumino">Virb</a></li> <li><a href="http://www.facebook.com/pages/Project-Lumino/6515457735">Facebook</a></li> <li><a href="http://www.amazingtunes.com/users/projectlumino">Amazing Tunes</a></li> <li><a href="http://www.myuploaded.co.uk/projectlumino">Uploaded</a></li> <li><a href="http://www.last.fm/music/Project+Lumino">Last Fm</a></li> <li><a href="http://www.reverbnation.com/projectlumino">ReverbNation</a></li> </ul> <h3>My favourite bands:</h3> <ul> <li><a href="http://www.lemonjelly.ky">Lemon Jelly</a></li> <li><a href="http://www.goddamnelectricbill.com">Goddamn Electric Bill</a></li> <li><a href="http://www.myspace.com/musicvideo">...Music Video?</a></li> <li><a href="http://www.aurevoirsimone.com">Au Revoir Simone</a></li> <li><a href="http://www.myspace.com/portblue">Port Blue</a></li> <li><a href="http://www.zero7.co.uk">Zero 7</a></li> <li><a href="http://www.myspace.com/jacobsstoriesband">Jacobs Stories</a></li> <li><a href="http://www.jimmytamborello.com">Dntel</a></li> <li><a href="http://www.postalservicemusic.net">The Postal Service</a></li> <li><a href="http://www.myspace.com/paperroute">Paper Route</a></li> <li><a href="http://www.myspace.com/froufrou">Frou Frou</a></li> <li><a href="http://www.plasticoperator.com">Plastic Operator</a></li> <li></li> </ul> <h3>My Friends</h3> <ul> <li><a href="http://www.myspace.com/neilcharlesh">Neil Haviland</a></li> <li><a href="htto://www.myspace.com/peppiknott">Pepology</a></li> <li><a href="http://www.myspace.com/thestowawaysband">Stowaway</a></li> <li><a href="http://www.myspace.com/dusc01">Dusc</a></li> </ul> <style type="text/css">table.lfmWidgetchart_5c0382d1f477e89bb4c17dbfddc7659b td {margin:0 !important;padding:0 !important;border:0 !important;}table.lfmWidgetchart_5c0382d1f477e89bb4c17dbfddc7659b tr.lfmHead a:hover {background:url(http://cdn.last.fm/widgets/images/en/header/chart/recenttracks_regular_blue.png) no-repeat 0 0 !important;}table.lfmWidgetchart_5c0382d1f477e89bb4c17dbfddc7659b tr.lfmEmbed object {float:left;}table.lfmWidgetchart_5c0382d1f477e89bb4c17dbfddc7659b tr.lfmFoot td.lfmConfig a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/blue.png) no-repeat 0px 0 !important;;}table.lfmWidgetchart_5c0382d1f477e89bb4c17dbfddc7659b tr.lfmFoot td.lfmView a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/blue.png) no-repeat -85px 0 !important;}table.lfmWidgetchart_5c0382d1f477e89bb4c17dbfddc7659b tr.lfmFoot td.lfmPopup a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/blue.png) no-repeat -159px 0 !important;}</style> <table class="lfmWidgetchart_5c0382d1f477e89bb4c17dbfddc7659b" cellpadding="0" cellspacing="0" border="0" style="width:184px;"><tr class="lfmHead"><td><a title="hsellors: Recently Listened Tracks" href="http://www.last.fm/user/hsellors/" target="_blank" style="display:block;overflow:hidden;height:20px;width:184px;background:url(http://cdn.last.fm/widgets/images/en/header/chart/recenttracks_regular_blue.png) no-repeat 0 -20px;text-decoration:none;border:0;"></a></td></tr><tr class="lfmEmbed"><td><object type="application/x-shockwave-flash" data="http://cdn.last.fm/widgets/chart/friends_6.swf" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="184" height="199" > <param name="movie" value="http://cdn.last.fm/widgets/chart/friends_6.swf" /> <param name="flashvars" value="type=recenttracks&user=hsellors&theme=blue&lang=en&widget_id=chart_5c0382d1f477e89bb4c17dbfddc7659b" /> <param name="bgcolor" value="6598cd" /> <param name="quality" value="high" /> <param name="allowScriptAccess" value="always" /> <param name="allowNetworking" value="all" /> </object></td></tr><tr class="lfmFoot"><td style="background:url(http://cdn.last.fm/widgets/images/footer_bg/blue.png) repeat-x 0 0;text-align:right;"><table cellspacing="0" cellpadding="0" border="0" style="width:184px;"><tr><td class="lfmConfig"><a href="http://www.last.fm/widgets/?colour=blue&chartType=recenttracks&user=hsellors&chartFriends=1&from=code&widget=chart" title="Get your own widget" target="_blank" style="display:block;overflow:hidden;width:85px;height:20px;float:right;background:url(http://cdn.last.fm/widgets/images/en/footer/blue.png) no-repeat 0px -20px;text-decoration:none;border:0;"></a></td><td class="lfmView" style="width:74px;"><a href="http://www.last.fm/user/hsellors/" title="View hsellors's profile" target="_blank" style="display:block;overflow:hidden;width:74px;height:20px;background:url(http://cdn.last.fm/widgets/images/en/footer/blue.png) no-repeat -85px -20px;text-decoration:none;border:0;"></a></td><td class="lfmPopup"style="width:25px;"><a href="http://www.last.fm/widgets/popup/?colour=blue&chartType=recenttracks&user=hsellors&chartFriends=1&from=code&widget=chart&resize=1" title="Load this chart in a pop up" target="_blank" style="display:block;overflow:hidden;width:25px;height:20px;background:url(http://cdn.last.fm/widgets/images/en/footer/blue.png) no-repeat -159px -20px;text-decoration:none;border:0;" onclick="window.open(this.href + '&resize=0','lfm_popup','height=299,width=234,resizable=yes,scrollbars=yes'); return false;"></a></td></tr></table></td></tr></table> <h3> </h3> <h3>Any Questions?</h3> <p>Feel free to <a href="mailto:buywakingup@hotmail.co.uk">Contact Me</a></p> </div> <div id="footer"> Project Lumino 2008 </div> </div> </body> </html>
June 9, 200818 yr OK. The 3 lightbox supplied javascripts, and the lightbox CSS need to be referenced in the <head> of your document. Then add onload="initLightbox()" to the <body> tag.
June 9, 200818 yr Take all this out and put it in your <head></head> section at the top of your code <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> then change this <body> to this <body onLoad="initLightbox()"> Try that and see what happens Pat
June 9, 200818 yr Had a quick glance through your code and couldnt see any image referenced to lightbox. the image code on your page should look something like this <a href="images/yourimage.png" rel="lightbox" title="SchoolCom"><img src="images/yourimage.gif" alt="something"></a> Pat
June 9, 200818 yr Author Thanks for the help :-) It works now apart from the "close" gif from the gallery doesnt show up. I can see where the previous and next gifs are meant to show on the lightbox css but couldnt spot where close was meant to go? This is it so far Gallery
June 10, 200818 yr Author Cheers, that works now :-) TO make the thumbnails appear would I need to place a thumnail img link?
June 10, 200818 yr Cheers, that works now :-) TO make the thumbnails appear would I need to place a thumnail img link? Yes, Somthing along the lines of <a href="path/to/image.jpg" rel="lightbox"><img src="path/to/thumbnail.jpg" alt="alt text here" /></a>
Create an account or sign in to comment