(function($) { "use strict"; $.fn.aRise = function() { // vars first of all var links = this, total = this.length; // add styles to head $('head').append(''); links.each(function(index) { $(this).click(function(e) { e.preventDefault(); // update index value index = $(this).index(); // remove if already opened $('#arise-div').remove(); // inner content of popup var ariseDivOptions = { id: "arise-div", html: "" + $(this).attr("title") + "" }; // include title (if any) if ($(this).attr("title")) ariseDivOptions.html = "
" + $(this).attr("title") + "
" + ariseDivOptions.html; // create aRise popup var ariseDiv = $("
", ariseDivOptions).appendTo("body").css("margin-left", "-" + ariseDiv.find('img').width() / 2 + "px"); // close popup when clicked outside it $(document).mouseup(function (e) { if (!ariseDiv.is(e.target) && ariseDiv.has(e.target).length === 0) ariseDiv.hide(); }); ariseDiv.click(function() { index = ( index == total - 1 ) ? 0 : index+1; var $this = $(this), next_href = $(links[index]).attr("href"), next_title = $(links[index]).attr("title"); $this.find('img').attr("src",next_href); $this.find('.title').html(next_title); $this.css("margin-left", "-" + $this.find('img').width() / 2 + "px"); }); }); }); } })(jQuery);