Page 1 of 2 12 LastLast
Results 1 to 10 of 19

Thread: Need a scrolling menu for images

  1. #1
    Join Date
    Feb 2007
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Need a scrolling menu for images

    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?

  2. #2
    Join Date
    Feb 2007
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.
    "Rock and roll ain't noise pollution." - AC/DC

    http://www.blake-foster.com

  3. #3
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    There is one Here on DD ready to be edited and uploaded
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  4. #4
    Join Date
    Feb 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  5. #5
    Join Date
    Feb 2007
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  6. #6
    Join Date
    Feb 2007
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Psicadelic View Post
    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.
    "Rock and roll ain't noise pollution." - AC/DC

    http://www.blake-foster.com

  7. #7
    Join Date
    Feb 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  8. #8
    Join Date
    Feb 2007
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

    Code:
    .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:

    Code:
    	<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:

    Code:
    .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:

    Code:
    #sr_button
    {
    	cursor: pointer;
    	width: 30px;
    	left: 845px;
    }
    
    #sl_button
    {
    	cursor: pointer;
    	width: 30px;
    	left: 295px;
    }
    "Rock and roll ain't noise pollution." - AC/DC

    http://www.blake-foster.com

  9. #9
    Join Date
    Feb 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  10. #10
    Join Date
    Feb 2007
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Psicadelic View Post
    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.
    "Rock and roll ain't noise pollution." - AC/DC

    http://www.blake-foster.com

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •