Dojo Toolkit: two galleries on one subpage

Sometimes we have to place two photo galleries on one subpage, just like it is done on our website fotografowaniedozwolone.org. I searched Internet looking for an easy mechanism based on Dojo Toolkit Framework and with the minimum amount of code.

What could be more simple than that? Internet is full of open source libraries - just take it and use it! Unfortunately none of them was suitable for me. Finally, I gave up my search and decided to create my own library.

I took the following assumptions:

  • the library should be based on Dojo Toolkit,
  • using the library should be easy and fast,
  • the code should support an unlimited number of galleries on one page (my point is that many open source libraries have problems with it),
  • any HTML code can be a slide.

The rest is standart - minimal intrusions into HTML code of the website, full scalability and speed.

After several hours of work, I'm glad to present you Urfin’s Everything Slider, which will enable you easy photographs scrolling on any site. The code is so simple and transparent that you can easilly make modifications e.g. introduce new effects or functions. I release it under the GPL. I also strongly encourage you to develop the code and share links to your works as comments to this post. This way we'll make it easier for the future searchers.

User manual in brief:

1. Unpack the contents of the shared package to the appropriate folders  (comment: I always stick to the rule that files need to be separated from each other according to the type of content).

2. Link CSS style to the library - file slider .css (comment: we should remember that CSS should be uploaded by JavaScript, because CSS is loaded asynchronously, while the scripts synchronously, which gives the effect of site "suspension"):

<link href="css/slider.css" media="screen" rel="stylesheet" type="text/css" />

3. Link Dojo library from CDN (comment: I reccomend to connect the external libraries by CDN e.g.  Google or Yahoo; it is very likely that user already has this libary uploaded from the different site thanks to the caching):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>

(comment: as you've probably noticed, I'm uploading 1.6.1 version, not the 1.7. I'm doing that because 1.7 covers yet too many mistakes.)

4. Connect the script to the same library:

<script type="text/javascript" src="js/Urfin/EverythingSlider.min.js"></script>

5. In website content we create markup for gallery, which is intuitively simple (comment: don't change the names of CSS classes):

<div class="slider">
    <div class="slides">
        <div class="slide">
            <img src="obrazek_1.jpg" alt="Obrazek 1" />
        </div>
        <div class="slide">
            <img src="obrazek_2.jpg" alt="Obrazek 2" />
        </div>
        <div class="slide">
            <img src="obrazek_3.jpg" alt="Obrazek 3" />
        </div>
    </div>
</div>

Now the gallery is ready to use!