Auto open Lightbox
ik heb een site, en wil het script "lightbox" integreren.
Echter wil ik lightbox niet gebruiken wanneer er op een link geklikt wordt (dit is me in ieder geval wél gelukt), maar wil ik dat er automatisch een foto wordt geopend met lightbox zodra de site bezocht wordt.
Mensen zien dus eerst een foto met daaromheen een transparante laag over de website heen, en wanneer ze op [CLOSE] drukken kunnen ze pas van de site gebruik maken...
Ik hoop dat iemand mij kan helpen :)
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'); lightbox();" >
Alles van 'preload' stond al in mijn html. "lightbox();" toegevoegd.
en in de <head> staat nu:
function lightbox() {
open('"http://partyflock.nl/images/upload/140992_original.jpg", rel=lightbox')
}
Het is vrij laat, en ik weet (te) weinig van 'functions' en 'onload' .. dus ik vergeet waarschijnlijk een hoop. Echter kon ik ook niet echt bruikbare uitleg vinden...
Code (php)
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>
<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>
Als het goed is werkt het. Je moet natuurlijk wel nog even de linkjes naar de code van Lightbox toevoegen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
<!--
function openHomeImage()
{
eImage = document.getElementById('homeImage');
myLightbox.start(eImage);
}
window.onload = openHomeImage;
...
</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<!--
function openHomeImage()
{
eImage = document.getElementById('homeImage');
myLightbox.start(eImage);
}
window.onload = openHomeImage;
...
</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
... staan voor andere 'functions' van het preLoaden van een paar images.
Code (php)
1
<body onLoad="MM_preloadImages('images/pressed (5).jpg','images/pressed (6).jpg','images/pressed (10).jpg'); openHomeImage();" >
moet er nog iets tussen de (..) worden ingevoegd?
Code (php)
1
2
3
2
3
<div id="homeImageBox">
<img src="http://partyflock.nl/images/upload/140412_original.jpg" id="homeImage" rel="lightbox" />
</div>
<img src="http://partyflock.nl/images/upload/140412_original.jpg" id="homeImage" rel="lightbox" />
</div>
deze <div> staat gelijk onder de <body><center> tag, nog vóór het html gedeelte van de daadwerkelijke site begint -> <table> ....
Gewijzigd op 01/01/1970 01:00:00 door Brent
met behulp van een Engels Forum.
zie www.party-crew.info voor het resultaat :)