In the spring of last year I released the first version of the NiO PhotoShelter RSS gallery widget. It reads the general RSS feed of a PhotoShelter archive or PhotoShelter gallery, and creates a gallery of image thumbnails with or without captions. If you are not familiar with the widget yet, please check out the widget’s information page.
The widget has been downloaded 600 times by now and I have seen hundreds of different live implementations. So I thought it was time to enhance the widget a bit.
Adding an animated opacity hover effect
As a first enhancement, I just released an add-on that enables an “opacity on hover” effect for thumbnails in a gallery created by the NiO PhotoShelter RSS widget. You can configure it to increase or decrease the opacity of a thumbnail on hovering it. The add-on is written in jQuery and can be installed on any domain server.
Let’s have a look at an example of the new “opacity on hover” effect:
I use the new hover effect on this website as well:
- Click recent work on my homepage.
- Visit my “What’s new” page and hover the thumbnails for the latest updates.
The example and my implementations all use the hover effect in a way that the opacity increases on hovering the thumbnails. It is also possible to do the opposite.
I will be releasing more add-ons for the NiO PhotoShelter RSS Gallery widget in the near future. In addition I am working on two new widgets that re-use bits and pieces of the NiO PhotoShelter RSS Gallery widget:
- A version of the widget that reads the RSS feeds of services like Flickr and Alamy.
- A slideshow version of the widget. This widget will present recent images in a non-flash based slideshow format that can also be viewed on mobile devices like the iPad.
If you have other suggestions, please let me know!
The animation add-on for the NiO PhotoShelter RSS Gallery Widget can be downloaded from our Download page:
If you like this add-on and decide to use it, please blog about it or provide a credit on your site with a link to my site (https://www.niophoto.com).