building responsive image carousel

if you are planning to build a product carousel like the one featured on our loomdeflorence seat showcase, stick to jquery. Jquery has several plugins that build image carousel, and among them  some are responsive, which means that they will behave not too badly on a touch screen device like smartphones

WordPress plugin : ken burns full screen HTML5

We like the HTML 5 css animations, and the codrops tutorial give a first insight into a bright future for webmasters, via  a technology that involves  almost only css coding / harsh coding though. Anyhow I provide here a plugin for wordpress that will perform two tasks

  • shortcode [wbKenBurnsFullScreen] : displays post images as full screen background with ken burns effect
  • shortcode [wbKenBurnsFullScreenRandom] : displays images selected as 'random' and creates the full screen background effect, taking image parent  post as title and link

For the moment, it is the random code that works best as it automatically selects 4 images from media library, which is the best count of images for the effect I provide, directly inspired from the codrops tutorial.

Technically the plugin also provides additional field for images (screenshot below from erwan-foto.com)

DOWNLOAD : [download id="10"]

 

Nice unproductive experience : test multiple gallery scripts at once

silverstripegallerylightboxWe are quite proud here that our months old specific jquery gallery script for silverstripe -the best PHP opensource CMS  as of today, just out with a new release- is still, in my opinion, the best we could deliver to customers. In the meanwhile a troup of well intentioned contributors posted their own implementation of gallery for silverstripe cms : one of them is Aaron Carlino who has worked on upload scripts  that are very interesting for the customer experience. On Carl's gallery script, the image upload, ordering and labeling are all administered from the web site front end, which is nice. But also the gallery script he provides comes with 7 variations of the famous lightbox : in the admin you can  just choose between lightbox, shadowbox, thickbox, nyromodal, prettyphoto and fancybox, and once saved and/or published online; the front end will load the chosen lightbox variation. Interesting to try, not very useful for a customer who doesn't care which script is being used once it's properly configured.

Jquery popeye : galleries, differently

The popularity of javascript lightboxes has spread over the internet and no serious webmaster could think of displaying images without a specific thumbnailer and / or a dynamic slider of popup. The author of jQuery.popeye had  seen enough lightboxes and decided to implement his own box that features the advantage of being integrated like an image, with comments written below and navigation buttons.

Ken Burns effect : 3 solutions for smooth image transition

Remember MonoSlideShow ? It's worth its price but is being challenged by 2 javascript alternatives. Mootols and Jquery respectively handles nice image transitions with Ken Burns effect (Zoom-Translation combined movement) ,  via their SlideShow Class (Mootols) and CrossSlide plugin (Jquery). While the latter seems lighter, it offers the nice programmatic syntax to define exactly the level of zoom and time of transition for each image. The former has more options, such as a controller that mimics Monoslideshow's own mimic. The fact that these two alternative to a flash commercial applet might decide you to make a smart choice between them ?

Jquery picasa album scroller

Is it necessary to build an alternative picasa viewer when picasa itself provides nice flash gallery viewers ? for webmasters it turns out that sometimes it can be necessary to hide picasa details, and thanks to picasa itself providing various remote server access, you can use your albums within any kind of rss or json enabled application. We provide here an example of a JSON - jquery powered slideshow that takes input from any picasa album. The advantage of using picasa over hosted or specific applications such as famous menalto's gallery of coppermine is that picasa does resizing jobs for you, and offers up to 1 GB of free online image storage which largely enough for any small website presentation.

Read more

Monoslideshow : versatile and efficient

Monoslide show is a great gallery / slideshow flash applet that takes images list from user edited XML configuration file. One of its great features, apart from the incredible flexibility it allows, is the quality of the transition effects, such as Random Ken Burns effect that will do the trick for most professionnal movie like silide shows ! One drawback is that it lacks a user friendly admin module, every configuration has to be edited via the XML file. Just that is powerful enough though, and worth its price.

http://www.monoslideshow.com/

UvumiTools Gallery : light HTML enhancements

Working with HTML and Javascript is always interesting in terms of Search engine optimisation. What's nice about the Uvumi Tools  Gallery, distributed on MIT license, is not what you would notice at first sight when trying out this little mootools script. It actually starts off with a table like layout of thumbnails, which turns out to a vertical scroll bar after the first click on any image. This is where the fun comes in : the vertical scroll is driven by the mouse wheel and gives a nice feeling out of this light javascript / HTML combination. But don't be fooled  : its main advantage (being light) is also its main drawback ... won't generate thumbnails unless you work at a PHP -or anything server side language- integration. If you have a few minutes to spare, dare to take a look at Uvumi's textarea : integrates a progress bar that displays the ratio of words typed / allowed via a visual indicator of how close you are  to the maximum input size, also automatically grows and shrinks the textarea height to accommodate larger text submissions. More  @ http://tools.uvumi.com/gallery.html