MagicWall - Responsive Image Grid



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 This update (v 2.0.0) is not backward compatible, you might need to alter your current configuration (Please read below).
  • Update ver 2.0.0 (22/06/2014)
    1. A few bugs were fixed.
    2. Added support for an ajax source.
    3. Added social network integration. (Flickr, 500px and Instagram)
    4. 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.
    5. Added ability to select whether the images should be loaded from the cache (if available) or not.
    6. Added a new option autoUpdateOnResize to automatically update the grid on window resize.
    7. Added two new methods, for appending/removing items to/from the grid.
    8. Added more options, namely:
    9. service
    10. jsonUrl
    11. appKey
    12. userID
    13. photoSetID
    14. photoCount
    15. photoSize
    16. loadingMode
    17. paused
    18. useCache
    19. preloadBeforeSwitch
    20. autoUpdateOnResize
    21. Changed names of some options, namely:
    22. countX is now columnsCount
    23. countY is now rowsCount
    24. minCountX is now minColumnsCount
    25. minCountY is now minRowsCount
    26. maxCountX is now maxColumnsCount
    27. maxCountY is now maxRowsCount
    28. onHoverExclude is now pauseOnHover
    29. animationsExcluded is now excludedAnimations
    30. sizing is now thumbSizing
    31. Changed default values of some options, namely:
    32. animations is now *
    33. animationsExcluded is now ””
    34. delay is now 1000
    35. duration is now 600
    36. 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