Dialog Start tour

Media

Show you media files in a easy way, included a lightbox with custom made styles.

Basic

Easy way to show your media files.

How to use

How to use HTML elements.

Markup
<ul class="media-basic">
    <li>
        <div>
            <img src="images/media/img1-thumb.jpg" alt=""/>
            <div> 
                <a href="images/media/img1.jpg" class="button-icon pirobox_gall" media="gallery" title="Some title goes here">
                    <span class="expand-10"></span>
                </a>                                                        
                <a href="javascript:void(0);" class="button-icon">
                    <span class="pencil-10"></span>
                </a>
                <a href="javascript:void(0);" class="button-icon delete">
                    <span class="trashcan-10 plix-10"></span>
                </a>                                                                                          
            </div>
            <!-- Image info -->
            <span>
                <b>Adipiscing elit</b>
                <br/>
                800 x 800
                <br/>
                98.2kb
                <br/>
                10/12/2011
            </span>                                                        
        </div>    
    </li>
    ...
    ...
    ...
</ul>

Minimal

Minimal media, only images with a lightbox, nothing more.

How to use

How to use HTML elements.

Markup
<div class="media-minimal">
    <a href="images/uploads/img1.jpg" class="group3">   
        <img src="images/uploads/img1-thumb.jpg" alt=""/>
    </a>
    ...
    ...
    ...
</div>

Usage classes

Defined classes related to a piece of code or plugin.

Available class Element Desctription Since
media-basic ul Basic media class. 1.0
media-minimal div Minimal media class. 1.0
button-icon a Pixel button class. More button can be found here. 1.0
pirobox_gall a Lightbox class, this element must also have the rel attribute "gallery". 1.0
expand-10, pencil-10, trashcan-10 span Pixel icons. More icons can be found here. 1.0
delete a Class used for the jQuery part that deletes the image. 1.0

eGallery

This gallery gives you a good overview of your files, it also allows you to filter(in a easy way) items and delete them with dragg and drop.

Basic

Easy way to show your media files.

How to use

How to use HTML elements.

Markup
<div class="e-gallery" id="e-gallery">
    <header>
    	<!-- Filters -->
        <ul class="e-gallery-filter">
            <li><a href="#all" class="active">All</a></li>
            <li><a href="#2010">2010</a></li>
            <li><a href="#2011">2011</a></li>
            <li><a href="#2012">2012</a></li>
        </ul>                                     
    </header>
	<!-- Trash bin -->
    <div class="e-gallery-trashbin"></div>
	<!-- Image info -->
    <ul>
        <li data-gallery-filter="2011">
            <h3>Gallery image 1</h3>
            <div>
                <img src="images/media/img1-thumb.jpg" alt="" />
            </div>
            <a href="images/media/img1.jpg" class="button-icon btn-lightbox pirobox_gall" media="gallery" title="Some title goes here">
                <span class="magnifyglass-10 plix-10"></span>
            </a>
            <a href="javascript:void(0);" class="button-icon btn-delete">
                <span class="trashcan-10 plix-10"></span>
            </a>
        </li>
    	...
    	...
    	...
    </ul>
</div>

Usage Data Atributes (dataset)

Data atrributes are used by some of our custom plugins to set/get data.

HTML5 data attributes Element Example Desctription Since
data-gallery-filter li 2010 These are used by the filter to filter the gallery. In order to get this working you must put this value in the filter buttons href attribute(see demo how to). 1.0

Usage classes

Defined classes related to a piece of code or plugin.

Available class Element Desctription Since
e-gallery div Main gallery class. 1.0
e-gallery-filter ul Gallery filter class. 1.0
e-gallery-trashbin div Trash bin class. 1.0
button-icon a Pixel button class. More button can be found here. 1.0
pirobox_gall a Lightbox class, this element must also have the rel attribute "gallery". 1.0
magnifyglass-10, trashcan-10 span Pixel icons. More icons can be found here. 1.0
plix-10 Custom icon size class. 1.0

Usage plugin

How to use our custom made jQuery plugins.

Markup
$('#galleryidgoeshere').eGallery({
    draggable: true,
    clearTrash: true,
    opacityFilter: 0.3,
    activeClass: 'active',
    labelButton: 'Empty',
    labelTrash: 'Dragg to delete'	
});

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Type Default Desctription Since
draggable boolean true Allow a user to dragg an image to the trash bin. 1.0
clearTrash boolean true Allow a user to empty the trash bin(all items in the trash bin can be reverted). 1.0
opacityFilter number(float) 0.3 Opacity of the filtered items. 1.0
activeClass string active Active indicator class for the filter buttons. 1.0
labelTrash string Dragg to delete Helper text thats located in the trash bin. 1.0

Globally And Per-Call Overridable Options

This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: $.fn.pluginName.key = 'value';

Third-party plugins

Third-party plugins are not documented here because they have there own documentation.

Colorbox

Powerfull jQuery lightbox with extra styles.

This is a third party plugin, for information about how to use this plugin and examples please visit this site.