PDA

View Full Version : Need a scrolling menu for images



DaveX
02-24-2007, 02:43 AM
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
02-24-2007, 04:40 AM
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
02-24-2007, 03:14 PM
There is one Here on DD (http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm) ready to be edited and uploaded :D

Psicadelic
02-25-2007, 12:58 AM
I Blake, could you help me with the code of your scroll images ?

DaveX
02-25-2007, 02:34 AM
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
02-25-2007, 04:24 AM
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
02-25-2007, 02:03 PM
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
02-25-2007, 03:23 PM
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
02-25-2007, 04:27 PM
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
02-25-2007, 04:36 PM
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.

Psicadelic
02-25-2007, 06:30 PM
For the images open, i had to put this code, but i think this code is not correct.

<div id="image_viewer_wrapper">

<div id="image_viewer">
<div id="loading_msg">
<h1>Loading Image...</h1>
</div>
<div id="viewer_image_wrapper"><img src="blank.gif" id="viewer_image" alt="" /></div>
<div id="overlay"></div>
<div id="closelink"><a href="javascript:closeView()">close</a></div>
</div>
</div>

Blake
02-25-2007, 06:51 PM
Here's that part of the code:


<div id="image_viewer_wrapper">
<div id="image_viewer">
<div id="loading_msg"><h1>Loading Image...</h1></div>
<div id="viewer_image_wrapper"><img src="blank.gif" id="viewer_image" alt=""></div>

<div id="overlay"></div>
<div id="closelink"><a href="javascript:closeView()">close</a></div>
</div>
</div>

It looks exactly like what you have.

Psicadelic
02-25-2007, 07:19 PM
Blake, i want to make a legend for describe the image we press, have you any ideia ? how can i do it ?

Thanks

Blake
02-25-2007, 07:26 PM
Where do you want it to appear?

Psicadelic
02-25-2007, 07:47 PM
http://img341.imageshack.us/img341/2240/testeeg0.gif

I want to put there, everytime i click on image, she apears in your right side and the legend under the scroll.

Blake
02-25-2007, 08:04 PM
Try this:

In the page where you want the caption to appear:


<div id="caption">
</div>


And in the js file, make the following changes:




function viewImage(i)
{
var imageNum = (i + offset)%numImages;
document.getElementById("image_viewer").style.width = pics[imageNum].width + "px";
document.getElementById("image_viewer").style.height = pics[imageNum].height + "px";
document.getElementById("viewer_image").src = blank.src;
document.getElementById("image_viewer_wrapper").style.display = "block";
if (!pics[imageNum].src)
{
pics[imageNum].src = imageNames[imageNum];
}
document.getElementById("viewer_image").src = pics[imageNum].src;
document.getElementById('caption').innerHTML = captions[imageNum];
}

function closeView()
{
document.getElementById("viewer_image").src = blank.src;
document.getElementById("image_viewer_wrapper").style.display = "none";
document.getElementById('caption').innerHTML = "";
}



The variable captions (which you'll need to create) is an array containing the captions.

Psicadelic
02-25-2007, 08:28 PM
Thanks itīs working, one more thing if I put this on css file
#caption
{
font-style: italic;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
top: 830px;
left: 300px;
}

the top and left are not working, do you know why ?

Blake
02-25-2007, 08:34 PM
You can only use top and left when the position is absolute or relative.

I'm glad to hear that it's working. Please be sure to give me credit somewhere on the page.

elisa73
07-30-2007, 03:14 PM
does anybody know how to make just one of the thumbnails a link to an outside page? I've been trying different things, but it's not working. :(

thank you