Cut & Paste JK Responsive Youtube Video and Image Gallery
|
March 12th, 16: Updated to v2.0, which adds support for Youtube Videos!
JK Responsive Youtube Video and Image Gallery is a modern, lightbox style gallery that works perfectly on any screen size and device, big or small. Click on a Youtube video or image thumbnail to see an enlarged version centered on the screen with support for an optional, rich HTML caption beneath it. Below lists the main features of JK Responsive Gallery:
Enlarged YouTube video player or image auto scales if necessary to always fit inside the user's screen and centered.
Add an optional caption to the enlarged video or image, HTML supported!
Left and right arrows to cycle through images, swipe on mobile devices to do the same. Esc key to dismiss gallery.
Enlarge a single thumbnail or group multiple thumbnail Youtube videos or images on the page together to turn them into a gallery. Alternatively, dynamically add additional YouTube videos or images to a single thumbnail on the page using JavaScript.
Option to automatically close the gallery after the user has cycled through all the videos or images inside a group of them.
All UI elements of the gallery such as the navigation buttons, loading image etc are icon fonts (from Icomoon) for pixel perfect scaling and easy color change.
For videos, currently the only supported format is Youtube URLs. Let us know if you'd like to see other formats such as Vimeo added!
Demos
Single Image:
$('#gallery1').responsivegallery()
Single Youtube Video:
$('#gallery1b').responsivegallery()
Single Image with additional Youtube videos and images added:
$('#gallery2').responsivegallery({
media:[
["https://www.youtube.com/watch?v=fzrfrXhE-w4", "Sam, a shy young man, finds himself in a slow-motion world"],
["image3.jpg", "caption 3"],
["image4.jpg", "caption 4"]
] //<-- no comma after last setting
})
Group of Images and Youtube videos
$('#group1 > div.rthumbnail').responsivegallery()
Text links
$('#group2 a').responsivegallery({
autoclose: false
})
Download info
Download master.zip, or visit the the script's github page.
Installation
Step 1: Add the following code to the <HEAD> section of your page:
The above code references 3 external .js/.css files plus additional icon font files (all found inside jkresponsivegallery.zip):
That's it for installation, though read on for more details on setting up the script.
Setup Information
The first thing to do is to define the markup for your image thumbnails.
-Thumbnails with plain text captions (or no caption at all):
For thumbnails with only a plain text caption or no caption at all, simply define a text link or image/Youtube link. Here are a few examples:
<a class="thumblink" href="images/waterdrop.jpg" title="This is a plain text caption">Waterdrop</a>
<a class="thumblink" href="https://youtu.be/oIlIVFBBbNw">Youtube video</a>
<a class="thumblink" href="images/waterdrop.jpg"><img src="thumbnail.jpg" /></a>
<a class="thumblink" href="https://www.youtube.com/watch?v=Pe0jFDPHkzo"><img src="http://img.youtube.com/vi/Pe0jFDPHkzo/0.jpg" /></a>
The "href" attribute should point to the enlarged
image or Youtube Video. To display a plain text caption, make use of the link's "title"
attribute. The class name "thumblink" is an arbitrary one that
we'll use later to identify/group the thumbnails together when we call $(selector).responsivegallery()
on them.
-Thumbnails with rich HTML captions:
For thumbnails that will display a rich HTML caption,
wrap the link inside a DIV instead, and for the caption, encase it inside a
<div class="rcaption"> DIV, for example:
<div class="rthumbnail"> <a href="images/fisherman.jpg"> <img border="0" src="images/fisherman_thumb.jpg"></a> <div class="rcaption">Caption text <b>HTML</b> supported!</div> </div>
Here we give the outer DIV a CSS class of "rthumbnail",
which automatically hides the "rcaption" DIV inside it as defined
inside jkresponsivegallery.css.
Again, the inner link's "href" attribute sets the path to the
enlarged image.
For a Youtube video with rich HTML caption, the syntax is identical:
<div class="rthumbnail"> <a href="https://www.youtube.com/watch?v=Pe0jFDPHkzo"> <img border="0" src="http://img.youtube.com/vi/Pe0jFDPHkzo/0.jpg"></a> <div class="rcaption">Caption text <b>HTML</b> supported!</div> </div>
Youtube video URL and thumbnail format
When showing a Youtube video, you'll need two bits of information:
-
The URL to the Youtube video itself. This can be in a variety of formats, such as:
The URL to the thumbnail for the Youtube Video, if you wish to display a thumbnail instead of a text link to the video. The format for the corresponding Youtube thumbnail is in the format:
- http://img.youtube.com/vi/Pe0jFDPHkzo/1.jpg (120 x 90)
- http://img.youtube.com/vi/Pe0jFDPHkzo/0.jpg (480 x 360)
The initialization code
Inside the HEAD section of your page, call $(selector).responsivegallery()
after the document DOM has loaded to target either a single thumbnail above, or
a group of them to finalize the gallery effect. For a single thumbnail, give it
an ID attribute to uniquely identify it, then call the gallery method on it:
<script>
jQuery(function($){ // on DOM load
$("#gallery1").responsivegallery()
})
</script>
<div id="gallery1" class="rthumbnail">
<a href="images/fisherman.jpg">
<img border="0" src="images/fisherman_thumb.jpg"></a>
<div class="rcaption">Caption text <b>HTML</b> supported!</div>
</div>
For a group of thumbnails, give them a common CSS class to group them all together, with optionally a parent DIV wrapped around them to filter them from other thumbails on the page with the same CSS class:
<script>
jQuery(function($){ // on DOM load
$("#group1 > div.rthumbnail").responsivegallery()
})
</script>
<div id="group1">
<div class="rthumbnail">
<a href="images/fisherman.jpg">
<img border="0" src="images/fisherman_thumb.jpg"></a>
<div class="rcaption">Caption text <b>HTML</b> supported!</div>
</div>
<div class="rthumbnail">
<a href="images/baby.jpg">
<img border="0" src="images/baby_thumb.jpg"></a>
<div class="rcaption">Caption text <b>HTML</b> supported!</div>
</div>
</div>
The method $(selector).responsivegallery()
supports the following options when called:
| option | Description |
|---|---|
| media: [] | A media array to show additional Youtube Videos or images dynamically. The syntax is:Note that you can only define additional images/Youtube videos to show
dynamically for a
single thumbnail. For a group of thumbnails, the |
| autoclose defaults to true |
For a group of thumbnails (or single thumbnail with additional images/Youtube videos defined dynamically), a Boolean option on whether to automatically dismiss the gallery once the user has viewed all media in the group. |
| fxduration defaults to 150 |
Sets the duration of the fade in effect, in milliseconds. |
Separate each option with a comma if multiple options are defined, except the very last one:
$("#gallery1").responsivegallery({
media: [
['largeimg2.jpg', 'caption 2'],
['largeimg3.jpg', 'caption 3],
['largeimg4.jpg', 'caption 4']
],
autoclose: false // <- no comma after last option
})Icomoon fonts
JK Responsive Gallery uses
icomoon fonts for
all of the controls such as the "loading" image, left/right buttons etc. This
makes them scalable and colorable just by changing the CSS "font-size"
and "color" property of the respective SPAN elements that contain
them. Observe the styles for the SPAN elements inside
jkresponsivegallery.css to
customize them.