jQuery Colorbox multiple inline contents

Tweet about this on TwitterShare on Facebook0Share on LinkedIn0Share on Google+0

Besides image gallery, there seems to be no way to switch multiple inline contents with jQuery Colorbox plugin.
Here, let me introduce an approach using Underscore.js template function.

[Colorbox]    Colorbox – a jQuery lightbox
[Underscore.js]    Underscore.js

Colorbox multiple inline contens with Underscore.js

Demo -Colorbox multi inline content with Underscore.js

HTML

Set the following elements.

  1. Button triggering the modal container. (“button.trig”)
  2. Modal container element (“div#modal-container > div#modal”)
  3. Template element (“script#modal-template1″ & “script#modal-template2″)
  4. Set JS files (jQuery, colorbox, underscore, and main js)

JS (run.js)

  1. Set event on trigger button opening the modal content.(openFirst)
  2. The modal is from “script#modal-template1″ handled by underscore.
  3. The first content has a button “NEXT” triggering the 2nd content. (openSecond)
  4. The second content has a button “BACK” triggering the 1st content. (openFirst)

CSS (SCSS)

Leave a Comment.