Image Gallery with Thumbnails
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:
Img 1 Img 2 Img 3
Image gallery with Thumbnails (adding: data-nav="thumbs"):
<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:
Img 1 Img 2 Img 3
Image gallery displayed in LightBox.
- 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 http://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:
Img 1 Img 2 Img 3


• The Fotorama home page is at: http://fotorama.io/

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds an image in web page?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
Fotorama Image Gallery

Last accessed pages

  1. The Rise Of Atlantis (12132)
  2. JavaScript code and PHP (19892)
  3. Insert, Select and Update NULL value in MySQL (25324)
  4. innerHTML in PHP (6400)
  5. Bubbles3 (52204)

Popular pages this month

  1. Flash Games - Free online Games (1930)
  2. Qwop (1474)
  3. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (1331)
  4. Tunnel Rush (1259)
  5. Drag Racer V3 (979)