JonDesign's Smooth Gallery - An awesome Gallery in Mootool

I'm familiar with Jquery ,but I find out that Mootool also has some good plugins ,and their effect are very impress . JonDesign's Smooth Gallery (JdGallery) is one of them .It's not only a good slider and carousel for website but also a complete gallery .
In this post , I want to introduce this Mootool's plugin to you all .With this plugin ,you can set up a complete gallery without using Flash as before .
See it screenshot :






And see it in action in the live demo 
Images is organized in Categories ,name of categories are displayed in the top-right of the gallery .When you click on the name of a category ,it goes down and show you images contain in . You can browse and choose the image you want to show .Or you can do nothing and let images auto slide ...
Now ,I will show you how we can apply this script to our site or blogger to make a gallery :
1,Download this script here
2,Unzip and you will see 3 folders and some html file for demo .Name of 3 folders are : CSS,images and scripts .Upload all files in Script folder and file jd.gallery.css in CSS folder to a host . The best is Google code
3,You can insert the code bellow direct to Blogger template file ,but it's easier if you insert in a HTML/Javascript widget . I heard people complaint it's hard to find and edit in Blogger template file (xml format) so it will be easy if you just work with a widget .
So,Adding a HTML/Javascript widget and paste this code into widget content first :

<link rel="stylesheet" href="url..../jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
        <script src="url.../mootools-1.2.1-core-yc.js" type="text/javascript"></script>
        <script src="url..../mootools-1.2-more.js" type="text/javascript"></script>
        <script src="url..../jd.gallery.js" type="text/javascript"></script>
<script src="url..../jd.gallery.set.js" type="text/javascript"></script>
<script src="url..../jd.gallery.transitions.js" type="text/javascript"></script>


Ok,those are basic javascript file for JdGallery plugins .Other files will be added for special function ,for example : image zoom ,or Forward/Back navigation ...
4,Adding images to gallery as structure bellow

<div id="myGallerySet">
  <div id="gallery1" class="galleryElement">
    <h2>Category 1</h2>
    <div class="imageElement">
      <h3>Item 1 Title</h3>
      <p>Item 1 Description</p>
      <a href="#" title="open image" class="open"></a>
      <img src="link to image 1" class="full" />
      <img src="link to image 1 in thumbnail" class="thumbnail" />
    </div>
    <div class="imageElement">
      <h3>Item 2 Title</h3>
      <p>Item 2 Description</p>
      <a href="#" title="open image" class="open"></a>
      <img src="link to image 2" class="full" />
      <img src="link to image 2 in thumbnail" class="thumbnail" />
    </div>
  </div>
  <div id="gallery1" class="galleryElement">
    <h2>Category 1</h2>
    <div class="imageElement">
      <h3>Item 1 Title</h3>
      <p>Item 1 Description</p>
      <a href="#" title="open image" class="open"></a>
      <img src="link to image 1" class="full" />
      <img src="link to image 1 in thumbnail" class="thumbnail" />
    </div>
    <div class="imageElement">
      <h3>Item 2 Title</h3>
      <p>Item 2 Description</p>
      <a href="#" title="open image" class="open"></a>
      <img src="link to image 2" class="full" />
      <img src="link to image 2 in thumbnail" class="thumbnail" />
    </div>
  </div>
......................... 

</div>

In the code above,each image is covered by the code :
<div class="imageElement">
      <h3>Item Title</h3>
      <p>Item Description</p>
      <a href="#" title="open image" class="open"></a>
      <img src="link to image" class="full" />
      <img src="link to image in thumbnail" class="thumbnail" />
    </div>
link to image and link to image in thumbnail can be the same if you don't want resize image to thumbnail .
Image elements above are covered in category as structure :
<div id="gallery" class="galleryElement">
    <h2>Category name</h2>
    <div class="imageElement">
     ......................
    </div>
    <div class="imageElement">
      ...................
    </div>

  </div>
And categories are covered in an element with id=myGalleryset as bellow :

<div id="myGallerySet">
  <div id="gallery1" class="galleryElement">
   
.....................
  </div>
  <div id="gallery2" class="galleryElement">
   ................
   </div>
......................... 

</div>
Very straight and easy . You can add more element for images and categories as you want like the structure I showed above .
6,To make it work ,we must add this code  at the end of widget content :

<script type="text/javascript">
function startGallery() {
var myGallerySet = new gallerySet($('myGallerySet'), {
timed: true
});
}
window.addEvent('domready', startGallery);
</script>
Save widget and see the result .
This post is very simple . I just want to introduce to you a Mootool's plugin and the basic to set-up a gallery . This plugin has many options and I can't write all here because it will be so long .If you want to know more ,you can see in this site
I hope you like it  !