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 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:
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 HTML5 tag defines marked text? (can be used to highlight parts of text)
<mark> <embed> <span>
<p>Free corses: <mark>coursesweb.net</mark> for Web Development.</p>
Which CSS pseudo-class adds a style to an element when the mouse is over it?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Click on the function which returns a string value that represents the number rounded to the x digits after the decimal point.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicate the PHP function which reads an entire file into an array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
Fotorama Image Gallery

Last accessed pages

  1. Node.js Move and Copy file (12283)
  2. $_GET, $_POST and $_REQUEST Variables (27730)
  3. JavaScript Trivia Game (6173)
  4. Countdown Timer with starting time added into a form (7574)
  5. Sending data with GET and POST in the same request (4555)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1270)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (1241)
  3. Tabs effect with CSS (1227)
  4. Contact page - CoursesWeb (1225)
  5. Insert, Select and Update NULL value in MySQL (729)