/** * sliphover v2.0.4 * require jquery 1.7+ * MIT License * for more info pls visit :https://github.com/wayou/SlipHover */ ; (function($, window, document, undefined) { // Create the defaults once var pluginName = "sliphover", defaults = { target: 'img', //the element that the overlay will attach to caption: 'title', //the caption that will display when hover duration: 'fast', //specify how long the animation will lasts in milliseconds fontColor: '#fff', textAlign: 'center', //display the caption left, center or right verticalMiddle: true, //display the caption vertical middle or not backgroundColor: 'rgba(0,0,0,.7)', //specify the background color and opacity using rgba reverse: false, //reverse the direction height: '100%', //specify the height of the overlay withLink: true //if image is wraped with a link the overlay will be clickable, set false to disable click }; function SlipHover(element, options) { this.element = element; this.settings = $.extend({}, defaults, options); this._defaults = defaults; this._name = pluginName; this.version = 'v2.0.3'; this.init(); } SlipHover.prototype = { init: function() { //disable on touch devices if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { return; } var that = this, target = this.settings.target; //create the overlay container each time the mouse enters $(this.element).off('mouseenter.sliphover', target).on('mouseenter.sliphover', target, function(event) { //fix #9 https://github.com/wayou/SlipHover/issues/9 //use this instead of event.target for sometimes the event.target is not retriving the right target we want //http://stackoverflow.com/questions/9838137/event-target-jquery-on-mousedown-up-is-not-giving-the-dom-specified-by-selecto var $element = $(this), $overlayContainer = that.createContainer($element); $overlayContainer.off('mouseenter.sliphover mouseleave.sliphover').on('mouseenter.sliphover mouseleave.sliphover', function(event) { //if (!$overlayContainer) return; var direction = that.getDirection($(this), event); //check if reverse option is on direction = that.settings.reverse ? direction = (direction + 2) % 4 : direction; if (event.type === 'mouseenter') { //check if the previous overlay still exists before we create it var $overlay = $overlayContainer.find('.sliphover-overlay'); if (!$overlay.length) { $overlay = that.createOverlay(that, direction, $element); //put the overlay into the container $(this).html($overlay); } that.slideIn(that, $overlay); } else { //slide out based on the direction that.removeOverlay(that, $(this), direction); } }); }); }, createContainer: function($element) { //get the properties of the target var top = $element.offset().top, left = $element.offset().left, //border = parseFloat($element.css("border-left-width")), width = $element.outerWidth(), height = $element.outerHeight(); zIndex = $element.css("z-index"); var $overlayContainer = $('