Need a scrolling menu for images

[DaveX]

I'm very green when it comes to scripts but here goes nothing: i need something that allows me to show a row of thumbnails that can be scrolled through by placing the cursor on either side of the scroll box. when a thumb is clicked I need the full size image to appear above (the scroll box would be at the bottom of the page). I've seen these done in Flash and maybe Javascript. I don't use Flash yet so I'm looking for other methods/possibilities. Any ideas?

[Blake]

I have something like that on my website:

www.blake-foster.com/art.html

If that's what you're talking about, I can explain how it works.

[BLiZZaRD]

There is one Here on DD ready to be edited and uploaded

[Psicadelic]

I Blake, could you help me with the code of your scroll images ?

[DaveX]

This is exactly what I'm looking for! Looking at the code I see references of course. I'm wondering does that assume everything including the pictures are in the same location i.e. the root?

[Blake]

I Blake, could you help me with the code of your scroll images ?

Here's a link to the script that does it, which should get you started.

http://www.blake-foster.com/scroller.js

I'm about to go to bed now. I'll explain it more tomorrow if you want.

The code depends on some things that are in the CSS stylesheet.

[Psicadelic]

Thanks, I´ve already downloaded the file but I couldn't made it working, if you could explain me how it works I would appreciate.

[Blake]

Alright, here's the rest. Once you have this set up, I would just ask that you give me credit on your page, perhaps with a link to my website.

Anyway, that script is only part of the code. You'll need this as well, either in a separate CSS stylesheet, or between <style> tags.

.image_scroller
{
	position: absolute;
	border: 1px solid #165117;
	background: #202020;
	top: 480px;
	min-height: 138px;
	height: 138px;
}

#scroller_body
{
	left: 335px;
	width: 500px;
}

#scroll_content_wrapper
{
	position: absolute;
	left: 5px;
	top: 4px;
	width: 490px;
	height: 130px;
	padding: 0px 0px 0px 0px;
	overflow: hidden;
}


#scroll_content
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 5000px;
	height: 130px;
	white-space: nowrap;
}

#sr_button
{
	cursor: pointer;
	width: 30px;
	left: 845px;
}

#sl_button
{
	cursor: pointer;
	width: 30px;
	left: 295px;
}

.thumbnail
{
	cursor: pointer;
	display: inline;
	margin-right: 5px;
}

.thumbnail_img_off
{
	border: 1px solid #808080;
}

.thumbnail_img_on
{
	border: 1px solid #FFFFFF;
}

#image_viewer_wrapper
{
	display: none;
	position: absolute;
	z-index: 3;
	left: 250px;
	top: 175px;
	width: 690px;
	text-align: center;
}

#image_viewer
{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	background: #000000;
	border: 1px solid #E0E0E0;
}

#closelink
{
	font-size: 12px;
	position: absolute;
	top: 5px;
	right: 5px;
	padding: 2px 2px 2px 2px;
	border: 1px solid #E0E0E0;
	background: #101010;
}

#viewer_image_wrapper
{
	position: absolute;
	top: 0px;
	left: 0px;
}

#loading_msg
{
	position: absolute;
	display: block;
	left: 0px;
	right: 0px;
	top: 20px;
	text-align: center;
	color: #808080;
}

Now, here's the part that actually goes in your page:

	<div class="image_scroller" id="sr_button"><img src="sr.gif" alt="Scroll right" onmouseover="rightMouseover(this);" onmouseout="rightMouseout(this);"></div>
	<div class="image_scroller" id="sl_button"><img src="sl.gif" alt="Scroll left" onmouseover="leftMouseover(this);" onmouseout="leftMouseout(this);"></div>
	<div class="image_scroller" id="scroller_body">
		<div id="scroll_content_wrapper">

			<div id="scroll_content"><div 
				class="thumbnail"><img class="thumbnail_img_off" id="th0" src="towerth.gif" onclick="viewImage(0)" alt="" onmouseover="this.className='thumbnail_img_on'" onmouseout="this.className='thumbnail_img_off'"></div><div
				class="thumbnail"><img class="thumbnail_img_off" id="th1" src="laketh.gif" onclick="viewImage(1)" alt=""  onmouseover="this.className='thumbnail_img_on'" onmouseout="this.className='thumbnail_img_off'"></div><div
				class="thumbnail"><img class="thumbnail_img_off" id="th2" src="observatoryth.gif" onclick="viewImage(2)" alt=""  onmouseover="this.className='thumbnail_img_on'" onmouseout="this.className='thumbnail_img_off'"></div><div
				class="thumbnail"><img class="thumbnail_img_off" id="th3" src="spaceshipth.gif" onclick="viewImage(3)" alt=""  onmouseover="this.className='thumbnail_img_on'" onmouseout="this.className='thumbnail_img_off'"></div><div
				class="thumbnail"><img class="thumbnail_img_off" id="th4" src="spacestationth.gif" onclick="viewImage(4)" alt=""  onmouseover="this.className='thumbnail_img_on'" onmouseout="this.className='thumbnail_img_off'"></div><div
				class="thumbnail"><img class="thumbnail_img_off" id="th5" src="spaceship2th.gif" onclick="viewImage(5)" alt=""  onmouseover="this.className='thumbnail_img_on'" onmouseout="this.className='thumbnail_img_off'"></div><div
				class="thumbnail"><img class="thumbnail_img_off" id="th6" src="templeth.gif" onclick="viewImage(6)" alt=""  onmouseover="this.className='thumbnail_img_on'" onmouseout="this.className='thumbnail_img_off'"></div><div
				class="thumbnail"><img class="thumbnail_img_off" id="th7" src="spaceship3th.gif" onclick="viewImage(7)" alt=""  onmouseover="this.className='thumbnail_img_on'" onmouseout="this.className='thumbnail_img_off'"></div>
			</div>
		</div>	
	</div>

	<script type="text/javascript">initScroller();</script>

Notice that on each image has id thn, where n starts counting from zero, and that the onclick event for each image is viewImage(n), where n is the same as in the images id.

You'll also need a 1 pixel transparent image called blank.gif, which is the default image for the viewer. I used that because in some browsers, reassigning the src attribute of an image isa bit slow if the image hasn't loaded yet, and I was getting a momentary "flicker" of the previous image when the viewing window popped up.

You can just use mind if you want.

www.blake-foster.com/blank.gif

Finally, in the js file, you'll need to adjust the initScroller() function to match the names of your image files, and you'll need to change the numImages variable to match the number of images you have.

EDIT:

I forgot to mention, the scroll images should be called sl.gif and sr.gif (the arrows). You'll also need to change some widths and heights here and there. The height of both the scroller and the scroll buttons is controlled here:

.image_scroller
{
	position: absolute;
	border: 1px solid #165117;
	background: #202020;
	top: 480px;
	min-height: 138px;
	height: 138px;
}

The width of the buttons is controlled here:

#sr_button
{
	cursor: pointer;
	width: 30px;
	left: 845px;
}

#sl_button
{
	cursor: pointer;
	width: 30px;
	left: 295px;
}

[Psicadelic]

Thanks!
But I would like to ask you one more thing..
I would like to know the code to when we click into an image; and if possible, when we click, the image opens in the same window we are navigating..

Regards

[Blake]

Thanks!
But I would like to ask you one more thing..
I would like to know the code to when we click into an image; and if possible, when we click, the image opens in the same window we are navigating..

Regards

The code is all there. The onclick event in each of the thumbnails is what makes the image appear. The onclick event calls the viewImage function, which will make the image appear in the same window.