Best 5 jQuery Script for Gallery

1,486 views

Published on

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,486
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Best 5 jQuery Script for Gallery

  1. 1. 1. Galleria2. Responsive Image Gallery3. Supersized4. S3 Slider5. jQuery Panel Gallery Best 5 jQuery Script for Gallery : >
  2. 2. 1. GalleriaGalleria is a JavaScript image gallery framework that makes the procedure easy forcreating beautiful image galleries for various web and hi-tech mobile devices. Apartfrom image galleries, it also works on video by integrated API like YouTube, Vimeo andDailymotion videos works.Free without restrictionsGalleria and the “classic” theme are open sources and released under the MIT licensewithout any restrictions.No programming skills requiredWith just simple copy/paste of a few lines of code, add some photos or videos andpop a fully featured gallery in your browser.Flickr, Picasa, YouTube and moreGrab galleries, sets and movies from renowned sources of Galleria gallery by just afew lines of code.
  3. 3. ResponsiveGalleria reacts to dynamic measures and prepared for responsive environments bythe media queries using simple options.iPhone, iPad & touch supportFor ultra-smooth image browsing on mobile and touch devices “Galleria” is perfectas it supports swipe movements and use hardware optimized animations.One core, multiple themesA great set of tools is available via Galleria to create tailored themes for your projector you can browse through our Premium themes and see if something fits as peryour desire.Download Link : http://galleria.io/static/galleria-1.2.9.zip
  4. 4. Check Out Premium Themes : AzurA theme Inspired by the french riviera.Buy Now $29 TwelveThe twelve theme demonstrates the full power of Galleria.Buy Now $29 FullscreenA great looking full screen gallery that covers the entire browser area.Buy Now $9 FolioThe perfect theme for photo portfolios, featuring thumbnail grids and full screenview.Buy Now $29 MinimlA minimal theme with dotted navigation and nifty details.Buy Now $29
  5. 5. Responsive Image Gallery with thumbnail carousel is an innovation ofTwitter’s “user gallery”. With a command to show an integration ofElastislide, the gallery acclimate the view-port width. With the perfectlydesigned view switch, the gallery will allow user to view with the thumbnailcarousel or without. Navigation with the keyboard will also accessible for user.To navigate the images by “wiping” on the iPhone and iPad, the jQueryTouchwipe Plugin will make it possible for quick response. One can easily findthe demo by clicking Flickr photostream here: Sherman Geronimo-Tan’sFlickr Photostream. The photos are licensed under the Creative CommonsAttribution 2.0 Generic (CC BY 2.0) License.
  6. 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="Somedescription" /> </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. 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.
  8. 8. Options :Autoplay RandomFit_always SlidesFit_landscape SlideshowFit_portrait Slide_intervalHorizontal_center Slide_linksImage_protect Start_slideKeyboard_nav Stop_loopMin_height Thumb_linksMin_width Thumbnail_navigationNew_window TransitionPause_hover Transition_speedPerformance Vertical_centerSee Demo: http://www.buildinternet.com/project/supersized/default.phpDownload Link: http://www.buildinternet.com/project/supersized/supersized2.zip
  9. 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. 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. 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. 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. 13. Then you need to initalize s3Slider and set the duration of how long will onepicture be shown on the page (value is in miliseconds).?123456$(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. 14. 5. jQuery Panel Gallery PluginTo the proper use of plugin one needs to have a copy of jQuery, jquery onGoogle, and the plugin. Place the files on your site and link to them. People need notto choose the particular effect as the plugin will automatically pick any of themrandomly. It’s not a obvious feature of the jQuery as people can also select thedesired transition effects for individual images, or set an option of an array of effectsto cycle by the given options. If any selection get done through array of options, thenplugin will apply each effect in the order you specification. Example: If people have10 images and array has three effects, the first image will get the first effect, thesecond image will get the second effect, the third image will get the third effect, andthe 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. 15. First, all of your images should be the same size and wrapped in a containing element (Irecommend a div) which must have an ID. Any images will work, however transparent imagesaren’t recommended. Finally, your container element should be positioned (e.g.relative, absolute, etc.). The container needs to be positioned otherwise the images within itwon’t end up in the right spot on your page.DownloadDownload version 1.1 hereDownload jquery.panelgallery.js (version 1.0)

×