Categories:

Home / Free JavaScripts / Image Slideshows & Galleries / Here

Cut & Paste JK Responsive Youtube Video and Image Gallery

Credit: JavaScript Kit

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:

Totally responsive

Enlarged YouTube video player or image auto scales if necessary to always fit inside the user's screen and centered.

Rich HTML caption

Add an optional caption to the enlarged video or image, HTML supported!

Keyboard and swipe navigation

Left and right arrows to cycle through images, swipe on mobile devices to do the same. Esc key to dismiss gallery.

Single or group of Youtube videos or images

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.

Auto close gallery

Option to automatically close the gallery after the user has cycled through all the videos or images inside a group of them.

Scalable Icon fonts

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:

A pair of birds look on as the sun rises. A link
$('#gallery1').responsivegallery()

Single Youtube Video:

Pigeons - Cute animation cartoon
$('#gallery1b').responsivegallery()

Single Image with additional Youtube videos and images added:

A pair of birds look on as the sun rises. A link

$('#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

Cupido - love is blind 3d animation short film
With a water drop begins the ripples.
Destiny - Animation Short
Busking in the sun.
$('#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:

  1. The URL to the Youtube video itself. This can be in a variety of formats, such as:

    1. https://www.youtube.com/watch?v=Pe0jFDPHkzo
    2. https://youtu.be/Pe0jFDPHkzo
    3. https://www.youtube.com/v/Pe0jFDPHkzo
  2. 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:

    1. http://img.youtube.com/vi/Pe0jFDPHkzo/1.jpg (120 x 90)
    2. 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:
$("#gallery1").responsivegallery({
	media: [
	    ['largeimg2.jpg', 'caption 2'],
	    ['largeimg3.jpg', 'caption 3],
	    ['largeimg4.jpg', 'caption 4']
	]
})

Note that you can only define additional images/Youtube videos to show dynamically for a single thumbnail. For a group of thumbnails, the media[] option has no effect.

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.


JavaScript Tools:
Site Info


CopyRight (c) 2016 JavaScript Kit. NO PART may be reproduced without author's permission. Contact Info