Getting an attribute value from a parent function in jquery

Question

I'm new to jquery, so please forgive, well... everything!

I have a 'header bar' made up of about 10 small thumbnail-style images. I would like to be able to click on these images which would then change a larger side-bar image to show a larger version.

Which, with some fiddling about, I seemed to manage by using the following code for the images:

<img src="header_images\small1.jpg" alt="alttext"  class="hdrimage" id="1" data-bigimage="big1.jpg" />
<img src="header_images\thumb2.jpg" alt="alttext"  class="hdrimage" id="2" data-bigimage="bigger2.jpg" />

etc...

I then added some jquery code at the bottom of the page:

$(".hdrimage").bind('click', function() {
  $("#swappyimage").attr("src", "header_images/"+$(this).attr("data-bigimage"));     
})

I'm not sure if that was the best way to do it, but it seems to work fine.

I then thought it would be nice to fade-out the old image and fade-in the new one, so added a .fadeOut("slow"); to the click event, but on testing it doesn't wait until the fade is complete before it swaps the image. Thanks to Google, I discovered I need to use a callback function on the .fadeOut to achieve this, so I tried something like:

$(".hdrimage").bind('click', function() {
    $("#swappyimage").fadeOut('slow', function() {
      $("#swappyimage").attr("src", "header_images/"+$(this).attr("data-bigimage"));
    })
})

But this no longer works. I'm fairly sure it's because the $(this) is now referring to #swappyimage rather than the .hdrimage that was clicked. I can't figure-out how to reference the attribute I need from the thumbnail (.hdrimage) that is clicked to trigger the whole thing, so would appreciate some help.

I hope I explained that well enough!

James Montagne · Accepted Answer · 2011-08-10 14:42:59Z

2

Simply define a variable prior to the fadeOut call:

$(".hdrimage").bind('click', function() {
    var newSrc = "header_images/"+$(this).attr("data-bigimage");
    $("#swappyimage").fadeOut('slow', function() {
      $("#swappyimage").attr("src", newSrc);
    })
})

Also, I'm assuming you just left this part out, but you never fade the image back in.

answered Aug 10, 2011 at 14:42

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stevemid Over a year ago

Yes, you're right I figured I'd sort the fade-out first. Thank you.

StuperUser · Accepted Answer · 2011-08-10 14:47:58Z

1

You can use http://api.jquery.com/event.target/ and pass the event object through the functions to where you need it.

$(".hdrimage").bind('click', function(clickEvent) {
    $("#swappyimage").fadeOut('slow', function() {
      $("#swappyimage").attr("src", "header_images/"+$(clickEvent.target).attr("data-bigimage"));
    })
})

edited Aug 10, 2011 at 14:47

answered Aug 10, 2011 at 14:41

StuperUser

10.9k14 gold badges85 silver badges143 bronze badges

3 Comments

James Montagne Over a year ago

I could be wrong, but I believe you need to remove the clickEvent from the callback parameter. The callback takes no parameters and having one there will be an issue, no?

StuperUser Over a year ago

@kingjiv You're right: (jsfiddle.net/StuperUser/XB83Q), updated answer. It's similar to yours now, but the variable is the parameter to the click handler function.

Stevemid Over a year ago

Yes! That worked thank you. Well, it did once I remembered to add the fadeIn! (That stumped me for a while!!)

Andrew · Accepted Answer · 2011-08-10 14:41:16Z

0

Just save your context,

$(".hdrimage").bind('click', function() {
   var self = this;
   $("#swappyimage").fadeOut('slow', function() {
     $("#swappyimage").attr("src", "header_images/"+$(self).attr("data-bigimage"));
   })
})

answered Aug 10, 2011 at 14:41

Andrew

13.9k14 gold badges70 silver badges85 bronze badges

Collectives™ on Stack Overflow

Getting an attribute value from a parent function in jquery

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related