Advanced Links Page Code [Sitemap] - Digital Grin Photography Forum

Neptune

Jan-04-2007, 06:14 AM

Hello to all in the Dgrin forum!

I have been working hard at this sweet feature trying to get my links page to look like Andy's I have been reading the CSS play site http://www.cssplay.co.uk and this is the code I have put together in the Java Script area.....

/* Script code for Links Gallery */

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

******** type="text/javascript">
NickName = 'opticaltranquility';
pageType = 'Album';
pageTypeDetails = '';
pageScope = '';
pageDrawBy = '';
siteUser = 'opticaltranquility';
community = '';
galleryStyle = 'all_thumbs';
AlbumID = '2295958';
ImageID = '120860278';
webServer = 'http://www.opticaltranquility.com';
var imageIDs = new Array();
displaySmugPopular = false; </********
<div id="allthumbs" class="allthumbs galleryPage gallery_2295958 category_Site_Files bodyColor_Black">
<div id="breadcrumb" class="nav"><div id="altViews" class="nav"><a href="javascript:void(0);" onclick="window.open('/photos/sspopup.mg?AlbumID=2295958', 'ssFull2295958', 'scrollbars=0,status=0,resizable=1,width='+screen. width+',height='+screen.height+',top=0,left=0'); return false;"><img src="/img/spacer.gif" alt="play slideshow" title="play slideshow" width="23" height="18" hspace="0" vspace="0" border="0" class="play_slideshow" /></a></div><a href="http://www.opticaltranquility.com" class="nav">Andy</a> > <a href="http://www.opticaltranquility.com/Site Files" class="nav">Site Files</a> > <span class="title" id="albumTitle">Favorite Links</span><div class="spacer"></div></div> <div id="albumDescription" class="bottom_border">

<div align="center">

<div id="pad"></div></div>

<div align="center"><strong style="color: #2c2c2c">Affiliates of Optical Tranquility</strong></div>
<div id="scrollbox">
<div id="thumbs">
<a class="gallery slide1" href="http://www.dulcerecords.com" target= "_blank"><span><img src="http://opticaltranquility.smugmug.com/photos/119986180-Ti.jpg"/><br />Sweet Music<br /></span></a>
<a class="gallery slide2" href="http://www.loveworksattire.com" target= "_blank"><span><img src="http://opticaltranquility.smugmug.com/photos/120860160-Ti.jpg"/><br />Love Works Attire<br /></span></a>
<a class="gallery slide3" href="http://www.nexgensurf.com"><span><img src="http://opticaltranquility.smugmug.com/photos/120860502-Ti.jpg"/><br />NexGen Surf School<br /></span></a>

</div>
</div> </div>
<div id="albumNav_top" class="top_border bottom_border albumNav">
 
<div class="spacer"></div>

</div>

*****AND THIS IS THE CODE THAT I PUT INTO THE CSS AREA.....*****

/* CSS Play code for Links Gallery */

#scrollbox {width:750px; height:80px;}
a.gallery, a.gallery:visited {display:block; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:47px; margin:3px; float:left;}
a.gallery:hover {width:75px; height:47px;}
a.slide1 {background:url(http://opticaltranquility.smugmug.com/photos/119986180-Ti.jpg);}
a.slide2 {background:url(http://opticaltranquility.smugmug.com/photos/120860160-Ti.jpg);}
a.slide3 {background:url(http://opticaltranquility.smugmug.com/photos/120860502-Ti.jpg);}

a.gallery span {display:block; position:absolute; left:150px; top:-1px; width:1px; height:1px; overflow:hidden; background:#efedec;}
a.gallery:hover {white-space:normal; border:1px solid #2c2c2c;}
a.gallery:hover img, a.gallery:active img, a.gallery:focus img {border:1px solid #000;}
a.gallery:hover span, a.gallery:active span, a.gallery:focus span {display:block; position:absolute; width:402px; height:290px; top:39px; left:170px; padding:5px; font-style:italic; color:#000; background: #c2c2c2;}
#thumbs {width:840px; height:60px;}
#pad {background:url(http://opticaltranquility.smugmug.com/photos/120860278-Ti.jpg);height:266px; (http://opticaltranquility.smugmug.com/photos/120860278-Ti.jpg%29;height:266px;) width:400px;}
.gallery_2295958 #photos {display: none;}



AM I MISSING SOMETHING HERE OR WHAT? :scratch:scratch:scratch

I realize this is an extremely/advanced hack to get and I have the patience to keep trying with a little steering, so I think I'm close minus a few minor details!

Thanks for your time and efforts :bow:bow:bow

ivar

Jan-21-2007, 02:40 AM