Question

I am using this plugin here:

http://boedesign.com/blog/2009/10/22/jsquares-for-jquery/

GitHub Link
https://github.com/jboesch/jSquares/blob/master/js/jquery.jsquares.js

… The script is working fine, but what I really need is to create a close button that only shows up inside the caption when it has been hovered over.

Clearly I don’t need a close button for a desktop site since it uses hover, but I need this for it to work better on an iPad. Our solution is basically just to have a close button in there for a person to click to manually close it.

Any help would be greatly appreciated!

EDIT – I see this in there, so is there an easy way to attach this to a button inside of the caption?

.bind('mouseleave', function(){
    _fadeInOutImage('out', options.fade_start)
    $('#js-overlay-id-' + index).remove();
    }
);

Answer 1

I found a decent way to do it.

Added this code

$('.js-overlay-html .remove').bind('click', function(){
    _fadeInOutImage('out', options.fade_start)
    $('#js-overlay-id-' + index).remove();
    return false;
    }
);

Directly after this:

$('<div id="js-overlay-id-' + index + '">' + contents + '</div>')
    .css(caption_options)
    .addClass(options._overlay_selector_class)
    .appendTo('body')
    .bind('mouseleave',
    function(){
         _fadeInOutImage('out', options.fade_start)
    $('#js-overlay-id-' + index).remove();
    }
);

Which seems to do the trick.