Log in

View Full Version : Mix LightBox with another script


jch
03-28-2006, 03:20 PM
Hello

I have just mix two dhtml script i have just a little problem.



<!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">
<head>
<title></title>
<style type="text/css" media="screen">@import "css/lightbox.css";</style>
<script language="javascript" type="text/javascript" src="javascript/lightbox.js"></script>
</head>
<body>
<script language="javascript">
ejs_vignet = new Array;
ejs_des = new Array;
ejs_big = new Array;
var HazMess=new Array();
ejs_vignet[0]= 'images/89760.gif'
ejs_big[0]= 'images/89760.jpg'
ejs_vignet[1]= 'images/thumb/89761.jpg'
ejs_big[1]= 'images/89761.jpg'
ejs_vignet[2]= 'images/thumb/89762.jpg'
ejs_big[2]= 'images/89762.jpg'
ejs_vignet[3]= 'images/thumb/89763.jpg'
ejs_big[3]= 'images/89763.jpg'
function ChageImage(num) {
if(document.getElementById)
document.getElementById("ejs_dyn_img").innerHTML = '<a href="images/products/test.jpg" rel="lightbox"><img src="'+ejs_big[num]+'"></a>;
else
window.open(ejs_big[num],"_blank")
}
function killImage(num) {
if(document.getElementById) document.getElementById("ejs_dyn_img").innerHTML = "";
}

document.write('<div id="ejs_dyn_img"><a href="images/products/test.jpg" rel="lightbox"><img src="'+ejs_big[0]+'"></a></div>');
for(a=0;a<ejs_big.length;a++) {
document.write('<a href="javascript:ChageImage('+a+')"><img src="'+ejs_vignet[a]+'"></a>')
}
</script>
</body>
</html>


So for the default picture display lightbok work fine but when i click on an other thumbnail and then click on the pics the attribut rel="lightbox" don't work.

So the problem seem to be in the following syntax, perhaps i have to change the rel attribut by another one.



function ChageImage(num) {
if(document.getElementById)
document.getElementById("ejs_dyn_img").innerHTML = '<a href="images/products/test.jpg" rel="lightbox"><img src="'+ejs_big[num]+'"></a>;
else
window.open(ejs_big[num],"_blank")
}


Thanks for you help
.alias.
03-28-2006, 03:24 PM
Can you please post a link to the script on your site & A link to the DD script
jscheuer1
03-28-2006, 07:13 PM
After any dynamic change to the HTML code of images used with lightbox, the lightbox must be re-initialized, try:


function ChageImage(num) {
if(document.getElementById) {
document.getElementById("ejs_dyn_img").innerHTML = '<a href="images/products/test.jpg" rel="lightbox"><img src="'+ejs_big[num]+'"></a>;
initLightbox();
}
else
window.open(ejs_big[num],"_blank")
}
jch
03-28-2006, 11:06 PM
THANKS !!
IT's works fine :)

Actually, i have one last little problem.
The background overlay.png is not display on Internet explorer but works with firefox ..
Do you see what is the way to solve this ?

Thanks

The url of the script was :
http://www.dynamicdrive.com/dynamicindex4/lightbox/index.htm
jscheuer1
03-29-2006, 06:40 AM
The odd thing is that it (the overlay .png) works fine on the demo page in IE. So, are you seeing it OK in IE on the demo page? If not, probably something to do with your browser's settings. If so, probably something to do with the code on your page or on the associated files. If it works OK for you in IE on the demo page, please post a link to your page for troubleshooting purposes.
jch
07-05-2006, 04:00 PM
Hello,

I have a new issue with the mixing of the code of this two javascript code.
In fact the big picture don't open with lightbox.
Thanks for your help



<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css" media="all">@import "css/tab.css";</style>
<style type="text/css" media="screen">@import "css/lightbox.css";</style>
<script language="javascript" type="text/javascript" src="javascript/lightbox.js"></script>
</head>
<body>
<script language="javascript">
nb_photo_ligne = 5;
numero_photo = 1;
ejs_vignet = new Array;
ejs_big = new Array;
ejs_full = new Array;
var HazMess=new Array();
ejs_vignet[0]= 'images/icone_video.gif'
ejs_big[0]= 'images/products/preview/137.jpg'
ejs_full[0]= 'images/products/137.jpg'
ejs_vignet[1]= 'images/products/thumb/137.jpg'
ejs_big[1]= 'images/products/preview/137.jpg'
ejs_full[1]= 'images/products/137.jpg'
ejs_vignet[2]= 'images/products/thumb/137_01.jpg'
ejs_big[2]= 'images/products/preview/137_01.jpg'
ejs_full[2]= 'images/products/137_01.jpg'

function ChageImage(num) {
if(document.getElementById) {
document.getElementById("dyn_img").innerHTML = '<img src="'+ejs_big[num]+'">'; initLightbox();
}
else
window.open(ejs_big[num],"_blank")
}
function killImage(num) {
if(document.getElementById) document.getElementById("dyn_img").innerHTML = "";
}

document.write('<div id="dyn_img"><img src="'+ejs_big[0]+'"></div>');
for(a=0;a<ejs_big.length;a++) {
document.write('<a href="javascript:ChageImage('+a+')"><img src="'+ejs_vignet[a]+'"></a>')
}
</script>
</body>
</html>
jch
07-07-2006, 12:31 PM
Please help me :)
the issue is there :



function ChageImage(num) {
if(document.getElementById) {
document.getElementById("dyn_img").innerHTML = '<img src="'+ejs_big[num]+'">'; initLightbox();
}
jch
07-26-2006, 04:20 PM
Anybody can help me ?

:(

i think this is easy for you
jscheuer1
07-26-2006, 07:58 PM
Please help me :)
the issue is there :



function ChageImage(num) {
if(document.getElementById) {
document.getElementById("dyn_img").innerHTML = '<img src="'+ejs_big[num]+'">'; initLightbox();
}


Lightbox requires an anchor link tag with an href attribute set to the larger image and a rel="lightbox" attribute.