jQuery start lightbox [Archive]

...

View Full Version : jQuery start lightbox

alexa

03-15-2011, 03:24 PM

Hei,
I have this lightbox and basically I want it to start automatically when I enter the site. Can you please help me?

Thanks!

alexa

03-15-2011, 03:28 PM

This is the lightbox code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery lightBox plugin</title>

<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />


<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />



<script type="text/javascript">
$(function() {
$('a[@rel*=lightbox]').lightBox();
});

</script>
<style type="text/css">

</style>
</head>

<body>

<div id="gallery">
<ul>
<li>
<a href="photos/tutorial.png" title="" rel='lightbox'>
<img src="photos/thumb_image1.jpg" id="homeImage" width="72" height="72" alt="" />
</a>
</li>

</ul>
</div>

</body>
</html>

oesxyl

03-15-2011, 03:30 PM

Hei,
I have this lightbox and basically I want it to start automatically when I enter the site. Can you please help me?

Thanks!
can you please help us by providing detailes?

best regards

oesxyl

03-15-2011, 03:32 PM

alexa

03-15-2011, 03:50 PM

oesxyl

03-15-2011, 04:47 PM

oesxyl

03-15-2011, 05:36 PM

I'm sorry, I don't have a link so I attached everything in 3 archives (because the maximum size is 50 kb) . If you put everything in one folder and enter the index page you'll see that if you click the image the lightbox opens. I want it to open when I open the page.

Thanks a lot !
i don't think i can doit. your jquery is 1.2.3, pretty old. I tried to use jquery 1.5.1 but it didn't work at all( i try to use trigger to simulate the initial click and this was introduced in 1.3.0).

btw, add this to your script:


<script type="text/javascript">
$(function() {
$('a[@rel*=lightbox]').lightBox({ fixedNavigation: true });
});

and move
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
before first script tags.

anyway this changes will not make it to do what you want. I'm sorry.

best regards

alexa

03-15-2011, 06:13 PM

oesxyl

03-15-2011, 07:02 PM

It doesn't have to be exactly this lightbox...I just need the idea...to have one that opens on window.load and then somewhere , if I click something to be able to open it again... I've been googling around and others have tried and some of them say that they managed but I didn't...

Thanks for your reply :)
i'm usualy like a combination between a buldog and a cat, :)
try to put this in your page:


<script type="text/javascript">
$(document).ready(function() {
$("a[@rel*='lightbox']").lightBox({ fixedNavigation: true });
$('a:first[@rel*='lightbox']").trigger('click',[]);
});

seems that works for me.

best regards

alexa

03-15-2011, 07:43 PM

For me it doesn't seem to work...if I include this the lightbox doesn't show up at all...

alexa

03-15-2011, 07:51 PM

I got it, it was a punctuation problem :)

Thank you so much.....

oesxyl

03-15-2011, 07:51 PM

For me it doesn't seem to work...if I include this the lightbox doesn't show up at all...
the only changes i made:
- index.htm page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery lightBox plugin</title>

<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />



<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>



<script type="text/javascript">
$(document).ready(function() {
$("a[@rel*='lightbox']").lightBox({fixedNavigation:true});
$("a:first[@rel*='lightbox']").trigger('click',[]);
});
</script>
</head>

<body>

<div id="gallery">
<ul>
<li>
<a href="image1.jpg" title="" rel='lightbox'>
<img src="thumb_image1.jpg" id="homeImage" width="72" height="72" alt="" />
</a>
<a href="image2.jpg" title="" rel='lightbox'>
<img src="thumb_image1.jpg" id="homeImage" width="72" height="72" alt="" />
</a>
<a href="image3.jpg" title="" rel='lightbox'>
<img src="thumb_image1.jpg" id="homeImage" width="72" height="72" alt="" />
</a>
<a href="image4.jpg" title="" rel='lightbox'>
<img src="thumb_image1.jpg" id="homeImage" width="72" height="72" alt="" />
</a>
<a href="image5.jpg" title="" rel='lightbox'>
<img src="thumb_image1.jpg" id="homeImage" width="72" height="72" alt="" />
</a>
</li>

</ul>
</div>

</body>
</html>

download the images imag1.jpg, images imag2.jpg, images imag3.jpg, images imag4.jpg and images imag5.jpg.

best regards

alexa

03-15-2011, 07:54 PM

I had to put :

$(document).ready(function() {
$('a[@rel*=lightbox]').lightBox({ fixedNavigation: true });
$('a[@rel*=lightbox]').trigger('click',[]);
});

in order to make it work. Thanks again !

oesxyl

03-15-2011, 07:54 PM

I got it, it was a punctuation problem :)

Thank you so much.....
you are welcome, :) is still a problem i can't solve but you didn't mention, is my problem, :) i can' make it to restart with first picture after the last one, :)
i probably giveup since is just a game for me, :)

best regards

alexa

03-15-2011, 07:56 PM

I am am planning to have just one picture (the one from the archive) which will present my site, so this is perfect for me .

:)

oesxyl

03-15-2011, 08:00 PM

I am am planning to have just one picture (the one from the archive) which will present my site, so this is perfect for me .

:)
probably is more easy with lightbox but in this case i think is better to rewrite the index.htm to show like a lightbox. Just html and css, maybe a little jquery.

btw people usualy expect index to be html not htm, is not a problem, just a habit, :)

best regards

alexa

03-15-2011, 08:18 PM

This isn't the real site (usually I do little pieces separately and after that add them ). Thanks for your advice :)

alexa

03-16-2011, 08:53 AM

I have a new problem :((

On the real website I have a different version of jquery which I can't change because I already used it for something else...and this isn't working with that version..I am attaching the jquery I need to use...

Thanks...

alexa

03-16-2011, 09:04 AM

No, it's this one ...

alexa

03-16-2011, 09:09 AM

It's to big...I'll try to manage on my own :)

oesxyl

03-16-2011, 01:16 PM

It's to big...I'll try to manage on my own :)
just tell me the version, :)

best regards