HI. I have a wallpaper site, and I want to make a horizontal wallpaper slideshow on the top of the index page. How can I do that? thanks
www.cssplay.co.uk is a wonderful source if you want an (x)html/ css only gallery. since i'm completely without skill in java or php, this is what i am using until i have the time to master those
Google is your friend..one i found on a quick search: http://www.fortochka.com/JavaScript/HorScroller/default.htm Although it's only free for personal use!!
Do you want something like this ?: http://www.dynamicdrive.com/dynamicindex14/carousel2.htm There are many free "Image Slideshows" (with code) in this page: http://www.dynamicdrive.com/dynamicindex14/index.html
http://www.cssplay.co.uk/menu/list_gallery this one is a personal favorite. to see the code, go to the view tab in your browser and click on page source. it'll give you the code for the entire page, and you can take what you need from there. in this case, the code should be as follows: HTML <div id="showcase"> <div id="info"> <h2>A sliding list gallery</h2> <h3>18th December 2007</h3> <div class="photo"> <img class="default" src="lpics/default.jpg" alt="default image" title="" /> <ul class="topic"> <li><a class="set" href="#nogo">Image Set #1<!--[if gte IE 7]><!--></a><!--<![endif]--><b></b> <ins><table><tr><td> <ul> <li><a href="#nogo"><img class="thumb" src="lpics/portrait2b.jpg" alt="" title="" /><img class="full" src="lpics/portrait2.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/portrait3b.jpg" alt="" title="" /><img class="full" src="lpics/portrait3.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/portrait4b.jpg" alt="" title="" /><img class="full" src="lpics/portrait4.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/portrait5b.jpg" alt="" title="" /><img class="full" src="lpics/portrait5.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/portrait6b.jpg" alt="" title="" /><img class="full" src="lpics/portrait6.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/portrait7b.jpg" alt="" title="" /><img class="full" src="lpics/portrait7.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/portrait8b.jpg" alt="" title="" /><img class="full" src="lpics/portrait8.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/portrait9b.jpg" alt="" title="" /><img class="full" src="lpics/portrait9.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/portrait10b.jpg" alt="" title="" /><img class="full" src="lpics/portrait10.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/portrait11b.jpg" alt="" title="" /><img class="full" src="lpics/portrait11.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/portrait12b.jpg" alt="" title="" /><img class="full" src="lpics/portrait12.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/portrait13b.jpg" alt="" title="" /><img class="full" src="lpics/portrait13.jpg" alt="" title="" /></a></li> </ul> </td></tr></table></ins><!--[if lte IE 6]></a><![endif]--> </li> <li><a class="set" href="#nogo">Image Set #2<!--[if gte IE 7]><!--></a><!--<![endif]--><b></b> <ins><table><tr><td> <ul> <li><a href="#nogo"><img class="thumb" src="lpics/landscape1b.jpg" alt="" title="" /><img class="full" src="lpics/landscape1.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/landscape2b.jpg" alt="" title="" /><img class="full" src="lpics/landscape2.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/landscape3b.jpg" alt="" title="" /><img class="full" src="lpics/landscape3.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/landscape4b.jpg" alt="" title="" /><img class="full" src="lpics/landscape4.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/landscape5b.jpg" alt="" title="" /><img class="full" src="lpics/landscape5.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/landscape6b.jpg" alt="" title="" /><img class="full" src="lpics/landscape6.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/landscape7b.jpg" alt="" title="" /><img class="full" src="lpics/landscape7.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/landscape8b.jpg" alt="" title="" /><img class="full" src="lpics/landscape8.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/landscape9b.jpg" alt="" title="" /><img class="full" src="lpics/landscape9.jpg" alt="" title="" /></a></li> </ul> </td></tr></table></ins><!--[if lte IE 6]></a><![endif]--> </li> <li><a class="set" href="#nogo">Image Set #3<!--[if gte IE 7]><!--></a><!--<![endif]--><b></b> <ins><table><tr><td> <ul> <li><a href="#nogo"><img class="thumb" src="lpics/landscape13b.jpg" alt="" title="" /><img class="full" src="lpics/landscape13.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/landscape14b.jpg" alt="" title="" /><img class="full" src="lpics/landscape14.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/landscape15b.jpg" alt="" title="" /><img class="full" src="lpics/landscape15.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/landscape16b.jpg" alt="" title="" /><img class="full" src="lpics/landscape16.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/landscape13b.jpg" alt="" title="" /><img class="full" src="lpics/landscape13.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/landscape14b.jpg" alt="" title="" /><img class="full" src="lpics/landscape14.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/landscape15b.jpg" alt="" title="" /><img class="full" src="lpics/landscape15.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/landscape16b.jpg" alt="" title="" /><img class="full" src="lpics/landscape16.jpg" alt="" title="" /></a></li> </ul> </td></tr></table></ins><!--[if lte IE 6]></a><![endif]--> </li> <li><a class="set" href="#nogo">Image Set #4<!--[if gte IE 7]><!--></a><!--<![endif]--><b></b> <ins><table><tr><td> <ul> <li><a href="#nogo"><img class="thumb" src="lpics/bird1b.jpg" alt="" title="" /><img class="full" src="lpics/bird1.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/bird2b.jpg" alt="" title="" /><img class="full" src="lpics/bird2.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/bird3b.jpg" alt="" title="" /><img class="full" src="lpics/bird3.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/bird4b.jpg" alt="" title="" /><img class="full" src="lpics/bird4.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/bird5b.jpg" alt="" title="" /><img class="full" src="lpics/bird5.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/bird6b.jpg" alt="" title="" /><img class="full" src="lpics/bird6.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/bird7b.jpg" alt="" title="" /><img class="full" src="lpics/bird7.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/bird8b.jpg" alt="" title="" /><img class="full" src="lpics/bird8.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/portrait15b.jpg" alt="" title="" /><img class="full" src="lpics/portrait15.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/landscape10b.jpg" alt="" title="" /><img class="full" src="lpics/landscape10.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/landscape11b.jpg" alt="" title="" /><img class="full" src="lpics/landscape11.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/landscape12b.jpg" alt="" title="" /><img class="full" src="lpics/landscape12.jpg" alt="" title="" /></a></li> </ul> </td></tr></table></ins><!--[if lte IE 6]></a><![endif]--> </li> <li><a class="set" href="#nogo">Image Set #5<!--[if gte IE 7]><!--></a><!--<![endif]--><b></b> <ins><table><tr><td> <ul> <li><a href="#nogo"><img class="thumb" src="lpics/bird9b.jpg" alt="" title="" /><img class="full" src="lpics/bird9.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/bird10b.jpg" alt="" title="" /><img class="full" src="lpics/bird10.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/bird11b.jpg" alt="" title="" /><img class="full" src="lpics/bird11.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/bird12b.jpg" alt="" title="" /><img class="full" src="lpics/bird12.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/bird13b.jpg" alt="" title="" /><img class="full" src="lpics/bird13.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/bird14b.jpg" alt="" title="" /><img class="full" src="lpics/bird14.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/bird15b.jpg" alt="" title="" /><img class="full" src="lpics/bird15.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/bird16b.jpg" alt="" title="" /><img class="full" src="lpics/bird16.jpg" alt="" title="" /></a></li> <li><a href="#nogo"><img class="thumb" src="lpics/portrait16b.jpg" alt="" title="" /><img class="full" src="lpics/portrait16.jpg" alt="" title="" /></a></li> </ul> </td></tr></table></ins><!--[if lte IE 6]></a><![endif]--> </li> </ul> <br class="clear" /> </div> Code (markup): AND THE CSS /* Gallery styling */ .photo {position:relative; width:732px; height:382px;} .photo ul, .photo ul ul {padding:0; margin:0; border:0; list-style:none; width:215px;} .photo ul ul {margin-left:-9999px; height:0; overflow:hidden;} .photo ul li {width:215px; background:#ddd; float:left; background:#fff url(button/gallery_2.gif) no-repeat;} .photo ul li a.set {display:block; text-align:center; height:30px; line-height:30px; background:#fff url(button/gallery_0.gif) no-repeat; font-family: verdana, arial, sans-serif; font-size:11px; text-decoration:none;} .photo ul li table {margin:0; padding:0; display:none;} .photo ul li a.set:hover {background:transparent;} .photo ul li:hover a.set {background:transparent;} .photo ul :hover b {display:block; width:480px; height:360px; background:#f8f8f8; border:1px solid #888; position:absolute; left:250px; top:0;} .photo ul :hover table {padding:0; margin-top:-2px; display:block; border:1px solid #888; border-width:0 1px 1px 1px;} .photo ul :hover ul {margin:0; width:207px; overflow:visible; height:207px; background:transparent;} .photo ul :hover ul li {float:left; display:inline; width:56px; margin:2px 6px; background:transparent;} .photo ul :hover ul li a {background:transparent;} .photo ul :hover ul li a img.thumb {margin:3px; display:block; border:0;} .photo ul :hover ul li a img.full {position:absolute; left:-9999px; top:0; border:0;} .photo ul :hover ul li a:hover img.thumb {margin:0; border:3px solid #fc0;} .photo ul :hover ul li a:hover {background:#fff;} .photo ul :hover ul li a:hover img.full {left:250px; z-index:0; border:1px solid #000;} .photo .default {width:480px; height:360px; position:absolute; left:250px; top:0; border:1px solid #ddd;} Code (markup): ALSO, DON'T FORGET THE COPYRIGHT! /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menu/list_gallery.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ Code (markup): Put the copyright at the top of your css page and html page (using proper comment markers for html <!--- ---> or in the css if you include it in the html file. Hope this helps! EDIT: Also, don't forget to change the image sources to the images you want to use Leave the #nogo in the image links (<a href='#nogo'...) as that allows users to click on the photo they want to stay in the viewer. Edit2: I must be too tired... the whole #nogo doesn't keep the picture in the viewer... just ignore that part
To adapt the gallery to a wallpaper site, you may need to fiddle with the code a bit (maybe that's what i was thinking of with the #nogo part ) to ensure that the pictures fit and/or so that clicking on a picture will take the user to a full-sized image. Perhaps someone on here with more time can help explain; I've gotta run. Hope this helped someone! One final thing: this can only be used for personal pages (i.e. non-commercial) unless you get permission, in case that hadn't been obvious.
i actually read your post correctly this time, realizing that it didn't have what you wanted. whoops! Here are some other options, if you didn't like the one wd_2k6 posted: 1) a scrolling image bar with links in the images: http://www.csgnetwork.com/directscrollslideshow.html 2) here's a more popular one with better features: http://codebrain.com/java/codebrainslider/index.html there are a plethora of options, very few free for anything but personal use. oh well, back to schoolwork...