ClassyBox
Boxes? Yummy!

Introduction

ClassyBox is a jQuery plugin written by Marius Stanciu - Sergiu, a plugin that is a complex jQuery LightBox alternative with support for the most popular video services, enabling you to embed a media gallery on your site.

  • Embeds Photo Galleries.
  • Support for video.
  • Responsive layout.
  • Social Media buttons - Facebook, Twitter and Google+ - redirect link to ClassyBox window.
  • Button to set original size.
  • Possibility to add preloader for photo galleries.
  • Possibility to add an image to player.
  • AJAX support.
  • Possibility to show adds on top of the content.
  • Keyboard support.
  • Easy to change the appearance via CSS.
  • Support for YouTube, VIMEO, DailyMotion, 5min, MetaCafe, Ustream, Hell TV, VEVO and MySpace.

Download it

License

This jQuery plugin is distributed under the MIT license. Enjoy!

Demo

This is a longer description This is a longer description This is a longer description This is a longer description This is a longer description This is a longer description

Youtube

Other

Iframe Ajax DailyMotion 5min Vimeo Metacafe Ustream Hell TV VEVO MySpace

Setup

First you need to include the jQuery library, since ClassyBox is a plugin. You can download it from the jQuery website or link it directly from the Google CDN.

Secondly, you need to include the jQuery ClassyBox javascript, the css file and the required JWPlayer dependencies into your page. You can do it by adding the code below to your page.

Next, you implement the structure on which you want to trigger the classybox.


    This is a longer description

As the last step, you trigger the ClassyBox() function on the element you just created. In this case, we trigger it on the element with the class lightbox. We can also use the old LightBox-compatible syntax, so you don't need to alter your website code.

$('.lightbox').ClassyBox({
    width: 900
});

$('a[rel^=lightbox]'.ClassyBox({
    width: 900
});

Options

  • Parameters

  • height - height of the classybox window in pixels, default is 650
  • width - width of the classybox window in pixels, default is 450
  • iframe - pull the contents via an iframe, can be true or false, default is false
  • inline - pull the contents inline from the DOM, can be true or false, default is false
  • ajax - pull the contents via an AJAX request, can be true or false, default is false
  • social - should the plugin display social media links, can be true or false, default is true