Jump to content

Lightbox Intergration?


imrie
 Share

Recommended Posts

Hello,hereI am new to world of JavaScript and i would like some help in a script i am creating. Right now it is complied of a script from here and i would like to intergrate Lightbox into it.What i want to happen is: as you can see when you click on one of the images it appears in the center box (skewed to fit), i would like that when you then click on the image in the main box for it to open in lightbox from. (this is done by adding rel="lightbox") And the image to now open like that.The coding:

<!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>Untitled Page</title>	<style type="text/css">img.pos_left{position:relative;left:-20px}</style><script type="text/javascript" src="lightbox.js"></script><script LANGUAGE="JavaScript"><!-- This script and many more are available free online at --><!-- The JavaScript Source!! http://javascript.internet.com --><!-- Beginfunction changeImage(filename){  mainimage.src = filename;}//  End --></script></head><body><p> </p><p><table height="103" cellspacing="1" cellpadding="1" width="31" summary="" border="1">	<tbody>		<tr>			<td style="WIDTH: 109px"> <a href="java script:changeImage('http://www..com/cpg1412/albums/archivest/spreading6.JPG')"><img alt="" src="http://www..com/cpg1412/albums/archivest/thumb_spreading6.JPG" /></a></td>		</tr>		<tr>			<td style="WIDTH: 109px"> <a href="java script:changeImage('http://www..com/cpg1412/albums/archivest/spreading5.JPG')"><img alt="" src="http://www..com/cpg1412/albums/archivest/thumb_spreading5.JPG" /></a></td>		</tr>		<tr>			<td style="WIDTH: 109px"> <a href="java script:changeImage('http://www..com/cpg1412/albums/archivest/spreading.JPG')"><img alt="" src="http://www..com/cpg1412/albums/archivest/thumb_spreading.JPG" /></a></td>		</tr>		<tr>			<td style="WIDTH: 109px"> <a href="java script:changeImage(http://www..com/cpg1412/albums/archivest/spreading6.JPG' "><img alt="" src="http://www..com/cpg1412/albums/archivest/thumb_finish.JPG" /></a></td>		</tr>	</tbody></table><table cellspacing="1" cellpadding="1" width="200" summary="" border="1">	<tbody>		<tr>			<td> <a href="java script:changeImage('http://www..com/cpg1412/albums/archivest/spreading3.JPG')"><img alt="" src="http://www..com/cpg1412/albums/archivest/thumb_spreading3.JPG" /></a></td>			<td> <a href="java script:changeImage('http://www..com/cpg1412/albums/archivest/spreading4.JPG')"><img alt="" src="http://www..com/cpg1412/albums/archivest/thumb_spreading4.JPG" /></a></td>			<td> <a href="java script:changeImage('http://www..com/cpg1412/albums/archivest/harrow.JPG')"><img alt="" src="http://www..com/cpg1412/albums/archivest/thumb_harrow.JPG" /></a></td>			<td> <a href="java script:changeImage('http://www..com/cpg1412/albums/archivest/spreading2.JPG')"><img alt="" src="http://www..com/cpg1412/albums/archivest/thumb_spreading2.JPG" /></a></td>			<td> <a href="java script:changeImage('http://www..com/cpg1412/albums/archivest/harrow3.JPG')"><img alt="" src="http://www..com/cpg1412/albums/archivest/thumb_harrow3.JPG" /></a></td>		</tr>	</tbody></table><img class="pos_left" style="LEFT: 124px; WIDTH: 447px; TOP: -475px; HEIGHT: 358px" alt="" name="mainimage" src="blank.jpg" />     </p></body></html>

Another thing would be to make the script not skew the image, so that when you click on an rectangular image its not stretched into a square.Your help is very much appreciated!thanks,

Link to comment
Share on other sites

I'm not sure how Lightbox works, but you can add an attribute with the object.setAttribute method. If you add a rel attribute you will probably need to re-run the Lightbox code for it to pick up the new element. Also, you have a width and height defined on the img tag so that's why the image is being stretched.

Link to comment
Share on other sites

Like I said, I'm not sure how Lightbox works so I'm not sure where you need to put the attribute. If you want the rel attribute to get set when you click on the big image then I would imagine you would want to put an onclick event on the image that will run a function that includes a line like that one in it. Also, like I said you'll probably need to execute some Lightbox function after setting the attribute, if it has an initialize function or something like that which checks for the attribute you're setting you will need to run that function again to get the Lightbox to notice the change.

Link to comment
Share on other sites

<div id="test"><a href="java script:changeImage('http://www..com/cpg1412/albums/archivest/spreading3.JPG')"><img alt="" src="http://www..com/cpg1412/albums/archivest/thumb_spreading3.JPG" /></a></div><img src="blank.jpg" name="image" onclick="document.getElementById("test").setAttribute("rel", "lightbox")" />

Would this work ok?

Link to comment
Share on other sites

There is a syntactic error with the image onclick event handler, change it to

<img src="blank.jpg" name="image" onclick="document.getElementById('test').setAttribute('rel', 'lightbox')" />

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...