Im trying to use jquery to add more functionality to the theme, but something in the portfolio item is letting me add to the theme, the portfolio code looks like the following:
<a href="#" data-rel="gallery-1" data-prev-img="#" class="first_thumb lightbox lightbox-added" data-onclick="1" title="Matt White" itemprop="contentURL"><img data-avia-tooltip="Matt White" src="#" width="180" height="180" title="matt-white" alt="" class="avia_start_animation"></a>
im trying to get the data-onclick=”1″ with the code:
$('a[data-onclick="1"]').hover(function(){
alert('clicked on first thumbnail');
});
i know thise code works, as if used it on codepen, but the enfold theme doesnt leave it work, there are no javascript errors, so i cant see why it wouldnt work.
Hi Jyles!
Try this instead.
jQuery('a[data-rel="gallery-1"]').mouseenter(function(){ alert("test"); });
Best regards,
Elliott
hi elliot, thanks for the quick reply but that doesnt work either? ive provided a link to the page below.
Hi!
You’ll want to use .post-entry-379 instead.
jQuery('.post-entry-379')
Best regards,
Elliott
That selects the whole gallery, i want to click on that and then be able to select the smaller thumbnails below the main image?
Hi!
Also, if your trying to target content loaded via AJAX (the portfolio AJAX preview) then you’ll need to use .on instead, http://api.jquery.com/on/.
Something like this.
jQuery( "body" ).on( "click", "a[data-rel="gallery-1"]", function() {
alert( "test" );
});
Best regards,
Elliott
Thank you, worked brilliant!