I am able to get this script to work on our site from DynamicDrive I am new to the CSS world and am having trouble with the following:
1) - Can't get the images to align side by side on the site without the script breaking (by default, they seem to only have 1 or 2 images side by side, then the 3rd wants to go to the 2nd line - I would like to be able to fit at least 5 or so on the same row).
2) - Would like for the image to auto-align the pop up to fit the browser and not sink below the status bar - that could be frustrating for anyone viewing the images and kind of defeats the scripts purpose.
Thanks for any help i can get - our site is: Urban Exploration - but is currently down as we are performing a major overhaul on it, so the actual page itself is unavailable unless if it needs to be live.
Nick
this is what I currently have for scripting:
1) - Can't get the images to align side by side on the site without the script breaking (by default, they seem to only have 1 or 2 images side by side, then the 3rd wants to go to the 2nd line - I would like to be able to fit at least 5 or so on the same row).
2) - Would like for the image to auto-align the pop up to fit the browser and not sink below the status bar - that could be frustrating for anyone viewing the images and kind of defeats the scripts purpose.
Thanks for any help i can get - our site is: Urban Exploration - but is currently down as we are performing a major overhaul on it, so the actual page itself is unavailable unless if it needs to be live.
Nick
this is what I currently have for scripting:
Code:
<table style="width: 100%; border-collapse: collapse" summary="" border="5" bordercolor="#000000" cellpadding="3" cellspacing="0"> <tbody> <tr valign="top"> <td colspan="3">This set is for the Dixie Square mall that was located in Harvey, IL prior to being demolished in early April 2013. </td></tr> <tr valign="top"> <td colspan="3"> <div>The mall was most famous for its short scene in the Blues Brothers movie where Jake & Elwood drive their Bluesmobile thru the mall in a funny attempt to elude the law- bottom line... They won that round.</div></td></tr> <tr valign="top"> <td colspan="3"> <div> </div></td></tr></tbody></table><style type="text/css"> .thumbnail{ position: relative; z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 0; left: 60px; /*position where enlarged image should offset horizontally */ } </style><a class="thumbnail" href="#thumb"><img alt="" src="images/ChicagoDixieMall/All_those_Weeds21.jpg" border="0" height="100px" width="100px" /><span><img alt="" src="images/ChicagoDixieMall/All_those_Weeds21.jpg" /><br /> Simply beautiful.</span></a><a class="thumbnail" href="#thumb"><img alt="" src="images/ChicagoDixieMall/Artwork_in_Block_B.jpg" border="0" height="100px" width="100px" /><span><img alt="" src="images/ChicagoDixieMall/Artwork_in_Block_B.jpg" /><br /> Artwork</span></a><br /> <br /> <style type="text/css"> img { margin: 0 5px; } </style>