Download

I developed the following jQuery plugin for the Design options admin panel of Magazine Premium. All it needed to do is display an example of all of the @font-face kits that are available with the theme. It is pretty simple and just fades in a centered modal window containing an image when you click on a link.

There are just a few things you need to put in place in order to get it working. First, there is the plugin iteself.

Here is the jQuery code:

(function($) {
  $.fn.easyOverlay = function(){	
    $(this).click(function(e){
      if($("#easyOverlay")) { $("#easyOverlay").remove(); }
      $("body").append("<p id='easyOverlay'><a href='javascript:void(0)' class='closeit'>X</a></p>");
      $("<img src='"+ this.rel +"' alt='' />").appendTo('#easyOverlay').load(function() {
        var wide = ($(window).width() / 2) - ($(this).width() / 2);
        var high = ($(window).height() / 2) - ($(this).height() / 2);			
	var scrollTop = $(window).scrollTop();
        $("#easyOverlay").css({
          top: high + scrollTop + "px",
          left: wide + "px",
		  display: 'none',
          visibility: "visible"
        }).fadeIn();
      });
    });
    $("a.closeit").live("click", function(){
      $("#easyOverlay").fadeOut();
    });
  };
})(jQuery)

Here is the CSS you need:

#easyOverlay{
  position:absolute;
  border:1px solid #ccc;
  background:#333;
  padding:5px;
  visibility: hidden;
  top: 0;
  color:#fff;
  z-index: 1000;
}

#easyOverlay .closeit {
  position: absolute;
  right: 0px;
  top: 0px;
  padding: 5px;
  background: #333;
  color: #fff;
  cursor: pointer;
  z-index: 2000;
  text-decoration: none;
}

You can easily change some of the design CSS elements but a few thins need to stay in place to make it work. Don’t change the following styles:

#easyOverlay{
  position:absolute;
  visibility: hidden;
  top: 0;
  z-index: 1000;
  }

#easyOverlay .closeit {
  position: absolute;
  right: 0px;
  top: 0px;
  cursor: pointer;
  z-index: 2000;
  text-decoration: none;
  }

Now comes the HTML markup:

<a href="javascript:void(0)" class="screenshot" rel="link-to-your-image.jpg">Name of Image</a>

To call the plugin all you need to do is this:

$(document).ready(function() {
  $(".screenshot").easyOverlay();
});

There aren’t any options so all you pretty much get is a centered modal window that fades in when you click the link, and fades out when you click the X.

Test it out below:

Adler  |  Chunkfive  |  Galatia  |  Riesling

All the images used were provided by Font Squirrel.