UNPKG

jquery-simple-carousel-gallery

Version:

A very simple image / video gallery with a carousel of thumbnails.

121 lines (114 loc) 5.01 kB
<!DOCTYPE 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">&lt;</a> <div class="media"> <div class="video"> <video controls="true"> <source type="video/mp4" src=""> </video> </div> </div> <a href="#" class="goToNext">&gt;</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>