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.

Code:

<!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.

Code:

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:

Code:

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/dynamici...tbox/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

Code:

<!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 :

Code:

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

Originally Posted by jch

Please help me

the issue is there :

Code:

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.

Thread: Mix LightBox with another script

Thread Tools

Search Thread

Mix LightBox with another script

Bookmarks

Bookmarks

Posting Permissions