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(""); $("").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:
Name of Image
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.