Creating an Unobtrusive Javascript Image Callery Using YUI

The Yahoo User Interface (YUI) is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. YUI is available under a BSD license and is free for all uses.

Today we will build an image gallery with unobtrusive javascript that will resize images using animation and easing. The Javascript code is less than 70 lines of code and can be shortened more.

Create a folder named YUIBox (inspired by lightbox ;) ) and create 2 subfolders named images and css. Get some images and put them in the images folder. The directory should look something like this:

We will start by creating our index.php file which will scan the images directory and display the images in the page:

File index.php (Put this file in the root directory):

<!--Include YUI Loader: -->
<script src="http://yui.yahooapis.com/2.8.0r4/build/yuiloader/yuiloader-min.js" type="text/javascript"></script>

<!--Use YUI Loader to bring in your other dependencies: -->
 <!-- Combo-handled YUI CSS files: -->

 <!-- Combo-handled YUI JS files: -->

 <script src="http://yui.yahooapis.com/combo?2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js&amp;2.8.0r4/build/animation/animation-min.js&amp;2.8.0r4/build/element/element-min.js&amp;2.8.0r4/build/button/button-min.js" type="text/javascript"></script>
<!-- Include our yuibox code -->
<script src="yuibox.js" type="text/javascript"></script>
<!-- Some css for better display -->

<!-- @import "css/style.css"; -->
<div id="yuibox">$script = $_SERVER["SCRIPT_FILENAME"];
$script = str_replace("index.php","",$script);
//the path
$abpath = $script;
$path = 'images/';
$dir = opendir($abpath.$path);
$i = 0;
//scan the directory
while ($files = readdir($dir)){
if($files!="." AND $files!=".." AND $files!='Thumbs.db'){//Checking for the Thumbs.db file. Windows specific

$i++;
echo "
<div class="images"><noscript><a href="".$path.$files."" mce_href="&amp;quot;.$path.$files.&amp;quot;" target='_blank'></noscript><img id="$i" class="yuibox" alt="" />src='".$path.$files."'><noscript></a></noscript></div>
";
}
}
?>

</div>

So we see that we set a noscript tag in order to make the images clickable for non javascript users and we also set a class=yuibox on all images. We need to set the class for our script to handle the resizing.

Next we must create the css file. We will be displaying images side by side with 150×150 size.

File style.css (Put this file in the css folder):

.images{
display:inline;
float:left;
margin:5px;

}

img{
border:1px solid silver;
width:150px;
height:150px;
}

a img{
border:0;
}

#yuibox{
margin:0 auto;
width:1024px;
}

Ok. Now it is time to create our yuibox.js file. All this file does is to add an event listener on the click event to all images with class = yuibox and provide some functions to run the YUI commands.

File yuibox.js (Put this file in the root directory):

window.onload=function() {
var as = document.getElementsByTagName("img");
for(var i=0; i
var a = as[i];
if(a.className.indexOf("yuibox")>=0){
YAHOO.util.Event.addListener(a.id, "click", setupAnim);
}
}

}

var setupAnim = function(e){
imgSizes = getImgSize(e.target.src);
var move = new YAHOO.util.Anim(e.target.id, {
top: {from:e.clientY, to: screen.height/2-imgSizes.height/2},
left: {from:e.clientX, to: screen.width/2 - imgSizes.width/2},
height: { to: imgSizes.height },
width: { to: imgSizes.width }

},1,YAHOO.util.Easing.easeOut);
shrinkOthers();
move.animate();
setStyles(e.target);
e.target.style.zindex = '1';
e.target.focus();

}

var shrinkOthers = function(e){
var as = document.getElementsByTagName("img");
for(var i=0; i
var a = as[i];
if(a.className.indexOf("yuibox")>=0){
unsetupAnim(a);
a.style.border = "1px solid silver";
a.style.position = 'static';
a.style.zindex = '2';
}
}
}

var unsetupAnim = function(imgid){
var unmove = new YAHOO.util.Anim(imgid.id, {
top: {from: screen.height/2-imgSizes.height/2},
left: {from: screen.width/2 - imgSizes.width/2},
height: { to: 150 },
width: { to: 150 }
}, 1);
unmove.animate();
}

var setStyles = function(imgid){
imgid.style.border = "10px solid silver";
imgid.style.position = 'absolute';
}

function getImgSize(imgSrc){
var newImg = new Image();
newImg.src = imgSrc;
return newImg;
}

Explanation

As you can see, we check for the window.onload event and we set an event listener on the click event of all images with class=yuibox:

;
if(a.className.indexOf("yuibox")>=0){
YAHOO.util.Event.addListener(a.id, "click", setupAnim);
}
}

}

Then, we create the setupAnim function, that will get the original image size and actually animate the resizing using a 1 second animation time and the Yahoo easing utility :

var setupAnim = function(e){
imgSizes = getImgSize(e.target.src);
var move = new YAHOO.util.Anim(e.target.id, {
top: {from:e.clientY, to: screen.height/2-imgSizes.height/2},
left: {from:e.clientX, to: screen.width/2 - imgSizes.width/2},
height: { to: imgSizes.height },
width: { to: imgSizes.width }

},1,YAHOO.util.Easing.easeOut);
shrinkOthers();
move.animate();
setStyles(e.target);
e.target.style.zindex = '1';
e.target.focus();

}
 

The setupAnim function uses 3 more functions. These are:

• setStyles()
  Adds a border to the image that we are resizing
• shrinkOthers()
  Resizes all other images
• getImgSize()
  Gets the original size of the image

Function setStyles:

var setStyles = function(imgid){
imgid.style.border = "10px solid silver";
imgid.style.position = 'absolute';
}

Function shrinkOthers:

var shrinkOthers = function(e){
var as = document.getElementsByTagName("img");
for(var i=0; i
var a = as[i];
if(a.className.indexOf("yuibox")>=0){
unsetupAnim(a);
a.style.border = "1px solid silver";
a.style.position = 'static';
a.style.zindex = '2';
}
}
}

Function getImgSize:

function getImgSize(imgSrc){
var newImg = new Image();
newImg.src = imgSrc;
return newImg;
}

Another function we have to create is unsetupAnim which will be resizing the previously loaded image in a similar way that it was loaded.

Function unsetupAnim:

var unsetupAnim = function(imgid){
var unmove = new YAHOO.util.Anim(imgid.id, {
top: {from: screen.height/2-imgSizes.height/2},
left: {from: screen.width/2 - imgSizes.width/2},
height: { to: 150 },
width: { to: 150 }
}, 1);
unmove.animate();
}

This is how it looks:

You can get the download it or try a demo

Popularity: 2%

Related posts:

1. YUI-FX Beta. Effects Library With Unobtrusive Javascript During my “to know us better” with the YUI library,...
2. Creating A Google Wave Extension In 5 Steps This is a simple to follow tutorial on how to...
3. YUI Mac Like Style Desktop When i first saw jQuery desktop i was amazed of...
4. Using Bing’s API To Create A Custom Search Engine Microsoft’s search engine Bing, is a getting more popular each...
5. 10 Things to Consider Before Creating a Content Management System Having created more than 5 different content management systems, I...