Scrolling pics need help fast

naushy · 09-21-2007, 12:02 PM

Ok this is a bit hard to type out but what i am looking for is any way to make 25 pics as thumbnails, and have them in a line on a site but only a ceritin width and have it to where you can scroll through them and when you click on the thumbnail a full size image opens above it. and to keep it on the same page but just the image changing. is there any1 that can help. preferable dont want to use flash but if its the only way....lay it on me.

naushy · 09-21-2007, 12:54 PM

ok this like is what i want
http://www.cssplay.co.uk/menu/scroll_gallery.html#nogo

now when i break down the code i am missing sumthing. my full size pics end up in the scroll bar this is my break down of the code that i took out. you can view sorce on the page and compare I AM MISSING SUMTHING AND I CANt FIND IT.

<style type="text/css">

#holder {position:relative; background:transparent url(pic1b.gif) 175px 54px no-repeat; margin-bottom:10px; z-index:1;}
#scrollbox {width:400px; height:70px; background:#f4f4f4; overflow:auto; border:1px solid #aaa; margin-left:175px;}
a.gallery, a.gallery:visited {display:block; color:#000; text-decoration:none; border:1px solid #000; width:75px;

height:47px; margin:3px; float:left; font-size:11px;}
a.slidea {background:url(thumb2.jpg);}
a.slideb {background:url(thumb3.jpg);}
a.slidec {background:url(thumb4.jpg);}
a.slided {background:url(thumb5.jpg);}
a.slidee {background:url(thumb6.jpg);}
a.slidef {background:url(thumb7.jpg);}
a.slideg {background:url(thumb8.jpg);}
a.slideh {background:url(thumb9.jpg);}
a.slidei {background:url(thumb10.jpg);}
a.slidej {background:url(thumb11.jpg);}
a.slidek {background:url(thumb12.jpg);}
a.slidel {background:url(thumb13.jpg);}
a.slidem {background:url(thumb14.jpg);}
a.sliden {background:url(thumb15.jpg);}
a.slideo {background:url(thumb16.jpg);}
a.slidep {background:url(thumb17.jpg);}
a.slideq {background:url(thumb18.jpg);}

a.gallery span {display:block; position:absolute; left:150px; top:-1px; width:1px; height:1px; overflow:hidden;

background:#efedec; z-index:100; font-size:11px;}
a.gallery:hover {white-space:normal; border:1px solid #fff;}
a.gallery:hover img {border:1px solid #000; z-index:100;}
a.gallery:active img, a.gallery:focus img {border:1px solid #000; z-index:50;}

a.gallery:hover span {display:block; position:absolute; width:402px; height:280px; top:49px; left:170px; padding:5px;

font-style:italic; color:#000; background:#fff; z-index:100; font-size:11px;}
* html a.gallery:hover span {left:155px;}
a.gallery:active {border:1px solid #eee;}
a.gallery:active span, a.gallery:focus span {display:block; position:absolute; width:402px; height:280px; top:49px;

left:170px; padding:5px; font-style:italic; color:#000; background:#fff; z-index:50;}
* html a.gallery:active span {left:155px;}

#thumbs {width:1500px; height:60px;}
#pad {height:320px; width:100px;}
</style>


<body>
<div id="showcase">

<div id="info">
<div id="holder">
<h2>A Scrolling Photograph Gallery</h2>

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

<div id="scrollbox">
<div id="thumbs">
<a class="gallery slidea" href="#nogo" title="Fishes"><span><img src="pic2.jpg" alt="Fishes" title="Fishes" /><br

/>pic2.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slideb" href="#nogo" title="Funnels"><span><img src="pic3.jpg" alt="Funnels" title="Funnels" /><br

/>pic3.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slidec" href="#nogo" title="Vases"><span><img src="pic4.jpg" alt="Vases" title="Vases" /><br />pic4.jpg<br

/>Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slided" href="#nogo" title="Window"><span><img src="pic5.jpg" alt="Window" title="Window" /><br

/>pic5.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slidee" href="#nogo" title="Cascade"><span><img src="pic6.jpg" alt="Cascade" title="Cascade" /><br

/>pic6.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slidef" href="#nogo" title="Cascade"><span><img src="pic7.jpg" alt="Flowers" title="Flowers" /><br

/>pic7.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slideg" href="#nogo" title="Cascade"><span><img src="pic8.jpg" alt="Butterfly" title="Butterfly" /><br

/>pic8.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slideh" href="#nogo" title="Cascade"><span><img src="pic9.jpg" alt="Birds" title="Birds" /><br

/>pic9.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slidei" href="#nogo" title="Cascade"><span><img src="pic10.jpg" alt="Shells" title="Shells" /><br

/>pic10.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slidej" href="#nogo" title="Cascade"><span><img src="pic11.jpg" alt="Fishing" title="Fishing" /><br

/>pic11.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slidek" href="#nogo" title="Cascade"><span><img src="pic12.jpg" alt="Fishing" title="Fishing" /><br

/>pic12.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slidel" href="#nogo" title="Cascade"><span><img src="pic13.jpg" alt="Fishing" title="Fishing" /><br

/>pic13.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slidem" href="#nogo" title="Cascade"><span><img src="pic14.jpg" alt="Fishing" title="Fishing" /><br

/>pic14.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery sliden" href="#nogo" title="Cascade"><span><img src="pic15.jpg" alt="Fishing" title="Fishing" /><br

/>pic15.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slideo" href="#nogo" title="Cascade"><span><img src="pic16.jpg" alt="Fishing" title="Fishing" /><br

/>pic16.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slidep" href="#nogo" title="Cascade"><span><img src="pic17.jpg" alt="Fishing" title="Fishing" /><br

/>pic17.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slideq" href="#nogo" title="Cascade"><span><img src="pic18.jpg" alt="Fishing" title="Fishing" /><br

/>pic18.jpg<br />Photographs courtesy of morgueFile.com</span></a>
</div>
</div>

**KoosHopeloos** · 09-22-2007, 11:26 AM

@ naushy: please provide us if you can with a link to the webpage you created, it is much easier to spot what might be wrong...

09-21-2007, 12:02 PM	#1 (permalink)
naushy Registered User Join Date: Sep 2007 Posts: 2 OS: xp	Scrolling pics need help fast Ok this is a bit hard to type out but what i am looking for is any way to make 25 pics as thumbnails, and have them in a line on a site but only a ceritin width and have it to where you can scroll through them and when you click on the thumbnail a full size image opens above it. and to keep it on the same page but just the image changing. is there any1 that can help. preferable dont want to use flash but if its the only way....lay it on me.

09-21-2007, 12:54 PM	#2 (permalink)
naushy Registered User Join Date: Sep 2007 Posts: 2 OS: xp	OK I Found what i want it to look like but...... ok this like is what i want http://www.cssplay.co.uk/menu/scroll_gallery.html#nogo now when i break down the code i am missing sumthing. my full size pics end up in the scroll bar this is my break down of the code that i took out. you can view sorce on the page and compare I AM MISSING SUMTHING AND I CANt FIND IT. <style type="text/css"> #holder {position:relative; background:transparent url(pic1b.gif) 175px 54px no-repeat; margin-bottom:10px; z-index:1;} #scrollbox {width:400px; height:70px; background:#f4f4f4; overflow:auto; border:1px solid #aaa; margin-left:175px;} a.gallery, a.gallery:visited {display:block; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:47px; margin:3px; float:left; font-size:11px;} a.slidea {background:url(thumb2.jpg);} a.slideb {background:url(thumb3.jpg);} a.slidec {background:url(thumb4.jpg);} a.slided {background:url(thumb5.jpg);} a.slidee {background:url(thumb6.jpg);} a.slidef {background:url(thumb7.jpg);} a.slideg {background:url(thumb8.jpg);} a.slideh {background:url(thumb9.jpg);} a.slidei {background:url(thumb10.jpg);} a.slidej {background:url(thumb11.jpg);} a.slidek {background:url(thumb12.jpg);} a.slidel {background:url(thumb13.jpg);} a.slidem {background:url(thumb14.jpg);} a.sliden {background:url(thumb15.jpg);} a.slideo {background:url(thumb16.jpg);} a.slidep {background:url(thumb17.jpg);} a.slideq {background:url(thumb18.jpg);} a.gallery span {display:block; position:absolute; left:150px; top:-1px; width:1px; height:1px; overflow:hidden; background:#efedec; z-index:100; font-size:11px;} a.gallery:hover {white-space:normal; border:1px solid #fff;} a.gallery:hover img {border:1px solid #000; z-index:100;} a.gallery:active img, a.gallery:focus img {border:1px solid #000; z-index:50;} a.gallery:hover span {display:block; position:absolute; width:402px; height:280px; top:49px; left:170px; padding:5px; font-style:italic; color:#000; background:#fff; z-index:100; font-size:11px;} * html a.gallery:hover span {left:155px;} a.gallery:active {border:1px solid #eee;} a.gallery:active span, a.gallery:focus span {display:block; position:absolute; width:402px; height:280px; top:49px; left:170px; padding:5px; font-style:italic; color:#000; background:#fff; z-index:50;} * html a.gallery:active span {left:155px;} #thumbs {width:1500px; height:60px;} #pad {height:320px; width:100px;} </style> <!--[if IE 7]> <style type="text/css"> a.gallery span {display:block; position:absolute; width:402px; height:280px; top:49px; left:-99999px; padding:5px; font-style:italic; color:#000; background:#fff; z-index:100; font-size:11px;} a.gallery span img {border:1px solid #000;} a.gallery:hover {white-space:normal; border:1px solid #fff;} a.gallery:hover img {border:1px solid #000; z-index:100;} a.gallery:active img, a.gallery:focus img {border:1px solid #000; z-index:50;} a.gallery:hover span {left:170px; z-index:100;} a.gallery:hover span img {border:1px solid #000;} a.gallery:active span, a.gallery:focus span {left:170px; z-index:50;} </style> <![endif]--> <body> <div id="showcase"> <div id="info"> <div id="holder"> <h2>A Scrolling Photograph Gallery</h2> <div id="pad"></div> <div id="scrollbox"> <div id="thumbs"> <a class="gallery slidea" href="#nogo" title="Fishes"><span><img src="pic2.jpg" alt="Fishes" title="Fishes" /><br />pic2.jpg<br />Photographs courtesy of morgueFile.com</span></a> <a class="gallery slideb" href="#nogo" title="Funnels"><span><img src="pic3.jpg" alt="Funnels" title="Funnels" /><br />pic3.jpg<br />Photographs courtesy of morgueFile.com</span></a> <a class="gallery slidec" href="#nogo" title="Vases"><span><img src="pic4.jpg" alt="Vases" title="Vases" /><br />pic4.jpg<br />Photographs courtesy of morgueFile.com</span></a> <a class="gallery slided" href="#nogo" title="Window"><span><img src="pic5.jpg" alt="Window" title="Window" /><br />pic5.jpg<br />Photographs courtesy of morgueFile.com</span></a> <a class="gallery slidee" href="#nogo" title="Cascade"><span><img src="pic6.jpg" alt="Cascade" title="Cascade" /><br />pic6.jpg<br />Photographs courtesy of morgueFile.com</span></a> <a class="gallery slidef" href="#nogo" title="Cascade"><span><img src="pic7.jpg" alt="Flowers" title="Flowers" /><br />pic7.jpg<br />Photographs courtesy of morgueFile.com</span></a> <a class="gallery slideg" href="#nogo" title="Cascade"><span><img src="pic8.jpg" alt="Butterfly" title="Butterfly" /><br />pic8.jpg<br />Photographs courtesy of morgueFile.com</span></a> <a class="gallery slideh" href="#nogo" title="Cascade"><span><img src="pic9.jpg" alt="Birds" title="Birds" /><br />pic9.jpg<br />Photographs courtesy of morgueFile.com</span></a> <a class="gallery slidei" href="#nogo" title="Cascade"><span><img src="pic10.jpg" alt="Shells" title="Shells" /><br />pic10.jpg<br />Photographs courtesy of morgueFile.com</span></a> <a class="gallery slidej" href="#nogo" title="Cascade"><span><img src="pic11.jpg" alt="Fishing" title="Fishing" /><br />pic11.jpg<br />Photographs courtesy of morgueFile.com</span></a> <a class="gallery slidek" href="#nogo" title="Cascade"><span><img src="pic12.jpg" alt="Fishing" title="Fishing" /><br />pic12.jpg<br />Photographs courtesy of morgueFile.com</span></a> <a class="gallery slidel" href="#nogo" title="Cascade"><span><img src="pic13.jpg" alt="Fishing" title="Fishing" /><br />pic13.jpg<br />Photographs courtesy of morgueFile.com</span></a> <a class="gallery slidem" href="#nogo" title="Cascade"><span><img src="pic14.jpg" alt="Fishing" title="Fishing" /><br />pic14.jpg<br />Photographs courtesy of morgueFile.com</span></a> <a class="gallery sliden" href="#nogo" title="Cascade"><span><img src="pic15.jpg" alt="Fishing" title="Fishing" /><br />pic15.jpg<br />Photographs courtesy of morgueFile.com</span></a> <a class="gallery slideo" href="#nogo" title="Cascade"><span><img src="pic16.jpg" alt="Fishing" title="Fishing" /><br />pic16.jpg<br />Photographs courtesy of morgueFile.com</span></a> <a class="gallery slidep" href="#nogo" title="Cascade"><span><img src="pic17.jpg" alt="Fishing" title="Fishing" /><br />pic17.jpg<br />Photographs courtesy of morgueFile.com</span></a> <a class="gallery slideq" href="#nogo" title="Cascade"><span><img src="pic18.jpg" alt="Fishing" title="Fishing" /><br />pic18.jpg<br />Photographs courtesy of morgueFile.com</span></a> </div> </div>

09-22-2007, 11:26 AM	#3 (permalink)
KoosHopeloos TSF Enthusiast Join Date: Nov 2004 Posts: 555 OS: Windows XP Pro & Windows Vista Ultimate browsing the web with FF, Opera, Safari and IE.	Re: Scrolling pics need help fast @ naushy: please provide us if you can with a link to the webpage you created, it is much easier to spot what might be wrong... __________________ KoosHopeloos, straight to you from .nl via the world wide web!