cavey5 Posted November 11, 2007 Share Posted November 11, 2007 My website has news articles and we usually display a photo with each article. We'd like to show five photos though and have the ability to scan through them with links. Is there a way to do this by showing / hiding CSS layers, and not using JavaScript? Or, what is the best way to do it with javaScript? screenshot: www.timbercrawler.com/tim/photoscript.jpg Link to comment https://forums.phpfreaks.com/topic/76804-show-hide-layers-wo-javascript/ Share on other sites More sharing options...
bronzemonkey Posted November 11, 2007 Share Posted November 11, 2007 Check out the photogallery demos at css play - http://www.cssplay.co.uk/menu/ - some of them do what you are looking for using only css. Link to comment https://forums.phpfreaks.com/topic/76804-show-hide-layers-wo-javascript/#findComment-389097 Share on other sites More sharing options...
cavey5 Posted November 13, 2007 Author Share Posted November 13, 2007 Alright, i checked those out and found a suitable option, however I am having one problem adjusting the style. Can someone point out which element to adjust to move the navigation buttons (numbers) up below the photo? I cannot get any of them to work ??? Screetshot: Style Sheet #centercol { width:350px; height: 400px; background:#dcdcdc; float:left; color:#222; text-align:justify; margin:0; padding:0; } #centercol_entry { width:350px; float:left; margin:6px 0 0 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; text-align:justify; padding:0; background: #dcdcdc; } #album /* style the outer containing div to fit the landscape, portrait and buttons */ { width:350px; height:220px; background:#eee; border:1px solid #aaa; margin:0; } .gallery /* remove the padding margin and bullets from the list. Add a top margin and width to fit the images and a position relative */ { padding:0; margin:280px 0 0 0; list-style-type:none; position:relative; width:350px; } .gallery ul { margin: -30px; } .gallery img /* remove the default image border */ { border:0; } .gallery li /* make the list horizontal */ { float:left; margin: 0; } .gallery li a, .gallery li a:visited /* style the link text to be central in a surrounding box */ { font-size:11px; float:left; text-decoration:none; color:#000; background:#fff; text-align:center; width:26px; height:26px; line-height:24px; border:1px solid #444; margin:2px 2px 2px 2px; } .gallery li a img /* position the images using an absolute position and hide them from view */ { position:absolute; top:-280px; left:0; visibility:hidden; border:0; } .gallery li a img.landscape /* fix the top position for the landscape images */ { top:-280px; } .gallery li a img.portrait /* fix the left position for the portrait images */ { left:0; border-left:40px solid #eee; border-right:40px solid #eee; } .gallery li a:hover /* style the hover background color for the text boxes */ { background:#ddd; } .gallery li a:active, .gallery li a:focus /* style the active/focus colors for the text boxes (required for IE) */ { background:#444; color:#fff; } .gallery li a:active img, .gallery li a:focus img /* make the images visible on active/focus */ { visibility:visible; } Display Code <div class="centercol"> <div id="centercol_entry"> <div id="album"> <ul class="gallery"> <li><a href="#nogo">01<img class="landscape" src="images_photonav/1.jpg" alt="landscape image 1" title="landscape image 1" /></a></li> <li><a href="#nogo">02<img class="landscape" src="images_photonav/2.jpg" alt="landscape image 2" title="landscape image 2" /></a></li> <li><a href="#nogo">03<img class="landscape" src="images_photonav/3.jpg" alt="landscape image 2" title="landscape image 3" /></a></li> <li><a href="#nogo">04<img class="landscape" src="images_photonav/4.jpg" alt="landscape image 2" title="landscape image 4" /></a></li> </ul> </div> [ the article here is generated by wordpress ] </div> </div> Link to comment https://forums.phpfreaks.com/topic/76804-show-hide-layers-wo-javascript/#findComment-390281 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.