Floom

  • 25 July

Blinds-effect MooTools slideshow.

Setting it up

There are two ways of setting Floom up. One is the object way, where you specify the image url and the caption using the key-value notation.

var slides = [
  {
    image: 'photo-1.jpg',
    caption: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit'
  },
  {
    image: 'photo-2.jpg',
    caption: 'Excepteur sint occaecat cupidatat non proident'
  }
];
 
$('blinds').floom(slides, {
  axis: 'vertical'
});
<div id="blinds"></div>

The second one is by simply passing a element collection, ie. $$('#blinds img'), where the passed element has to be the actual image collection. In this scenario the caption is the elements title attribute.

$('blinds').floom($$('#blinds img'), {
  axis: 'vertical'
});
<div id="blinds">
  <img title="Description 0" alt="" src="nature-photo0.jpg" />
  <img title="Description 1" alt="" src="nature-photo1.jpg" />
  <img title="Description 2" alt="" src="nature-photo2.jpg" />
  <img title="Description 3" alt="" src="nature-photo3.jpg" />
  <img title="Description 4" alt="" src="nature-photo4.jpg" />
</div>

Options

All options have default values assigned, hence are optional.

1.0

  • prefix: (str) class prefix for dynamically created elements. Defaults to floom
  • amount: (int) amount of blinds. Defaults to 24
  • animation: (int) animation duration for each blind (slice). Defaults to 70
  • interval: (int) the interval between slide change. Defaults to 8000
  • axis: (str) either horizontal or vertical. Defaults to vertical
  • progressbar: (bool) show the progress bar. Defaults to true
  • captions: (bool) show the captions. Defaults to true
  • captionsFxIn: (obj) extend morph-in
  • captionsFxOut: (obj) extend morph-out
  • slidesBase: (str) the directory where to look for images/slides
  • sliceFxIn: (obj) extend morph-in
  • onSlideChange: fires on slide change
  • onPreload: fires on slides preload (once, on script initialization)
  • onFirst: fires when at the first slide
  • onLast: fires when at the last slide

Download & demo

41 responses so far. Care to add one yourself?

  1. Chris July 25th, 2009 at 12:21

    • Excellent Plugin. I’m looking forward to using this in one of my projects

  2. Memiux July 25th, 2009 at 13:52

    • Start smoothly but there’s a little jump at the end. Anyway it’s amazing :)

  3. Sebastian Dada? July 25th, 2009 at 14:36

    • Hot.

  4. Lim Chee Aun July 26th, 2009 at 02:57

    • Wow, this looks really good. Is it possible for this plugin to be on GitHub (so that I could fork it)?

  5. Giovanni July 26th, 2009 at 03:08

    • wow! it’s awesome!

  6. deno July 26th, 2009 at 07:22

    • sexy :)

  7. Oskar Krawczyk July 26th, 2009 at 17:19

    • @Lim Chee Aun, that is the plan. I just didn’t have the time to do it bs weekend.

  8. Fábio M. Costa July 26th, 2009 at 20:57

    • Really cool Oskar, but as @MEMIUX said theres a little jump at the end.

  9. tolga ergin July 27th, 2009 at 03:40

    • woow - so sexy

  10. Tom Stone July 31st, 2009 at 14:43

    • Does this work with Mootools v. 1.2.3 as well? Because, the second set-up doesn’t seem to work…

  11. Tom Stone July 31st, 2009 at 17:06

    • Oh, I think I’ve figured it out. Apparantly, one can only have the filenames of the images in the img-tag’s src attribute, but not the path. The directory must instead be set via “slidesBase” in Floom. A bit awkward, but the result looks great!

  12. Pedro Gabriel August 4th, 2009 at 16:12

    • Hi, nice video. But the example is messed up in Firefox 3.0.11 / Ubuntu 9.10.

  13. Tomek Augustyn August 15th, 2009 at 12:26

    • Respect for using Fireworks Oskar! :)

  14. Oskar Krawczyk August 15th, 2009 at 15:21

    • Pedro, I always support the lastest iteration of one of the modern browsers (Safari & Firefox) and IE6+.

  15. Edoardo Tenani October 25th, 2009 at 10:28

    • This is fantastic… only one thing: the example is all messed up on Firefox 3.5.3/Windows XP

  16. Xtence October 25th, 2009 at 22:16

    • Great ! I love this, great work, runs nice and smooth, eat your heart out flash !

  17. mymyhope October 26th, 2009 at 05:34

    • it’s very nice effect,but it make ie6 dead,please check it if you use ie6,this js code will make all ie6 windows closed

  18. Jayaveer October 26th, 2009 at 08:13

    • nice blinds, but…. will there be an option in the near future to navigate prev and next?

  19. Minneapolis Web Design Guy October 26th, 2009 at 13:35

    • People are saying it crashes IE6. Hopefully it is fixed. if not, i suppose we gotta wait a few years until IE6 finally goes under.

  20. Oskar Krawczyk October 26th, 2009 at 16:19

    • @MYMYHOPE Seems like it’s about time you re-install your IE6 or use a native not a standalone version (it can’t be trusted).

      @JAYAVEER No.

      @MINNEAPOLIS WEB DESIGN GUY Floom works fine on IE6.

  21. -ceo- agentur seitlich October 26th, 2009 at 21:40

    • nice plugin with a huge possibility for my further projects. i saw it and from the first look i began to love it. and the really useful in my opinion is the fact the plugin is based on the mootools library. my favourite system is the open source cms joomla!. this one comes with the built-in mootools. i think it will develop an extension for joomla! 1.5 as soon as possible.

      your plugin brings an awesome and amazing graphical effect to the screen of the user. no plugin have done it before! phantastic work my friend, phantastic! thank you for developing!

      greets from germany -agentur seitlich-

  22. bahidev October 27th, 2009 at 00:48

    • nice tanks

  23. omer October 27th, 2009 at 07:24

    • beatifull! very good!

  24. Oqla Saada October 27th, 2009 at 12:28

    • Simply Great

  25. Karl November 5th, 2009 at 14:35

    • Nice work! One suggestion: the blinds transition is ending prematurely on the right side. Hence the “jump” MEMIUX was referring to. As soon as the blind transition reaches the right, the entire image pops in, but for best effect, the entire wave of blinds must completely pass through the right boundary.

  26. Bigismall November 9th, 2009 at 20:14

    • ?wietna robota Oskar

  27. Keith November 10th, 2009 at 20:29

    • Beautiful effect, but I can’t use it because it’s not SEO friendly :(. If you could make the captions display from regular html (maybe a particular div) that would be super awesome. This would also allow the captions to be styled via CSS.

  28. Oskar Krawczyk November 11th, 2009 at 23:09

    • Saying it’s “SEO unfriendly” is VERY misleading, it simply doesn’t suit your needs, but it in fact is SEO friendly, since the captions are being fetched from seo-friendly “title” attribute.

      Captions and the whole Floom instance can be styles through CSS as it stands.

  29. wie yoga November 12th, 2009 at 06:22

    • your plugin brings an awesome and amazing graphical effect …! thanks alot

  30. Ghino Di Tacco November 13th, 2009 at 01:02

    • As said, there’s a little “jump” in the transition on the right side, in ends prematurely. Any way to make it a bit smoother?

      Thanks a lot for your work

  31. Steffy November 17th, 2009 at 07:28

    • wonderfull plugin.. I’m totally stocked.. I’m a rookie, does it pre-load all the photos at the same time, or on demand.. I would like to use it for a 100 photo 960 px wide so loading time can be an issue thak you again for great job

  32. Oskar Krawczyk November 17th, 2009 at 12:32

    • Thanks Steffy! Floom preloads all images and then activates the slideshow– I never thought about using more than 10 images since, well, who would want to wait and see 100 images dissolve and appear. You can give it a go but be sure to use the first implementation method (the array) for a larger amount than 10.

  33. Ali Sattari November 17th, 2009 at 13:51

    • I had two problems implementing this plugin: 1. The odd behavior on slidesBase option, I passed slides as img elements and yet needed to set slidesBase option to an empty string so images url would be correct.

      1. I had a weird problem. The loop starts at second slide and never shows the last slide. You may look at example to confirm this. The second loop starts at first slide, but still doesn’t show the last. I have edited these lines to get it working:

      Line 58: “slide: 0,” to “slide: -1,” So it will start from first slide.

      Line 198: “if (this.current.slide == this.slides.length-1) this.current.slide = 0;” to “if (this.current.slide == this.slides.length) this.current.slide = 0;” So it will show the last style.

      I have also noticed that you haven’t fired onFirst and onLast events anywhere.

      Nice plugin though!

  34. Steffy November 19th, 2009 at 05:04

    • Thank you for your answer Oskar, actually I will use it to show case the inside of a book, and at the end we decided to use only 33 photos.. I have used the second method for SEO reason (using the title / captation) but if you recommand the other way I gonna go and try this one.. thank you again for the plugin

  35. Steffy November 19th, 2009 at 19:13

    • By the way, Do you know howis it possible to add a line break within the “title” attribute, and still validate? I want to separate a title/description for each slide thank you in advance

  36. Michel November 19th, 2009 at 21:49

    • Congratulations for your site and this marvelous script… I agree fully with ALI Sattari comment about faulty slide counting. To contribute to the future of Floom, I have develop a special plugin named xili-floom-slideshow to easily install “Floom” inside Wordpress. Plugin (beta) is here since less one hour : http://wordpress.org/extend/plugins/xili-floom-slideshow/ (and here http://dev.xiligroup.com/?p=1241)

      Please be patient for a more detailled doc…

      Many thanks again.

  37. Steffy November 21st, 2009 at 13:21

    • Oskar, I second Ali & Michel, to have the first and last slide display, I do have to duplicate them.. I have tried both implementation.. except that it works smoothy.. actually to wait the loading I have put an image inside the “polaroid” frame alike, to say that’s something to come thank you again got nice add on

  38. Michel November 29th, 2009 at 08:31

    • Dear commenters, I just now published a contribution post how to extend floom class … titled - JavaScript Class: modify or extend? - http://dev.xiligroup.com/?p=1357

      Enjoy it!

  39. Online Industry.de December 17th, 2009 at 15:11

    • Great Work! I think i use this for my own project!

  40. Liam Gladdy December 30th, 2009 at 01:17

    • Couple of notes to prevent the jump at the end:

      First, because it uses .morph to bring in each slice, you should change line 177 to read: “if (idx == this.options.amount-1) this.step.delay(500, this);” - This changes the end step to happen after the mootools’ element morph’s default execution time of 500ms, rather than the animate variable in floom’s options. This is probably a bug, i can’t see why you’d use this.options.animate for this value.

      Secondly, you need to make sure the container where you’re displaying the images can be evenly divided by the number of slices you set floom to use (24 by default) - otherwise you’ll end up with an unanimated number of pixels to the right, which will appear 500+this.options.animate ms after the last frame is animated.

  41. tbela99 January 19th, 2010 at 17:21

    • wow! amazing guy! great job :)

Leave a Reply

Fill-in all the forms

Categories

Recent Tweets

  •  

Current bookshelf