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
{inAds}
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
| Compatible Browsers | IE9, IE10, IE11, Firefox, Safari, Opera, Chrome |
| Software Version | jQuery |
| Demo URL | |
| High Resolution | Yes |
| Files Included | JavaScript JS, HTML, CSS, Layered PNG |
| Video Preview Resolution |