Question : auto run lightbox

I want light box to automatically open when my page is loaded. I found a tutorial at

http://www.bram.us/2007/07/30/my-code-snippet-automatically-start-lightbox-on-page-load/

but when I add it to my page it still doesn't work.Could someone take a look and help me out? Thanks.

relevant code:
<script type="text/javascript">
      // <![CDATA[
            // Automagically load Lightbox on Page Load - by Bramus! (http://www.bram.us/)
            // Code modded from http://www.huddletogether.com/forum/comments.php?DiscussionID=1269&page=1#Item_0
            function autoFireLightbox() {
                  //Check if location.hash matches a lightbox-anchor. If so, trigger popup of image.
                  setTimeout(function() {
                        if(document.location.hash && $(document.location.hash.substr(1)).rel.indexOf('lightbox')!=-1) {
                              myLightbox.start($(document.location.hash.substr(1)));
                        }},
                        250
                  );
            }
            Event.observe(window, 'load', autoFireLightbox, false);
      // ]]>
</script>

    <a href="images/referral_program.jpg" rel="lightbox" id="lightboxlink" title="&lt;a href=&quot;referral.html&quot;&gt;Click here to learn more or make a referral.&lt;/a&gt;"><img src="images/referral_program.jpg" /></a>
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
<!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"><!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Window, Door replacement, Roofing, Siding, Kitchens, Decks, Flooring, Fencing, Remodeling in Columbus and Central Ohio</title>
<meta name="Keywords" content="Columbus, Ohio, construction, remodeling, windows, siding, roofing, decks, kitchens, baths, flooring, fencing, basements, painting, equity, building, commercial, residential" />
<meta name="Description" content="We help your house become the home of your dreams. At TI Property Improvements, we focus on that things that are important to you, from homeowner maintenance like roof and window replacements to renovation and remodeling that can significantly increase the functionality and energy efficiency of your home." />

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

<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />

<script type="text/javascript">
	// <![CDATA[
		// Automagically load Lightbox on Page Load - by Bramus! (http://www.bram.us/)
		// Code modded from http://www.huddletogether.com/forum/comments.php?DiscussionID=1269&page=1#Item_0
		function autoFireLightbox() {
			//Check if location.hash matches a lightbox-anchor. If so, trigger popup of image.
			setTimeout(function() {
				if(document.location.hash && $(document.location.hash.substr(1)).rel.indexOf('lightbox')!=-1) {
					myLightbox.start($(document.location.hash.substr(1)));
				}},
				250
			);
		}
		Event.observe(window, 'load', autoFireLightbox, false);
	// ]]>
</script>





<!-- InstanceEndEditable -->
<link href="../../css/tipi.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
<style type="text/css"> 
/* IE 5 does not use the standard box model, so the column widths are overidden to render the page correctly. */
#outerWrapper #contentWrapper #leftColumn1 {
  width: 23%;
}
#outerWrapper #contentWrapper #rightColumn1 {
  width: 140px;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css"> 
/* The proprietary zoom property gives IE the hasLayout property which addresses several bugs. */
#outerWrapper #contentWrapper #content {
  zoom: 1;
}
</style>
<![endif]-->

<script src="../../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="../../SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>

<link href="../../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<link href="../../SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
<script type="text/javascript">
<!--
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_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_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];}
}
//-->
</script>
</head>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-8511191-11");
pageTracker._trackPageview();
} catch(err) {}</script>
<body onload="MM_preloadImages('../../images/paint_int_01b.jpg','../../images/paint_int_05.jpg','../../images/paint_int_02.jpg','../../images/painter.jpg','../../images/paint_int_03.jpg')">
<div id="outerWrapper1">
<div id="outerWrapper">
  <div id="header"><a href="http://www.tipiteam.com"><img src="../../images/tipi_banner_gray.jpg" alt="TIPI" width="900" height="108" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="13,5,191,89" href="http://www.tipiteam.com" alt="TIPI" />
</map></a></div>
  <div id="contentWrapper">
  <!-- InstanceBeginEditable name="EditRegionRight" -->
    <div id="rightColumn1">
      <p>Based in metropolitan Columbus, Ohio, TIPI construction and remodeling
        teams are currently working throughout Central Ohio in communities including
        Bexley, Muirfield, Wedgewood, New Albany, and Gahanna.</p>
      <p> To our clients:<br />
        Get a FREE Starbuck's&#8482; gift card or a labor discount on your next
        project. <a href="referral/index.html">Find out how...</a>    </p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p><p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
    <img style="border:0;width:88px;height:31px"
        src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
        alt="Valid CSS!" />
</a>
</p>

    </div>
  <!-- InstanceEndEditable -->
    <div id="leftColumn1">
      <ul id="MenuBar1" class="MenuBarVertical">
        <li><a class="MenuBarItemSubmenu" href="../../interior/basements.html">Exterior</a>
<ul>
              <li><a href="../../exterior/windows.html">Windows &amp; Doors</a></li>
              <li><a href="../../exterior/siding.html">Siding</a></li>
              <li><a href="../../exterior/roofing.html">Roofing</a></li>
              <li><a href="../../exterior/decks.html">Decks &amp; Fencing</a></li>
              <li><a href="../../exterior/concrete.html">Design Concrete</a></li>
</ul>
        </li>
        <li><a href="../../interior/kitchens.html" class="MenuBarItemSubmenu">Interior</a>
          <ul>
            <li><a href="../../interior/kitchens.html">Kitchens &amp; Baths</a></li>
            <li><a href="../../interior/flooring.html">Flooring</a></li>
            <li><a href="../../interior/painting.html">Painting</a></li>
            <li><a href="../../interior/basements.html">Basements</a></li>
          </ul>
        </li>
      </ul>
      <div id="CollapsiblePanel3" class="CollapsiblePanel">
        <div class="CollapsiblePanelTab" tabindex="0">Go Green with TIPI</div>
        <div class="CollapsiblePanelContent">
          <p>Let TIPI guide you through product selections that conserve energy
            and reduce your home's impact on the environment. </p>
          <p>• Energy-efficient
            appliances </p>
          <p>• Newest options for renewable or recycled content            </p>
          <p>• Easy renovation that reduces your energy costs.</p>
          <p><a href="../../contact/quote.php">Ask for your FREE &quot;Green Card&quot; score with
              every quote.</a></p>
        </div>
      </div>
      <div id="CollapsiblePanel1" class="CollapsiblePanel">
        <div class="CollapsiblePanelTab" tabindex="0">Working with us</div>
        <div class="CollapsiblePanelContent">
          <p>TIPI offers complete general contracting
            and full-service project management so you don't have to worry.</p>
          <p>Your project leader will personally provide your quote, timeline
            and communication throughout every stage of your project.</p>
          <p><a href="../../team/index.html">Meet our project leaders.</a></p>
        </div>
      </div>
      <div id="CollapsiblePanel2" class="CollapsiblePanel">
        <div class="CollapsiblePanelTab" tabindex="0">Get a quote</div>
        <div class="CollapsiblePanelContent">
          <p>If you have a project in mind, you can fill out our easy online
            form and get our quote back by email or in a personal consultation.</p>
          <p><a href="../../contact/quote.php">Online quote request</a></p>
        </div>
      </div>
      <h3>Contact us </h3>
      <p>(614) 882-6400 office</p>
      <p>5983 Westerville Rd.<br />
      Westerville, OH 43081<br />
      (614) 413-1474 fax<br />
      <br />
      <a href="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;t=h&amp;msa=0&amp;msid=114238385206565487056.0004872317407b457186e&amp;ll=40.097508,-82.925019&amp;spn=0.012212,0.027637&amp;z=15">Click here for a detailed driving map to TIPI.</a>      </p>
      <p><a href="../../contact/index.php">email TIPI now</a></p>
    <!-- InstanceBeginEditable name="EditRegionLeft" -->
    <p><img src="images/NARI_memberblk.gif" alt="NARI" width="170" height="120" /></p>
    <!-- InstanceEndEditable --></div>
    <!-- InstanceBeginEditable name="EditRegionMain" -->
    <div id="content">
    
    <a href="images/referral_program.jpg" rel="lightbox" id="lightboxlink" title="&lt;a href=&quot;referral.html&quot;&gt;Click here to learn more or make a referral.&lt;/a&gt;"><img src="images/referral_program.jpg" /></a>

<script type="text/javascript">
{
    $(document).ready(function () {
      $('#lightboxlink').triggerHandler("click");
    });
	}
</script>
    
    <img src="images/exterior_00.gif" alt="TIPI builds equity" name="frontBanner" width="530" height="275" border="2" id="frontBanner" fwaction="mmcreateplaceholder" />
      <h2>We help your house become the home of your dreams.</h2>
      <hr />
        <p>At TI Property Improvements, we focus on the things that are important
          to you, from homeowner maintenance like roof and window replacements
          to renovation and remodeling that can significantly increase the functionality
          and energy efficiency of your home. We work with you to dot the i's
          and cross the t's on every detail so that you can be sure that you
          are getting the best quality and service.</p>
    <table width="530" border="1" cellpadding="2" cellspacing="0" bordercolor="bd9c76">
          <tr>
            <td><table border="0" cellspacing="0" cellpadding="5">
                <tr>
                  <td><h3>Residential</h3></td>
                  <td><h3>Commercial</h3></td>
                </tr>
                <tr>
                  <td><img src="images/interior_sm.jpg" alt="siding" name="siding" width="250" height="150" border="1" id="siding" /></td>
                  <td><img src="images/roofing_01sm.jpg" alt="commercial roofing" name="siding" width="250" height="150" border="1" id="siding2" /></td>
                </tr>
                <tr>
                  <td valign="top">Creating the space you want to come home to,
                    TIPI builds to your existing plans or works with you to design
                    and develop your vision.</td>
                  <td valign="top">TIPI brings commercial experience to every
                    project regardless of size or scope.</td>
                </tr>
            </table></td>
          </tr>
      </table>
    <br />
    </div>
    <!-- InstanceEndEditable --><div class="clearFloat"></div>
  </div>
  <div id="footer"><a href="http://www.tipiteam.com">home</a> / <a href="../../photos/index.html">gallery
     </a> / <a href="../../contact/index.php">contact us</a> / <a href="../../privacy.html">privacy policy</a></div>
</div>
</div>
  <script type="text/javascript">
</div>
  </script>
  <h4>copyright 2009 Tim Irwin Property Improvements</h4>
<h4><a href="http://www.sullivansolutions.com" target="_blank">site by Sullivan
  Solutions LLC</a></h4>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen:false});
//-->
</script>
<!-- InstanceBeginEditable name="footer" --><!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd --></html>

Answer : auto run lightbox

The script you took from that page requires your page to be accessed with a location Hash String, In order for it to fire, you'd need to access your web page via a URL like this:

http://www.yoursite.com/page.html#lightboxlink

Change it to the following to fire it on page load regardless of hash:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
<script type="text/javascript">
	// <![CDATA[
		// Automagically load Lightbox on Page Load - by Bramus! (http://www.bram.us/)
		// Code modded from http://www.huddletogether.com/forum/comments.php?DiscussionID=1269&page=1#Item_0
		function autoFireLightbox() {
			//Check if location.hash matches a lightbox-anchor. If so, trigger popup of image.
			setTimeout(function() {
				    myLightbox.start('#lightboxlink');
				},
				250
			);
		}
		Event.observe(window, 'load', autoFireLightbox, false);
	// ]]>
</script>
Random Solutions  
 
programming4us programming4us