• Fotorama LightBox
Fotorama is a highly flexible image gallery plugin for jQuery and HTML5, works in both desktop and mobile browsers. It offers multiple options for browsing through the images including: thumbnails, prev-next buttons, swiping, auto-load slideshow or bullet navigation, and images dislayed in lightbox.
The thumbnails can either be prepared or defined manually for maximum quality or the plugin will display a stretched version of the original images.
- The archive with the Fotorama Images Gallery containsd Usage Documentation and Settings, winth lots of Examples and Source Code. jQuery is included in the distribution.
• To DOWNLOAD this script, click: (26 MB).
Examples Fotorama Image Gallery
Here is a few examples images gallery created with Fotorama jQuery plugin.1. First, to use Fotorama, copy these files on your server: jquery.min.js, fotorama.css, fotorama.js, fotorama.png, fotorama@2x.png, fotorama_lightbox.css, and fotorama_lightbox.js (fotorama_lightbox.css and fotorama_lightbox.js are needed only if you want to show images in LightBox style).
2. Include these files in your web page: jQuery library, the Fotorama jQuery plugin, and Fotorama css file.
<link rel="stylesheet" type="text/css" href="fotorama.css" /> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="fotorama.js"></script>3. Add the images into a <div> with class="fotorama". Then, you just add some speciffied attributes in this Div tag to customize the image gallery, and to set various options.
- The attributes: data-width (in percents), and data-ratio, make fotorama responsive.
- The attributes: data-minwidth, data-maxwidth, data-minheight, and data-maxheight constrain fotorama’s size to a certain range.
- The attributes: alt, width, and height added in <img> tag not influence the image gallery, they are necessary only to have a valid HTML the code.
<div class="fotorama" data-width="100%" data-ratio="800/600" data-minwidth="400" data-maxwidth="1000" data-minheight="300" data-maxheight="100%"> <img src="image_1.jpg" alt="Img 1" width="350" height="233" /> <img src="image_2.jpg" alt="Img 2" width="155" height="232" /> <img src="image_3.jpg" alt="Img 3" width="310" height="233" /> </div>Demo:
<div class="fotorama" data-nav="thumbs" data-width="100%" data-ratio="800/600" data-minwidth="400" data-maxwidth="1000" data-minheight="300" data-maxheight="100%"> <img src="image_1.jpg" alt="Img 1" width="350" height="233" /> <img src="image_2.jpg" alt="Img 2" width="155" height="232" /> <img src="image_3.jpg" alt="Img 3" width="310" height="233" /> </div>Demo:
- You need to include these additional files in your HTML document: fotorama_lightbox.css, and fotorama_lightbox.js.
- The DIV with class="fotorama", that contains the images must be added into another DIV with class="thumbs".
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Fotorama LightBox Image Gallery</title> <meta name="description" content="Resource from https://CoursesWeb.net/ , web programming, development courses" /> <script src="jquery.min.js"></script> <link href="fotorama.css" rel="stylesheet"> <script src="fotorama.js"></script> <link href="fotorama_lightbox.css" rel="stylesheet"> <script src="fotorama_lightbox.js"></script> </head> <body> <div class="thumbs"> <div class="fotorama" data-auto="false" data-thumb-width="70" data-thumb-height="47" data-allow-full-screen="true" data-loop="true" data-nav="dots" data-ratio="800/600"> <img src="image_1.jpg" alt="Img 1" width="640" height="480" /> <img src="image_2.jpg" alt="Img 2" width="345" height="510" /> <img src="image_3.jpg" alt="Img 3" width="550" height="415" /> </div> </div> </body></html>Demo:
• The Fotorama home page is at: http://fotorama.io/
<<-jqPlot Charts -- jQuery plugin for Image ..->>