jquery-simple-carousel-gallery
Version:
A very simple image / video gallery with a carousel of thumbnails.
121 lines (114 loc) • 5.01 kB
HTML
<html>
<head>
<title>jQuery Simple Carousel Gallery</title>
<link rel="stylesheet" href="demo.css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="../src/jquery.simple-carousel-gallery.js"></script>
</head>
<body>
<h1>Sample Gallery Page</h1>
<div id="gallery"></div>
<div id="SCGTemplate">
<h2>A Gallery</h2>
<div class="mediaContainer">
<a href="#" class="goToPrevious"><</a>
<div class="media">
<div class="video">
<video controls="true">
<source type="video/mp4" src="">
</video>
</div>
</div>
<a href="#" class="goToNext">></a>
</div>
<p class="caption"></p>
<ul class="carousel">
<li class="carouselItem">
</li>
</ul>
</div>
<script>
$(function() {
var items, opts;
items = [
{
thumb: 'https://placeholdit.imgix.net/~text?txtsize=12&txt=Item%201&w=100&h=100',
src: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Item%201&w=900&h=400',
type: 'image',
caption: 'This is sample 1.'
},
{
thumb: 'https://placeholdit.imgix.net/~text?txtsize=12&txt=MOVIE%20Big%20Buck%20Bunny&w=100&h=100',
src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
type: 'video',
caption: 'This is a sample movie.'
},
{
thumb: 'https://placeholdit.imgix.net/~text?txtsize=12&txt=Item%203&w=100&h=100',
src: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Item%203&w=900&h=400',
type: 'image',
caption: 'This is sample 3.'
},
{
thumb: 'https://placeholdit.imgix.net/~text?txtsize=12&txt=Item%204&w=100&h=100',
src: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Item%204&w=900&h=400',
type: 'image',
caption: 'This is sample 4.'
},
{
thumb: 'https://placeholdit.imgix.net/~text?txtsize=12&txt=Item%205&w=100&h=100',
src: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Item%205&w=900&h=400',
type: 'image',
caption: 'This is sample 5.'
},
{
thumb: 'https://placeholdit.imgix.net/~text?txtsize=12&txt=Item%206&w=100&h=100',
src: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Item%206&w=900&h=400',
type: 'image',
caption: 'This is sample 6.'
},
{
thumb: 'https://placeholdit.imgix.net/~text?txtsize=12&txt=Item%207&w=100&h=100',
src: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Item%207&w=900&h=400',
type: 'image',
caption: 'This is sample 7.'
},
{
thumb: 'https://placeholdit.imgix.net/~text?txtsize=12&txt=Item%208&w=100&h=100',
src: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Item%208&w=900&h=400',
type: 'image',
caption: 'This is sample 8.'
},
{
thumb: 'https://placeholdit.imgix.net/~text?txtsize=12&txt=Item%209&w=100&h=100',
src: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Item%209&w=900&h=400',
type: 'image',
caption: 'This is sample 9.'
},
{
thumb: 'https://placeholdit.imgix.net/~text?txtsize=12&txt=Item%2010&w=100&h=100',
src: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Item%2010&w=900&h=400',
type: 'image',
caption: 'This is sample 10.'
},
{
thumb: 'https://placeholdit.imgix.net/~text?txtsize=12&txt=Item%2011&w=100&h=100',
src: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Item%2011&w=900&h=400',
type: 'image',
caption: 'This is sample 11.'
},
{
thumb: 'https://placeholdit.imgix.net/~text?txtsize=12&txt=Item%2012&w=100&h=100',
src: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Item%2012&w=900&h=400',
type: 'image',
caption: 'This is sample 12.'
}
];
opts = {
};
$("#gallery").SimpleCarouselGallery(items, opts);
});
</script>
</body>
</html>