by markvreeland

Slides
15 slides

Best 5 jQuery Script for Gallery.pptx

Published Mar 13, 2013 in Business & Management
Direct Link :

Best 5 jQuery Script for Gallery.pptx... Read more

Best 5 jQuery Script for Gallery which can enhance your website look & feel.

Read less


Comments

comments powered by Disqus

Presentation Slides & Transcript

Presentation Slides & Transcript

Best 5 jQuery Script for Gallery : >
1. Galleria
2. Responsive Image Gallery
3. Supersized
4. S3 Slider
5. jQuery Panel Gallery

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.

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



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

2. Responsive Image Gallery
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.

Sample :

THE MARKUP :
 


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

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.
Continue….

Autoplay
Fit_always
Fit_landscape
Fit_portrait
Horizontal_center
Image_protect
Keyboard_nav
Min_height
Min_width
New_window
Pause_hover
Performance
Random
Slides
Slideshow
Slide_interval
Slide_links
Start_slide
Stop_loop
Thumb_links
Thumbnail_navigation
Transition
Transition_speed
Vertical_center
See Demo: http://www.buildinternet.com/project/supersized/default.php
Download Link: http://www.buildinternet.com/project/supersized/supersized2.zip

Options :

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>

HTML:
 


    

            

  •             
                Your text comes here
            

  •         

  •             
                Your text comes here
            

  •         

        


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 */
}

Continue

.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;
}
 
Continue

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

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.
Continue …...
Download Link: the latest version of the Panel Gallery is available here.

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)


Finish