imrie Posted October 18, 2007 Share Posted October 18, 2007 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 More sharing options...
justsomeguy Posted October 18, 2007 Share Posted October 18, 2007 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 More sharing options...
imrie Posted October 18, 2007 Author Share Posted October 18, 2007 Would i add that to the the: <img class="pos_left" style="LEFT: 124px; WIDTH: 447px; TOP: -475px; HEIGHT: 358px" alt="" name="mainimage" src="blank.jpg" /> line or the individual lines? Link to comment Share on other sites More sharing options...
imrie Posted October 18, 2007 Author Share Posted October 18, 2007 can you provide an example of how to use the object.setAttribute?Thanks, Link to comment Share on other sites More sharing options...
justsomeguy Posted October 18, 2007 Share Posted October 18, 2007 If you have an element with an id on it:<div id="test">whatever the tag, you can use setAttribute like this:document.getElementById("test").setAttribute("rel", "value"); Link to comment Share on other sites More sharing options...
imrie Posted October 19, 2007 Author Share Posted October 19, 2007 Do i need to put this in a function at the top of the page? And how would you activate it, does it go in a a href or image tag?Thanks, Link to comment Share on other sites More sharing options...
justsomeguy Posted October 19, 2007 Share Posted October 19, 2007 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 More sharing options...
imrie Posted October 20, 2007 Author Share Posted October 20, 2007 <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 More sharing options...
justsomeguy Posted October 23, 2007 Share Posted October 23, 2007 I don't know, did you try it? Link to comment Share on other sites More sharing options...
Synook Posted October 24, 2007 Share Posted October 24, 2007 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.