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  !

Share this post

Advertisement

7 comments

  1. Really awesome work! I think if you released your demo as a template to download it would be cool too!:)

    ReplyDelete
  2. @ajdpadbury : this template is ready for download .Pls check it and give me some comments :))

    ReplyDelete
  3. I've found an awesome Jquery Image Slider that is Nivo Slider. Can you show how to implement Nivo Slider to blogger? Thank You.

    ReplyDelete
  4. @Ronny Dee : Thanks for suggestion . Nivo Slider is an awesome Jquery plugin ,it comes with 9 transition effects and look great when integrate in any site . Pls wait for me ,post on Nivo Slider will come soon ^^

    ReplyDelete
  5. Too much js files, I think that it will decrease blog's loading speed. Smoothgallery which using mootool 1.1 loads faster.

    ReplyDelete
  6. nice tut. Can you make a tut on how to integrate the image slider into blogger posts label? I'm using the template in the demo and I'm quite impress because of the features especially the gallery. When you labeled a post as "gallery" it'll automatically published in gallery. That's really a brilliant idea and doesn't give the template users a headache by manually editig their xml. hope to see it soon. thanks in advance. =]

    ReplyDelete
  7. Very nice indeed! Anyone an idea on how use this gallery in a site made with one.com (css not accessible... only html code can be embedded). Thank you!

    ReplyDelete

Here are some rules for commenting on Simplex Design blog :
1, Search first ,then ask question. You will get the answer faster
2, All comments except spams are welcome.
3, Please make all requests in English.
4, Do not use generic titles such as Admin or Mod. This confuses readers