View Full Version : Lightbox help

06-22-2010, 02:56 AM
Hello everyone! I am so very new to Javascript and am trying to implement lightbox in my site. I have went through my code many times trying to figure out what I have done wrong. I have attached all of the javascript and image files.
Please- If I am not giving enough info here, let me know. I am new to Javascript and this forum :o

<!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">

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PixelRiot Design</title>
<link href= "prd.css" rel="stylesheet" type="text/css" />
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

<body onload="MM_preloadImages ('aboutbtnrollover.jpg','homebuttonrollover.jpg','portfoliobtnrollover.jpg','contactbtnrollover.jpg' ); initLightbox()">

<div id="background"><img src="bg_gray_stripe.jpg"/></div>

<div id="logo">
<img src="logo.jpg" alt="PRD logo" width="550" /></div>

<div id="copyright">
Copyright Jen Raymond PixelRiot Design 2010

<div id="dropaline">
<img src="dropaline.jpg" alt="Click Me :)" width="197" height= "153" />

<div class="navigation">

<div id="home"><a href="Home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image24','','homebuttonrollover.jpg',1)"><img src="homebutton.jpg" name="Image24" width="150" height="51" border="0" id="Image24" /></a></div>

<div id="portfolio"><a href="portfolio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image25','','portfoliobtnrollover.jpg',1)"><img src="portfoliobtn.jpg" name="Image25" width="150" height="51" border="0" id="Image25" /></a></div>

<div id="about"><a href="AboutMe.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image23','','aboutbtnrollover.jpg',1)"><img src="aboutbtn.jpg" name="Image23" width="150" height="51" border="0" id="Image23" /></a></div>

<div id="contact"><a href="ContactMe.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image26','','contactbtnrollover.jpg',1)"><img src="contactbtn.jpg" name="Image26" width="150" height="51" border="0" id="Image26" /></a></div>

<div id="movie">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="500" height="200" id="FlashID" title="Love Your Website">
<param name="movie" value="PRDAnimation.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you donít want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data= "PRDAnimation.swf" width="500" height="200">
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
<!--[if !IE]>-->
<script type="text/javascript">

<div id="portfoliosnippet"><img src="portfoliosnippet.jpg" alt="Portfolio" width="273" height="41" />

<div id="cupcakethumb">
<a href="CupcakeAffairThumb.jpg" rel="lightbox"><img width="96" height="96" src="CupcakeAffairThumb.jpg"/></a>

<div id="portfoliothumb">
<img src="portfoliothumb.jpg" width="96" height="96" alt="Student Portfolio" />

<div id="ilythumb"><img src="ilythumb.jpg" width="96" height="96" alt="Ily Logo" /></div>

<div id="ceramichethumb">
<img src="ceramichethumb.jpg" width="96" height="96" alt="Ceramiche Site" />


06-22-2010, 02:17 PM

I suggest you try the following free application which dynamically creates a scrollable image gallery with the gray overlay effect.


Read the "Read This" text file.

A demo is included in the .zip file, with sample images.

No framework is used.

Edit the ....config.js file for your images. This is the example ...config.fs file:

var imgPath = "./dynamic_gallery/images/";

var dynamicImage = []; // file name, width, height;
dynamicImage[dynamicImage.length] = "models4.jpg | 152 | 216";
dynamicImage[dynamicImage.length] = "scenic4.jpg | 200 | 120";
dynamicImage[dynamicImage.length] = "free_stamp.jpg | 256 | 192";
dynamicImage[dynamicImage.length] = "rock_hall.jpg | 240 | 180";
dynamicImage[dynamicImage.length] = "wide4.jpg | 284 | 116";
dynamicImage[dynamicImage.length] = "scenic1.jpg | 200 | 120";
dynamicImage[dynamicImage.length] = "wide3.jpg | 284 | 116";
dynamicImage[dynamicImage.length] = "models2.jpg | 152 | 230";

Then edit the ...css file for the width and height of the gallery.