Lightbox Mod

[calumogg]

Lightbox Script on DD :http://www.dynamicdrive.com/dynamici...box2/index.htm

Hi, I have been trying to add some stuff into lightbox and it just isnt working. I dont really know anything about javascript, but I am ok on the html side of things. Anyway I was trying to add this form at the bottom of the lighbox display that loads when you click on a picture.

 <FORM NAME=order onSubmit="AddToCart(this);">
        <select name="ADDITIONALINFO" onChange="tally(this);" id="print">
        <option selected="selected">Options:</option>
        <option value="A5 (18cm x 12?cm)">A5 (18cm x 12?cm)</option>
        <option value="A4 (29.7cm x 21cm)">A4 (29.7cm x 21cm)</option>
        <option value="A3 (42cm x 29.7cm)">A3 (42cm x 29.7cm)</option>
        <option value="Panoramic (51?cm x 21?cm)">Panoramic (51?cm x 21?cm)</option>
      </select>
          <input type="submit" name="button" id="button" value="Add to Cart">
          <input type=hidden name="PRICE" value="">
          <input type=hidden name="NAME" value="PICTURE TITLE">
          <input type=hidden name="ID_NUM" value="PIC">
      </FORM>

If there is already a thread about this that I missed I am sorry, but I did have a look and couldn't find anything. Thanks in advance for any help

[ddadmin]

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

[calumogg]

Woops, sorry, Iv added a link.

[jscheuer1]

At "the bottom"? You mean in place of the caption?

[calumogg]

Well under the caption, I have got half way there, here is where I am testing it http://www.calumogg.co.uk/test/landscapes.html
The only thing wrong with it at the moment is that no select menu is showing up. here is the code that I am using inside lighbox:

Element.setInnerHTML('bottomNav', "<form onsubmit='AddToCart(this);' name='order'><select id='print' onchange='tally(this);' name='ADDITIONALINFO'><option selected='selected'>Options:</option><option value='A5 (18cm x 12.5cm)'>A5 (18cm x 12.5cm)</option><option value='A4 (29.7cm x 21cm)'>A4 (29.7cm x 21cm)</option><option value='A3 (42cm x 29.7cm)'>A3 (42cm x 29.7cm)</option><option value='Panoramic (51.5cm x 21.5cm)'>Panoramic (51.5cm x 21.5cm)</option><option value='Canvas print 40cm x 30cm'>Canvas print 40cm x 30cm</option><option value='Canvas print 60cm x 40cm'>Canvas print 60cm x 40cm</option><option value='Greeting cards (8-pack)'>Greeting cards (8-pack)</option><option value='Postcards (pack of 16)'>Postcards (pack of 16)</option><option value='Large 1-page calendar'>Large 1-page calendar</option></select><input type='submit' value='Add to Cart' id='button' name='button'/><input type='hidden' value='' name='PRICE'/><input type='hidden' value='PICTURE TITLE' name='picture title'/></form><a id='bottomNavClose' href='#'><img src='images/closelabel.gif'/></a>");
	},

This is taken from line 309 (sorry for having it all on one line, but it doesnt work otherwise)

[jscheuer1]

Ha ha. Sorry, I'm laughing at both of us. It took me a little while to figure this one out until I remembered that lightbox hides all selects on a page while the overlay and image is displayed due to a bug in IE 6 and less that makes them show through the overlay and images that lightbox draws on the page.

You can fix it by adding this to your stylesheet:

#print {visibility:visible!important;}

But this may not work in all browsers. You could also find the spot in the script where lightbox hides the selects and write in an exception for yours based upon its id (from lightbox.js addition red):

function hideSelectBoxes(){
	var selects = document.getElementsByTagName("select");
	for (i = 0; i != selects.length; i++) {
                 if(selects[i].id!='print')
		selects[i].style.visibility = "hidden";
	}
}

Oh, and you have another problem that you haven't noticed yet. You will want to add to your long line:

. . . <a id='bottomNavClose' href='#' onclick='myLightbox.end();return false;'><img src='images/closelabel.gif'/> . . .

[calumogg]

Thanks so much for the help!
But there is one new problem now.... The close button doesn't work any ideas?

[jscheuer1]

That stopped working the moment you removed this from the script:

		var objBottomNavCloseLink = document.createElement("a");
		objBottomNavCloseLink.setAttribute('id','bottomNavClose');
		objBottomNavCloseLink.setAttribute('href','#');
		objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
		objBottomNav.appendChild(objBottomNavCloseLink);
	
		var objBottomNavCloseImage = document.createElement("img");
		objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);
		objBottomNavCloseLink.appendChild(objBottomNavCloseImage);

You could follow the advice I added (perhaps too late to be noticed) at the end of my last post (this would probably be easiest), or (just to give you a better idea of what has happened) you could remove:

<a id='bottomNavClose' href='#'><img src='images/closelabel.gif'/></a>

from your long line. and replace the missing code from above after it.

[calumogg]

Oh sorry, I misread your last bit on the other post! But the way I read it also fixed another problem (it stopped the page refreshing, but still added the item to the cart)
One very last thing, refering back to my long line of stuff, near the end there is a hidden field, and I need the value to be the title that lightbox uses for the photo being displayed. Do you know how I would go about this one?
Thank so much for all the help so far, your a life saver!

[jscheuer1]

If I understand you correctly, you mean this hidden input:

<input type=hidden name='ID_NUM' value='title'>

and this (and similar) as the value:

V03 - Moonlit Street, Gloucester England.jpg

and that it needs to get that value just before the form is actually submitted. If I have all that right, adding this (red) near the beginning of your long line should do it:

Element.setInnerHTML('bottomNav', "<form onsubmit='this.ID_NUM.value=document.getElementById(\"caption\").innerHTML;AddToCart(this);return false;' name='order'><select id='pr . . .