Be the first to write a review
An Image Viewer with the DMXzone Universal CSS Transforms Library
The power of the Universal CSS Transforms Library for jQuery
With this article Dan will introduce you the power of the Universal CSS Transforms Library for jQuery that was recently released to open source by the DMXzone team.
The development team at DMXzone have recently produced a stunning jQuery Library that ports cool CSS transforms to all common browsers, allowing us to implement the latest CSS techniques and create stunning animations with ease and which are completely cross-browser compatible.
All of the new CSS transforms are made possible with the Universal CSS Transforms Library including:
- rotate
- skew (including skewX and skewY)
- scale (including scaleX and scaleY)
- translate (including translateX and translate)
- matrix
The Universal CSS Transform Library is available as open source on GitHub so everybody can use it and contribute.
The library allows us to both get and set any of these CSS transform functions , and allows us to animate most of them. The matrix function cannot be animated at present, and sometimes when animating we are restricted in the functions we can use. The transforms are applied (or obtained) using jQuery's css() method which is really handy as it allows us to use a familiar interface to do new and exciting things. Let's look at a basic example to get started with.
With a drop-down menu, it's useful to have an image attached to the top-level item to indicate that it contains a sub-menu. When the menu is opened it's customary to swap the indicator with another to show that the menu is open. With the transforms Library however, we don't need to swap the image. We could do this with the following underlying HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>DMXzone Universal CSS
Transforms</title>
<link rel="stylesheet" href="css/css-transforms-dropdown.css">
</head>
<body>
<ul>
<li>
<a id="show" href="#"
title="Show Tools">Tools <span>Open</span></a>
<ul>
<li>
<a href="#"
title="Image Viewer">Image Viewer</a>
</li>
<li>
<a href="#"
title="Code Editor">Code Editor</a>
</li>
<li>
<a href="#"
title="HTML Vaildator">HTML Vaildator</a>
</li>
<li>
<a href="#"
title="Media Player">Media Player</a>
</li>
</ul>
</li>
</ul>
<script src="js/jquery.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.csstransform.pack.js"></script>
</body>
</html>
The HTML is pretty standard; we use the HTML5 doctype (although this isn't strictly necessary), link to a style sheet and link to the required script files. The mark-up for the slide out menu is based around a simple nested list structure, with the indicator element defined as a <span>. We could also use the following CSS for this example:
ul {
width:260px; padding:10px;
position:relative; float:left; list-style-type:none;
font:14px Verdana, Sans-serif;
background-color:#ccc;
}
ul li { float:left; }
ul a {
display:block; padding:4px 28px 4px 20px;
border:1px solid #aaa;
border-top-width:2px;
border-right-width:2px; position:relative; z-index:999;
font-weight:bold; text-decoration:none;
color:#000;
}
ul a:hover, ul a:active, ul a:focus {
background-color:#eee; outline:0;
border-bottom:1px solid #eee;
}
a span {
display:block; width:8px; height:8px;
position:absolute; right:9px; top:10px; text-indent:-5000px;
overflow:hidden; background:url(../img/indicator.png);
}
ul ul {
display:none; width:auto; border:1px solid
#aaa; padding:0 0 10px 0;
position:absolute; left:10px; top:36px;
font-size:12px; z-index:0;
font-weight:normal; background-color:#eee;
}
ul ul li { float:none; }
ul ul a { font-weight:normal; border:none; }
ul ul a:hover { text-decoration:underline;
margin-bottom:0; border-bottom:none; }
Again, most of this is pretty arbitrary and used purely for the purpose of the example. Finally, we could bring it all together with this simple JavaScript:
<script>
(function($){
$("#show").click(function(e) {
e.preventDefault();
$(this).next().slideDown();
$(this).find("span").animate({"rotate":
90});
});
})(jQuery);
</script>
As you can see, we simply use the DMXzone transform Library to rotate the indicator image once the animation to open the menu has begun. We specify the rotate function as the style property to animate and supply the integer 90 to represent 90 degrees. Try it out; it's a nice effect that requires very little code.
Now let's move on to the main example and use some more of the Library functions. Create a new HTML file and call it css-transforms-viewer.html. I decided to use a Steampunk theme for the image viewer, to make the example more fun; the finished page will look like this:
The underlying page
The HTML for the viewer should be as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>DMXzone CSS
Transforms</title>
<link rel="stylesheet" href="css/css-transforms-viewer.css">
</head>
<body>
<div id="viewer">
<div id="cog"><!--
--></div>
<div id="window">
<img id="image1" src="img/image1.jpg"
alt="Image 1">
<img id="image2" src="img/image2.jpg"
alt="Image 2">
<img id="image3" src="img/image3.jpg"
alt="Image 3">
<img id="image4" src="img/image4.jpg"
alt="Image 4">
<img id="image5" src="img/image5.jpg"
alt="Image 5">
</div>
<div id="ui">
<ul>
<li id="image1">
<a href="#image1"
title="Veiw Image 1">Image 1</a> </li>
<li id="image2">
<a href="#image2"
title="Veiw Image 2">Image 2</a>
</li>
<li id="image3">
<a href="#image3"
title="Veiw Image 3">Image 3</a>
</li>
<li id="image4">
<a href="#image4"
title="Veiw Image 4">Image 4</a>
</li>
<li id="image5">
<a href="#image5"
title="Veiw Image 5">Image 5</a>
</li>
</ul>
<div><!--
--></div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.csstransform.pack.js"></script>
<script>
(function($){
//js to go here
})(jQuery);
</script>
</body>
</html>
Save the page as css-transforms-viewer.html. Let's walk through the structure; the whole widget is encased within an outer container, then within this we have two <div> elements; the first is the area in which the images will be displayed, the second is the area for the UI which will allow visitors to select an image to view. We also have an empty <div> that will be styled to appear like a cog, and after the UI elements we have an empty, un-attributed <div> that we'll use for the over state. At the end of the page we have our required scripts and an awaiting closure into which we can put our code.
Dan Wellman
Dan Wellman is an author and web developer based in the UK. Dan has written three books so far; the latest, jQuery UI 1.7: The User Interface Library for jQuery, was released at the end of 2009.
Dan has been writing web development tutorials for over 5 years and works by day for a local digital media agency in his home town of Southampton.