The Responsive Slideshow Photograph Gallery has a fluid / versatile / responsive structure. Mainly the grid is added right into a html web page right into a div of your chosing and it’s adapting based mostly of that div’s width, the grid peak is modified based mostly on the variety of thumbnails and if different parts are beneath the grid div they are going to be pushed down routinely (doc move). Within the examples supplied you possibly can see a couple of methods by which you would possibly use this grid, after all that different configurations are doable (please word that the code of this examples is supplied within the obtain information).
The Responsive Slideshow Photograph Gallery is utilizing the GPU ( acceleration) utilizing HTML5 requirements. The rendering velocity and efficiency is impeccable on desktop computer systems and most significantly on cellular gadgets, the way in which it really works it should attempt to use CSS3 and if this isn’t obtainable it should down fall to CSS2 or CSS1 for older browsers like IE7 and IE8.
Nice efficiency on cellular gadgets, you possibly can see within the video demo that it runs similar to a local app!, it was coded and optimized for cellular gadgets and it’s 100% cellular appropriate and naturally it should run simply as nice on desktop computer systems together with on older browsers like IE7 and IE8. Now we have examined it on IPAD3(ios) and on a SAMSUNG GALAXY S3(android) and it runs nice on each gadgets, beneath are the hyperlinks to view this demos.
Watch demo operating on Samsung Galaxy S3 (android) or Watch demo operating on IPAD (IOS).
GRID MAIN FEATURES
Your complete shade theme may be modified.
Customizable thumbnails dimension and geometry: this function permits you to change the dimensions of the thumbnails and the area between thumbnails.
Customizable thumbnails border and background: every thumbnail can have a border and a background, the thumbnail’s background shade, the border’s dimension and the border’s shade are customizable.
Thumbnail’s description: every thumb can have a brief description with a clear background beneath it and this description is seen when the mouse is over a thumbnail, the textual content may be formatted with CSS, the background shade and opacity additionally may be modified (optionally available).
“Load extra thumbnails function”: that is an superior function which improves the general efficiency and velocity of loading as a result of on this approach not all of the thumbnails are loaded and displayed without delay. For instance if in case you have a complete of 120 thumbnails you possibly can present them in units of 50 thumbnails, and so initially within the grid the primary set of 50 thumbnails are loaded and displayed, and when the “load extra thumbnails” button is pressed the subsequent set of 50 thumbnails are loaded and displayed, and at last when the “load extra thumbnails” button is pressed once more the 20 remaining thumbnails are confirmed. The variety of thumbnails to load per set is customizable, it doesn’t need to be 50 it may be any quantity that you simply take into account. This function is optionally available, whether it is disabled all thumbnails are loaded and displayed.
Customized press thumbnail motion: when a thumbnail is pressed you possibly can select both to show an authentic media lightbox which we’ve coded, or to open a brand new webpage, the url and goal of this webpage may be specified. The lightbox can show photos, or can show movies loaded from YouTube or Vimeo.
LIGHTBOX MAIN FEATURES
Versatile / Fluid structure: the lighbox will all the time fill the obtainable browser viewport.
Your complete shade theme may be modified.
Vimeo and YouTube help: all it’s important to do is to incorporate the hyperlink from YouTube or Vimeo video that you simply wish to show and the lighbox will show and play your video. The scale (width and peak) of every video may be set simply.
Zoom and panning help for photos: you possibly can zoom out and in a picture and you may pan the picture, on this approach you possibly can see the picture in nice element (optionally available).
Slideshow button (optionally available).
Slideshow delay, the delay of the slideshow may be set in seconds.
Slideshow customized animated graphics.
Subsequent and former buttons navigation (optionally available).
Data button and data window: every lighbox merchandise can have an outline, the textual content and window look may be formatted with CSS (optionally available).
Customizable border and background: the border dimension and shade and in addition the primary background shade are customizable.
Keyboard help: the left and proper arrows can be utilized for navigation (optionally available).
19.02.2013 – Now we have added a brand new function to this grid, the choice so as to add media icons over the thumbnails when they’re chosen, now you possibly can selected between thumbnails description, media icons or “none” when a thumbnail is chosen.
07.03.2013 – Fastened some bugs associated to the lightbox and added higher help for cellular detection.