CODEWITHSUNDEEP
jquerycsswordpressalt
Adam Ogden
Adam Ogden

Reputation: 75

Getting an alt tag to show up over an img on hover

So I've got it working on a jsfiddle perfectly here:

http://jsfiddle.net/5dxhC/32/

$('img', '.thumb').each(function() {
  $(this).parent().append('<div class="thumbnail-text">' + this.alt + '</div>');
}).bind({
  mouseenter: function() {
    $(this).siblings('.thumbnail-text').show();
  },
  mouseleave: function() {
    $(this).siblings('.thumbnail-text').hide(); 
  }
});

but I can't for the life of me figure out how to get it to work with a wordpress gallery plug-in here:

http://www.adammichaelogden.com/my_work/

I've tried everything I can think of and I just know its probably something very simple that I'm over looking. Any help?

Upvotes: 3

Views: 427

Answers (2)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72299

Actually it seems that $ is not accepting. I had run below code in console on your site and it worked:-

jQuery('img','.all-images').each(function() { 
    jQuery(this).parent().append('<div class="thumbnail-text">' + this.alt + '</div>'); 
}).bind({ mouseenter: function() { 
    jQuery(this).siblings('.thumbnail-text').show(); 
}, mouseleave: function() { 
    jQuery(this).siblings('.thumbnail-text').hide(); } 
});

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53674

Looks like you have a couple of syntax errors. You're missing the comma between img and .all-images selectors, and missing the closing });.

Try changing the block to this

$(function() {
  $('img','.all-images').each(function() {
    $(this).parent().append('<div class="thumbnail-text">' + this.alt + '</div>');
  }).bind({
    mouseenter: function() {
      $(this).siblings('.thumbnail-text').show();
    },
    mouseleave: function() {
      $(this).siblings('.thumbnail-text').hide();
    }
  });
});

Upvotes: 1

Related Questions