Question

I’m using the photo slider code from here: http://tympanus.net/codrops/2010/10/07/slider-gallery/ and trying to modify it so that the link below the images loads up in a new window.

For example:

<div class="content">
<div><a href="#"><img src="http://imageurl" alt="largeimageurl" /></a></div>
<div class="caption"><a target="_blank" href="image.php?id=someid&svc=somesvc" rel="nofollow">More Info</a></div>
</div>

I’ve tried a variety of different things with the javascript file, which currently reads:

$fp_content_wrapper.find('.content').bind('click',function(e){
    var $current = $(this);
    //track the current one
    current = $current.index();
    //center and show this image
    //the second parameter set to true means we want to
    //display the picture after the image is centered on the screen
    centerImage($current,true,600);
    e.preventDefault();
    });

What I need to do is alter that first line so that it selects as normal, but doesn’t apply anything to the caption div, which has the link in, so that it behaves as normal.

I know there’s similar questions on SO, but I have tried most of the suggested ones. I don’t have much experience with JS at all, so it could easily be me doing it wrong.

Appreciate any help!

Answer 1

Try this:

$fp_content_wrapper.find('.content>*:not(.caption)').bind('click',function(e) .....

What was happening is that you were selecting the content tag, instead you wanted to select what was inside it, except for anything with the .csption class.
‘>’ means element directly below and ‘*’ means select all. So what it translates to is “select everything directly below .content that is not a class of .caption”.

If you continue using jquery it’s worth while studying the selectors.

Good luck