JavaScript scrolling gallery help

andproud · 02-19-2010, 02:57 AM

Hi Guys,

I've been progressing along ok onthe CSS side of things but am having some trouble on the javascript side of things. I've decided to jazz a site up with a scrolling gallery from a template i'm using but unfortunately I don't know how to get the main image to change on a click of the smaller one? can anybody please help a brother out!

here's the site template - http://dev.jeffking.co.uk/index.html

All i'm after is the big main image to change to the same (larger) image of the smaller one in the scrollbar below the main frame.

Many thanks!

bdl · 02-19-2010, 06:28 AM

There doesn't seem to be any differentiation in the IMG tag src attributes to indicate which is the larger and which is the smaller images. They're all named the same, e.g.

Code:

<!-- Big Image -->
 <div class="big-image">
  <img src="css/images/img1.jpg" alt="" />
 </div>

...

 <div class="holder">
  <div class="content">
   <ul>
    <li class="fragment">
     <a href="#"><img src="css/images/img2.jpg" alt="" /></a>
   </li>
  ...

If you change this to reflect a difference in the images, either via path or image name, you can add a click handler to the anchor tags wrapping the "little images" (or simply the images themselves) to change the "large image" src attribute to be the "large version" if the little image source.

I'd give the "little image" IMG tags an attribute to reference them by, e.g.

Code:

<img src="css/images/img_2.jpg" rel="littles" alt="" />

This will make it a bit easier for jQuery to target these images.

andproud · 02-19-2010, 08:17 PM

Quote:

Originally Posted by bdl

There doesn't seem to be any differentiation in the IMG tag src attributes to indicate which is the larger and which is the smaller images. They're all named the same, e.g.

Code:

<!-- Big Image -->
 <div class="big-image">
  <img src="css/images/img1.jpg" alt="" />
 </div>

...

 <div class="holder">
  <div class="content">
   <ul>
    <li class="fragment">
     <a href="#"><img src="css/images/img2.jpg" alt="" /></a>
   </li>
  ...

If you change this to reflect a difference in the images, either via path or image name, you can add a click handler to the anchor tags wrapping the "little images" (or simply the images themselves) to change the "large image" src attribute to be the "large version" if the little image source.

I'd give the "little image" IMG tags an attribute to reference them by, e.g.

Code:

<img src="css/images/img_2.jpg" rel="littles" alt="" />

This will make it a bit easier for jQuery to target these images.

Thanks for the quick feedback, and I apologise for the shoddy untidyness of this site, I jsut wanted to throw it up real quick to figure out how to get the small images to pick up in the large image section. If you have a look now at the source code etc I've grouped the images better but still I don't understand/know what you mean by 'adding a click handler to the anchor tags'. I told you I was a newbie when it came to javascript!

If you could help any further I'd greatly appreciate it.

Many thanks!