2. 1. Galleria
Galleria is a JavaScript image gallery framework that makes the procedure easy for
creating beautiful image galleries for various web and hi-tech mobile devices. Apart
from image galleries, it also works on video by integrated API like YouTube, Vimeo and
Dailymotion videos works.
Free without restrictions
Galleria and the “classic” theme are open sources and released under the MIT license
without any restrictions.
No programming skills required
With just simple copy/paste of a few lines of code, add some photos or videos and
pop a fully featured gallery in your browser.
Flickr, Picasa, YouTube and more
Grab galleries, sets and movies from renowned sources of Galleria gallery by just a
few lines of code.
3. Responsive
Galleria reacts to dynamic measures and prepared for responsive environments by
the media queries using simple options.
iPhone, iPad & touch support
For ultra-smooth image browsing on mobile and touch devices “Galleria” is perfect
as it supports swipe movements and use hardware optimized animations.
One core, multiple themes
A great set of tools is available via Galleria to create tailored themes for your project
or you can browse through our Premium themes and see if something fits as per
your desire.
Download Link : http://galleria.io/static/galleria-1.2.9.zip
4. Check Out Premium Themes :
Azur
A theme Inspired by the french riviera.
Buy Now $29
Twelve
The twelve theme demonstrates the full power of Galleria.
Buy Now $29
Fullscreen
A great looking full screen gallery that covers the entire browser area.
Buy Now $9
Folio
The perfect theme for photo portfolios, featuring thumbnail grids and full screen
view.
Buy Now $29
Miniml
A minimal theme with dotted navigation and nifty details.
Buy Now $29
5. Responsive Image Gallery with thumbnail carousel is an innovation of
Twitter’s “user gallery”. With a command to show an integration of
Elastislide, the gallery acclimate the view-port width. With the perfectly
designed view switch, the gallery will allow user to view with the thumbnail
carousel or without. Navigation with the keyboard will also accessible for user.
To navigate the images by “wiping” on the iPhone and iPad, the jQuery
Touchwipe Plugin will make it possible for quick response. One can easily find
the demo by clicking Flickr photostream here: Sherman Geronimo-Tan’s
Flickr Photostream. The photos are licensed under the Creative Commons
Attribution 2.0 Generic (CC BY 2.0) License.
6. Sample :
THE MARKUP :
<div id="rg-gallery" class="rg-gallery">
<div class="rg-thumbs">
<!-- Elastislide Carousel Thumbnail Viewer -->
<div class="es-carousel-wrapper">
<div class="es-nav">
<span class="es-nav-prev">Previous</span>
<span class="es-nav-next">Next</span>
</div>
<div class="es-carousel">
<ul>
<li>
<a href="#">
<img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="Some
description" />
</a>
</li>
<li>...</li>
</ul>
</div>
</div>
<!-- End Elastislide Carousel Thumbnail Viewer -->
</div><!-- rg-thumbs -->
</div><!-- rg-gallery -->
Go to Link for more info: http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/
For demo: http://tympanus.net/Tutorials/ResponsiveImageGallery/
Download Link: http://tympanus.net/Tutorials/ResponsiveImageGallery/ResponsiveImageGallery.zip?84cd58
7. 3. Supersized
Supersized is a fullscreen slidehow jQuery
plugin, which quickly support image preloading
with image cycling and transitioning effects.
Download the latest version of Supersized as it
comprises various examples to serve as foundation
for your projects and it is quite easy as well.
9. 4. S3 Slider : JQuery Image Gallery
S3 Slider is a jQuery plugin with nice effects and self image changing feature in it.
It allows user to enjoy the self sliding and self changing images.
HOW TO USE:
It is very easy. First get the jQuery library then include the s3Slider javascript in
the head of the page(s) where you want to use s3Slider.
jQuery can be download from jQuery`s homepage.
< script src="js/jquery.js" type="text/javascript">< /script>
< script src="js/s3Slider.js" type="text/javascript">< /script>
10. HTML:
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="#">
<span>Your text comes here</span>
</li>
<li class="s3sliderImage">
<img src="#">
<span>Your text comes here</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>
11. CSS:
#s3slider {
width: 400px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}
#s3sliderContent {
width: 400px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}
.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}
12. .s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 374px;
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
top: 0; /*
if you put top: 0; -> the box with text will be shown
at the top of the image
if you put bottom: 0; -> the box with text will be shown
at the bottom of the image
*/
}
.clear {
clear: both;
}
13. Then you need to initalize s3Slider and set the duration of how long will one
picture be shown on the page (value is in miliseconds).
?
1
2
3
4
5
6
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
Take a look at the live example.
Download: http://s3slider-
original.googlecode.com/svn/trunk/s3SliderPacked.js
14. 5. jQuery Panel Gallery Plugin
To the proper use of plugin one needs to have a copy of jQuery, jquery on
Google, and the plugin. Place the files on your site and link to them. People need not
to choose the particular effect as the plugin will automatically pick any of them
randomly. It’s not a obvious feature of the jQuery as people can also select the
desired transition effects for individual images, or set an option of an array of effects
to cycle by the given options. If any selection get done through array of options, then
plugin will apply each effect in the order you specification. Example: If people have
10 images and array has three effects, the first image will get the first effect, the
second image will get the second effect, the third image will get the third effect, and
the fourth image will then get the first transition effect, and so on.
Download Link: the latest version of the Panel Gallery is available here.
15. First, all of your images should be the same size and wrapped in a containing element (I
recommend a div) which must have an ID. Any images will work, however transparent images
aren’t recommended. Finally, your container element should be positioned (e.g.
relative, absolute, etc.). The container needs to be positioned otherwise the images within it
won’t end up in the right spot on your page.
Download
Download version 1.1 here
Download jquery.panelgallery.js (version 1.0)
