Isotope Slider

Component ID

2570795

Component name

Isotope Slider

Component type

module

Maintenance status

Development status

Component security advisory coverage

not-covered

Component created

Component changed

Component body

This module allows you to create Views Slideshow's slideshow contains of Isotope-placed nodes. This module contains of:

  1. Isotope Slider Slide - node for slides in slideshow.
  2. Isotope Slider Puzzle - node tied to Slide via entityreference. Each Puzzle has width and height fields to let user set the size of certain puzzle on grid.
  3. In views Slideshow format settings (if chosen views_slideshow extended using this module's API) "Use Isotope Slider" option appears. If checked you can set the slides grid size. This view will display Isotope Slider Slides display with Puzzles attached to it. We use packery mode for Isotope to place puzzles on slide grid.

How to start:

  1. Create few Puzzles of different sizes (e.g. 1x1, 1x2, 2x2).
  2. Create few Slides and tie some Puzzles to them.
  3. Create View with views_slideshow format. Select desired slideshow (e.g. cycle). Check "Use Isotope Slider" (to use cycle be sure that module isotope_slider_cycle is enabled).
  4. Select desired grid width and height (e.g. 7x4).
  5. Visit your View. Now you can add new puzzles to slides or reorder them to better fit selected (7x4) grid. Packery strategy used for placing puzzles always places puzzles in the top-left corner if possible so it is easy to predict where puzzles be placed.

OR you can use Isotope Slider Cycle Example module where everything is done. All you need then is just tie few Puzzles to each Slide (2 slides available).