Lightbox on Load of Website

**Brent** · 02-13-2008, 01:08 AM

1) Script Title:
Lightbox 2.0
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...box2/index.htm
3) Describe problem:
Hello,

I want to let Lightbox start when someone enter's my page

Someone on a Dutch Forum has provided me the next code:

Code:

<html>
  <head>
    <script type="text/javascript">
      function openHomeImage()
      {
        eImage = document.getElementById('homeImage');
        myLightbox.start(eImage);
      }
      
      window.onload = openHomeImage;
    </script>
    <style type="text/css">
      #homeImageBox
      {
        display: none;
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <div id="homeImageBox">
      <img src="jouw_plaatje.jpeg" id="homeImage" rel="lightbox" />
    </div>
  </body>
</html>

I've editted my index.html, but it wouldn't work. The lightbox is showing up, but doesn't load the image.

Can somebody help me?

**fwhite** · 02-13-2008, 01:16 AM

try:

Code:

<body onload="openHomeImage();">

**jscheuer1** · 02-13-2008, 01:46 AM

http://www.dynamicdrive.com/forums/s...ad.php?t=27432

**Brent** · 02-13-2008, 09:36 AM

as you can see in my page code i've already done this. And it doesn't work..

**jscheuer1** · 02-13-2008, 10:16 AM

Originally Posted by Brent

as you can see in my page code i've already done this. And it doesn't work..

Yes and no. I agree, your page doesn't work. I agree that perhaps you have read this thread I linked to in my previous post:

http://www.dynamicdrive.com/forums/s...ad.php?t=27432

and hopefully, particularly this post from it:

http://www.dynamicdrive.com/forums/s...00&postcount=4

I disagree that your page shows any attempt to follow the advice given there.

I think perhaps you just missed my post or didn't look at the link in it, or perhaps didn't understand how it differs from what you've already tried.

**Brent** · 02-13-2008, 01:14 PM

Sorry, I didn't saw your message..

I've editted ligthbox.js and also editted my index.html

Code:

<script type="text/javascript">

function initLightbox()
      {
        eImage = document.getElementById('the_first');
        myLightbox.start(eImage);
      }
</script>

Code:

<body bgcolor="#d6d6d6" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/pressed (7).jpg','images/pressed (8).jpg','images/pressed (9).jpg','images/pressed.jpg','images/pressed (2).jpg','images/pressed (3).jpg','images/pressed (4).jpg','images/pressed (5).jpg','images/pressed (6).jpg','images/pressed (10).jpg'); initLightbox();" >

Code:

<div id="homeImageBox">
      <img src="images/agenda/halfvrlarge.jpg" rel="lightbox" id="the_first" title="Upcoming.."/>
    </div>

.. but still the image isn't loading yet...

**jscheuer1** · 02-13-2008, 06:55 PM

You are mixing apples and oranges in at least one, possibly more places. You cannot have this:

Code:

<img src="images/agenda/halfvrlarge.jpg" rel="lightbox" id="the_first" title="Upcoming.."/>

even for a normal lightbox link. It has to be a link. More like:

Code:

<a href="images/agenda/halfvrlarge.jpg" rel="lightbox" id="the_first" title="Upcoming.."></a>

Also, this (red):

Code:

<body bgc . . . eight="0" onLoad="MM_preload . . . ed (10).jpg'); initLightbox();" >

is not required. Get rid of it. The lightbox script does that for you, without conflicting with other onload events.

This isn't required:

Code:

<script type="text/javascript">

function initLightbox()
      {
        eImage = document.getElementById('the_first');
        myLightbox.start(eImage);
      }
</script>

at all. Get rid of it. Instead, edit your lightbox.js file at the end replacing:

Code:

function initLightbox() { myLightbox = new Lightbox(); }
Event.observe(window, 'load', initLightbox, false);

with:

Code:

function initLightbox() { myLightbox = new Lightbox();
var firstLight;
if((firstLight=document.getElementById('the_first')) && /^lightbox/.test(firstLight.rel))
firstLight.onclick.apply(firstLight);
 }
Event.observe(window, 'load', initLightbox, false);

**Brent** · 02-13-2008, 07:17 PM

Thanks a lot

It's finally working now, I editted the .js before, bot not with that code. I've replaced it with another one from you're link, the first mentioned.

Anyhow, thank you!

EDIT: Is it possible to get 2 lightboxes on top of each other? So the users have te click 2 time on "close" before they can acces the page?

**jscheuer1** · 11-11-2010, 12:22 AM

Sorry I didn't get back to you Brent. I'm pretty sure that can be done. If you're still interested, start a new thread, as I'm closing this one.

If anyone is still interested in the original topic (Lightbox on Load of Website), there has been for some time an unofficial Lightbox 2.04a 'firstlight' edition:

http://www.dynamicdrive.com/forums/s...470#post163470

Thread: Lightbox on Load of Website

Thread Tools

Search Thread

Lightbox on Load of Website

try this

Bookmarks

Bookmarks

Posting Permissions