MagicWall is a jQuery plugin for creating an image grid that cycles through a set of images using attractive animations at a specific time interval. You can use this plugin to create a decorative element of your website, display your work or simply use it as a nice animated background.
MagicWall plugin converts a list of images into a grid with defined number of rows and columns. The remaining images will appear with different animations and delays.
You can also configure the plugin in order to define how the grid should be laid out for different screen widths.
Updates
PLEASE NOTE
Update (v 2.0.0) is not backward compatible, you might need to alter your current configuration (Please read below).
Update ver 2.0.4 (28/10/2014)
Fixed a minor bug in the ‘switchItem’ API method.
Update ver 2.0.3 (07/10/2014)
Fixed a minor bug in the animation plugin.
Update ver 2.0.1 (19/08/2014)
Fixed a minor bug in the animation plugin.
Update ver 2.0.0 (22/06/2014)
A few bugs were fixed.
Added support for an ajax source.
Added social network integration. (Flickr, 500px and Instagram)
Changed behavior of breakpoints option. The option is still set the same old way, but now you are able to provide a complete set of options for each breakpoint instead of just countX and countY.
Added ability to select whether the images should be loaded from the cache (if available) or not.
Added a new option autoUpdateOnResize to automatically update the grid on window resize.
Added two new methods, for appending/removing items to/from the grid.
Added more options, namely:
service
jsonUrl
appKey
userID
photoSetID
photoCount
photoSize
loadingMode
paused
useCache
preloadBeforeSwitch
autoUpdateOnResize
Changed names of some options, namely:
countX is now columnsCount
countY is now rowsCount
minCountX is now minColumnsCount
minCountY is now minRowsCount
maxCountX is now maxColumnsCount
maxCountY is now maxRowsCount
onHoverExclude is now pauseOnHover
animationsExcluded is now excludedAnimations
sizing is now thumbSizing
Changed default values of some options, namely:
animations is now *
animationsExcluded is now ””
delay is now 1000
duration is now 600
All easings are now false by default and they fallback to easing which is now easeInOutCubic
Features
Responsive grid
Social networks integration
Hardware Accelerated
Fullwidth layout
Fullscreen layout
Highly customizable
22 Animations
Sass files included
Small file size
List of options
animations
excludedAnimations
delay
maxItemWidth
maxItemHeight
breakpoints
columnsCount
rowsCount
minColumnsCount
minRowsCount
maxColumnsCount
maxRowsCount
pauseOnHover
thumbSizing
fixedClass
perspective
duration
easing
rollInXDuration
rollInXEasing
rollInYDuration
rollInYEasing
rollOutXDuration
rollOutXEasing
rollOutYDuration
rollOutYEasing
flipXDuration
flipXEasing
flipYDuration
flipYEasing
slideXDuration
slideXEasing
slideYDuration
slideYEasing
slideRowDuration
slideRowEasing
slideColumnDuration
slideColumnEasing
fadeDuration
fadeEasing