lucas22 Posted March 31, 2009 Share Posted March 31, 2009 I applied lightbox 2 to an experimental website i made and the next/prev buttons aren't showing when you move the mouse over the right side of the picture or the left. Everything works fine besides next/prev buttons not showing. I'm thinking i'm missing code in the CSS stylesheet. At the lightbox 2 website its saying, "Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. I don't know where I am supposed to put those in the code. here's my code for this lightbox 2here's the lightbox 2 css #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}#lightbox img{ width: auto; height: auto;}#lightbox a img{ border: none; }#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }#imageContainer{ padding: 10px; }#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }#imageContainer>#hoverNav{ left: 0;}#hoverNav a{ outline: none;}#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }#prevLink { left: 0; float: left;}#nextLink { right: 0; float: right;}#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }#imageData{ padding:0 10px; color: #666; }#imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; }#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } javascript code and link rel <script type="text/javascript" src="lightbox2/prototype.js"></script><script type="text/javascript" src="lightbox2/scriptaculous.js?load=effects,builder"></script><script type="text/javascript" src="lightbox2/lightbox.js"></script><link rel="stylesheet" href="lightbox2/lightbox.css" type="text/css" media="screen" /><style type="text/css"><!--.style2 {font-size: 12px}--></style><head> Link to comment Share on other sites More sharing options...
jlhaslip Posted March 31, 2009 Share Posted March 31, 2009 #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; } Check the file location listed in the above code. From the source of the file, go back one directory and then forward to the images folder.Url's in a css file are relative to the css file, *I think*. {root}... html files are here ... /lightbox2/lightbox.css ... css files are here ... /images/prevlabel.gif /images/nextlabel.gif Link to comment Share on other sites More sharing options...
lucas22 Posted March 31, 2009 Author Share Posted March 31, 2009 Thanks very much. I'll give that a try and see if things work out.The website is so messed up though that I might just scrap the whole thing and start anew. My files were all unorganized and that complicated things way too much for me since I am just learning right now. I have a teacher who is learning and barely shows us enough to get by. Its basically up to myself to learn on my own in this web design class. Thats why I joined this forum to get expert help from knowledgeable people like yourself . I know learning on your own is the best way you can learn anyways so I'm going for it. I got some books on dream-weaver so hopefully that will help me soon.I'm just going to keep working at it. That's all I can do. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.