Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 01-15-2013, 07:43 PM   PM User | #1
katnsoul
New to the CF scene

 
Join Date: Jan 2013
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
katnsoul is an unknown quantity at this point
Newbie - Javascript Slideshow Help

Original slideshow
http://sandbox.scriptiny.com/javascript-slideshow/

I'm fairly new at creating slideshows and would really appreciate the help with a project that I'm working on. I'm attempting to create 3 rows of sliders that hold thumbnails directly beneath the large image. The original, of course, has just one row (I'd like each row to hold 4 images that are viewable and a total of around 12 to 15 images...obviously some hidden). Please keep in mind I'm new at this. I've been playing with this script for hours and nothing seems to be working. The html if viewable from the link above. I've copied the css below. Please let me know if there is anything else that you need. Thanks again. I really really appreciate it!

css
[code]
body {margin:0; background:#111; padding:5px; font:11px Verdana,Arial}
#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width:506px; margin:50px auto; display:none}
#wrapper * {margin:0; padding:0}
#fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}
#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px}
#image {width:500px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:306px; cursorointer; z-index:150}
#imgprev {left:0; background:url(images/left.gif) left center no-repeat}
#imgnext {right:0; background:url(images/right.gif) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(images/link.gif) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(images/scroll-left.gif) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url(images/scroll-right.gif) center center no-repeat}
#slideright:hover {background-color:#333}
#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden}
#slider {position:absolute; left:0; height:81px}
#slider img {cursorointer; border:1px solid #666; padding:2px}
[Code]
katnsoul is offline   Reply With Quote
Reply

Bookmarks

Tags
help me please, javascript, jquery slider, slider

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 08:49 AM.


Advertisement
Log in to turn off these ads.