Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    JavaScript scrolling gallery help

    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!

  • #2
    bdl
    bdl is offline
    Regular Coder
    Join Date
    Apr 2007
    Location
    Camarillo, CA US
    Posts
    590
    Thanks
    4
    Thanked 83 Times in 82 Posts
    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.

  • Users who have thanked bdl for this post:

    andproud (02-19-2010)

  • #3
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bdl View Post
    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!


  •  

    Posting Permissions

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