mentor

a responsive mobile-friendly lightbox jquery plugin.

BUY NOW $10

01. Single Images

Single unconnected images. Choose from fit / fill / fitmax / fillmax image scale modes. The fitmax/fillmax options are the same as the fit / fill options excpet that upscaling of the images is permitted.

project
Image Fit
project
Image Fitmax
project
Image Fill
project
Image Fillmax

The Markup


  • Super Simple Setup
  • Fit / Fill Scaling
  • Mobile Optimized
<!-- Single Image -->
<a
  data-target="flare"
  href="large_image.jpg"
  data-flare-scale="fit"
  > 
  <img src="small_image.jpg" alt="small image" />
</a>

02. Videos

Flare allows fullscreen playback of the 4 video types shown opposite. For online videos the cover image is automatically fetched, but local video this needs to be specified. Mobile & tablet video playback is also supported.

project
YouTube Video
project
Vimeo Video
project
Vid.ly Video
project
Local Video

Featuring


  • Fullscreen Video
  • Auto Cover Image
  • Mobile Optimized
  • Local Video Support
<!-- YouTube -->
<a data-target="flare" href="http://www.youtube.com/watch?v=AFA-rOls8YA">Youtube</a>

<!-- Vimeo -->
<a data-target="flare" href="http://vimeo.com/39251390">Vimeo</a>

<!-- Vid.ly -->
<a data-target="flare" href="http://vid.ly/5u4h3e">Vid.ly</a>
				
<!-- Local Video -->
<a 
  data-target="flare" 
  data-flare-videoposter="video/poster.jpg" 
  data-flare-videoformats="webm,ogv" 
  href="video/video.mp4"
  >
  Local Video</a>

03. Gallery Type A

Gallery Type A contains a mix of images and videos with a mix of scale modes. Image navigation features smooth hardware accellerated animated CSS3 transitions. The gallery supports touch gestures for mobile and teblet devices and thumbs are optional.

project
Image Fit & Vimeo Vid
project
Image Fillmax
project
Image Fit
project
Image Fillmax

Featuring


  • Animated Transitions
  • Fit / Fill Scaling
  • Optional Thumbs
  • Touch Enabled
  • Keyboard Navigation
  • Mouse Wheel Nav.
  • Hardware Accelleration
<!-- Gallery With Thumbanils -->

<a
  data-target="flare"
  data-flare-gallery="gallery1"
  data-flare-thumb="thumb_01.jpg"
  href="large_image_01.jpg">
  Image 1
</a>

<a
  data-target="flare"
  data-flare-gallery="gallery1"
  data-flare-thumb="thumb_02.jpg"
  href="large_image_02.jpg">
  Image 2
</a>

<a
  data-target="flare"
  data-flare-gallery="gallery1"
  data-flare-thumb="thumb_03.jpg"
  href="large_image_03.jpg">
  Image 3
</a>

04. Gallery Type B

Gallery type B features a black & white zoom transition effect. Again media can be a mix of images & videos, plus a mix of image scale modes. Thumbs are also optional and as above, full mobile and tablet touch navigation is supported.

project
Image Fillmax
project
Image Fillmax
project
Image Fillmax & Vimeo Vid
project
Image Fillmax

Featuring


  • Zoom Transitions
  • Fit/Fill Scaling
  • Optional Thumbs
  • Touch Enabled
  • Keyboard Navigation
  • Mouse Wheel Nav.
  • Hardware Accelleration
<!-- Gallery With Shutter Transition Effect -->
<a
  data-target="flare"
  data-flare-plugin="shutter"
  data-flare-gallery="newGalleryName"
  data-flare-scale="fillmax"
  data-flare-thumb="img/content/small/01.jpg"
  data-flare-bw="img/content/big/01bw.jpg"
  href="img/content/big/01.jpg">
  Fullscreen Shutter Gallery With Thumbs - Image 1
</a>
	
<a
  data-target="flare"
  data-flare-plugin="shutter"
  data-flare-gallery="newGalleryName"
  data-flare-scale="fillmax"
  data-flare-thumb="img/content/small/02.jpg"
  data-flare-bw="img/content/big/02bw.jpg"
  href="img/content/big/02.jpg">
  Fullscreen Shutter Gallery With Thumbs - Image 2
</a>