Question

I’m using Aaron Vanderzwan’s slideshow maximage based on Jquery Cycle, but I am having some trouble adding an onclick event to the slides. while researching a solution on stack exchange I came across a solution for “clicking through” a z-index positioned div, and added the pointer-events:none CSS attribute to my set up. this jsfiddle: http://jsfiddle.net/HDRCREATIVE/cj9sh/ is an example of the slideshow I’m working on. my issue is i’m having trouble adding the following jquery to the page. Any guidance at all is appreciated. Thank you in advance!

//The following was taken from the maximage forum's.

var $maximage = $('#maximage');

// Trigger Maximage
$maximage.maximage();

// Capture click on maximage's children
$maximage.children().on('click', function(){
// Retrive our URL (set in data-href attribute on img tags)
var url = $(this).data('href');

// If our URL is set, open a new window with that URL
//    You can certainly use window.location here too
if(url.length > 0){
    window.open(
        url, // <- This is what we set with the data-href attribute
        '_blank' // <- This is what makes it open in a new window.
    );
}
});

UPDATED – WORKING CODE (Thanks to Gulty)
See JsFiddle http://jsfiddle.net/cj9sh/10/
For maximage to produce the full image responsive effect I need for this project, I had to keep the cssBackgroundSize: false, property.
Gulty’s answer led me to understand that my href was being attached to my containing div. That was no good because I’m using this in a CMS scenario and need to be able to attach different links as per the user on the fly.
So To keep the href on my <img> I Enclosed them within a <div> and simplified the click function I was trying to use above.
Preliminary test’s working so far, will update if I come across any new issues.

Answer 1

If you check your fiddle with the inspector you can see that after the JS is initiated there is no data-attr anymore on the image. The problem is all the background stuff you are doing. Not sure how maximage works but it seems that

background-size(or if you dont use that doesnt matter) converts the image to a background image inside a .mc-image div. data-href is added to the div as well (which allows you to click it).
if you now use

cssBackgroundSize: false, // We don't want to use background-size:cover for our custom size

the background image div is converted to an image again and the data-attr is removed.

So either dont use cssBackgroundSize:false and make the div .mc-image clickable (by just removing the children on the data-href call) or take another way around