2

I am using a JQuery gallery to display an image with an opaque sliding description. I need to add a list of links so that the user can override the image displayed on the click of a link. How can I override the gallery image on click of the link?

<script>
    $(document).ready(function () {
        //Execute the slideShow
        slideShow();
    })

    function slideShow() {
        $('#gallery a').css({ opacity: 0.0 });
        $('#gallery a:first').css({ opacity: 1.0 });
        $('#gallery .caption').css({ opacity: 0.7 });
        $('#gallery .caption').css({ width: $('#gallery a').find('img').css('width') });
        $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
            .animate({ opacity: 0.7 }, 400);
        setInterval('gallery()', 6000);
    }

    function gallery() {
        var current = ($('#gallery a.show') ? $('#gallery a.show') : $('#gallery a:first'));

        var next = ((current.next().length) ? ((current.next().hasClass('caption')) ? $('#gallery a:first') : current.next()) : $('#gallery a:first'));

        var caption = next.find('img').attr('rel');
        next.css({ opacity: 0.0 })
            .addClass('show')
            .animate({ opacity: 1.0 }, 1000);

        current.animate({ opacity: 0.0 }, 1000)
            .removeClass('show');

        $('#gallery .caption').animate({ opacity: 0.0 }, { queue: false, duration: 0 }).animate({ height: '1px' }, { queue: true, duration: 300 });

        $('#gallery .caption').animate({ opacity: 0.7 }, 100).animate({ height: '100px' }, 500);

        $('#gallery .content').html(caption);
    }
</script>

<div id="gallery">
    <a href="#" class="show">
        <img src="images/storm2.jpg" alt="text in here" title="" width="480" height="260"
             rel="<h3>Description</h3>description goes in here "
    </a> <a href="#">
        <img src="images/storm1.jpg" alt="text in here" title="" width="480" height="260"
             rel="<h3>Description 2</h3>" />
    </a>...... ...... ......
    <div class="caption">
        <div class="content">
        </div>
    </div>
</div>
<div class="clear">
</div>
ankitkanojia
  • 3,072
  • 4
  • 22
  • 35
Helen
  • 87
  • 2
  • 4
  • 9

2 Answers2

9
$("a.mylink").click(function(event){
  $("img.myimage").attr("src","image2.jpg");
});

Loading the source from the link is very easy as well:

$("a.mylink").click(function(event){
  event.preventDefault();
  var newSRC = $(this).attr("href");
  $("img.myimage").attr("src", newSRC);
});
Sampson
  • 265,109
  • 74
  • 539
  • 565
  • Thanks, but how can I override the img src with the src from the hyperlink so that I do not have to hardcode any image names? – Helen Aug 24 '09 at 14:52
1
jQuery('#link').click(function() {
   jQuery('#image').attr('src',jQuery(this).attr('alt'));
}

This Method is sort of a Hack where you cheat a bit and store the src-path into the alt tab of the link.

If you want to do it by the book, I suggest you seperate logic from visuals. For instance, you create an array like follows:

myArray['link1'] = 'url1';
myArray['link2'] = 'url2';

The Array Key would be the same as the id tag of the link:

<a id="link1" href="foo">bar</a> etc...

If you do it this way, JavaScript changes as follows:

jQuery('#link').click(function() {
   jQuery('#image').attr('src',myArray[this.id]);
}
Mike
  • 2,567
  • 3
  • 23
  • 35
  • PS: Of course, if the path is already in the href-tag, Jonathan's Answer is way simpler :) – Mike Aug 24 '09 at 15:02
  • thanks for the alternative answer, I'm not sure if having the path in the href is a good idea though, it is now trying to open that path in a separate window rather than change the img path – Helen Aug 24 '09 at 15:10
  • add Return False; as the last line in the .click event to prevent it trying to open in a separate window. – Fermin Aug 24 '09 at 15:15
  • It would be better to use buttons or thumbnails of the images you want to select, since href was designed to point to another location and not to be used as trigger. If it really has to be a link you can use return false to stop the link's default action (load linked window or scroll to anchor). – Mike Aug 24 '09 at 15:22