HTML Content, Simple Text Link

<a class="jackbox" 

    data-group="info" 
    data-title="JackBox Just Works" 
    data-width="640" 
    href="#learn-more"
    
>Learn More</a>

Image

<a class="jackbox" 

    data-group="images" 
    data-thumbnail="jackbox/img/thumbs/1a.jpg" 
    data-title="Image Title with <a href='http://www.google.com' target='_blank'>link</a>" 
    data-description="#description_1" 
    href="jackbox/img/photos/1.jpg"
    
><!-- end opening tag -->

    <img src="jackbox/img/thumbs/1.jpg" width="180" height="150" alt="responsive lightbox" />
    
</a>

Vimeo Video

<a class="jackbox" 

    data-group="vimeo" 
    data-title="Surrealist Dollhouse" 
    data-description="#description_1" 
    href="http://vimeo.com/17573879"
    
><!-- end opening tag -->
    
    <img src="jackbox/img/thumbs/8.jpg" width="180" height="150" alt="responsive lightbox" />

</a>

YouTube Video

<a class="jackbox" 

    data-group="youtube" 
    data-title="Se7en" 
    data-description="#description_1" 
    href="http://www.youtube.com/watch?v=-k2gsEI34CE"
    
><!-- end opening tag -->
    
    <img src="jackbox/img/thumbs/5.jpg" width="180" height="150" alt="responsive lightbox" />

</a>

HTML5 Video w/ Flash Backup

<a class="jackbox" 

    data-group="video" 
    data-thumbnail="jackbox/img/thumbs/7a.jpg" 
    data-title="HTML5 Video w/ Flash Backup" 
    data-description="#description_1" 
    data-flashHasPriority="false" 
    data-autoplay="true" 
    data-width="958" 
    data-height="538" 
    data-poster="jackbox/img/video_poster.jpg" 
    href="jackbox/video/1.mp4"
    
><!-- end opening tag -->

    <img src="jackbox/img/thumbs/7.jpg" width="180" height="150" alt="responsive lightbox" />
    
</a>

HTML5 Audio w/ Flash Backup

<a class="jackbox" 

    data-group="audio" 
    data-title="HTML5 Audio w/ Flash Backup" 
    data-description="#description_1" 
    data-width="500" 
    data-height="185" 
    data-autoplay="true" 
    data-audiotitle="<a href='http://audiojungle.net/item/one-fine-day/109769' target='_blank'>Symphony-of-Specters - One Fine Day...</a>" 
    href="jackbox/music/1.mp3"
    
><!-- end opening tag -->
    
    <img src="jackbox/img/thumbs/3.jpg" width="180" height="150" alt="responsive lightbox" />
    
</a>

Google Maps

<a class="jackbox" 

    data-group="html" 
    data-thumbnail="jackbox/img/thumbs/num3.jpg" 
    data-title="Google Maps" 
    data-description="#description_1" 
    href="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=brooklyn+pizza+534+North+4th+Avenue++Tucson,+AZ+85705&amp;aq=&amp;sll=32.228578,-110.965485&amp;sspn=0.008395,0.016512&amp;g=534+North+4th+Avenue++Tucson,+AZ+85705&amp;ie=UTF8&amp;hq=brooklyn+pizza&amp;hnear=534+N+4th+Ave,+Tucson,+Pima,+Arizona+85705&amp;t=m&amp;ll=32.233168,-110.971463&amp;spn=0.009801,0.020578&amp;z=16&amp;iwloc=A&amp;output=embed"
    
><!-- end opening tag -->

    <img src="jackbox/img/thumbs/4.jpg" width="180" height="150" alt="responsive lightbox" />
    
</a>

iFrame

<a class="jackbox" 

    data-thumbnail="jackbox/img/thumbs/num2.jpg" 
    data-group="html" 
    data-title="iFrame" 
    data-width="1100" 
    data-description="#description_1" 
    data-href="http://codecanyon.net/user/CodingJack"
    
><!-- end opening tag -->

    <img src="jackbox/img/thumbs/4.jpg" width="180" height="150" alt="responsive lightbox" />

</a>

Flash SWF

<a class="jackbox" 

    data-group="swf"  
    data-title="Flash SWF" 
    data-description="#description_1" 
    data-width="640" 
    data-height="360" 
    href="jackbox/swf/sample.swf"
    
><!-- end opening tag -->
    
    <img src="jackbox/img/thumbs/2.jpg" width="180" height="150" alt="responsive lightbox" />
    
</a>