Jquery Course

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 tag adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Click on the "echo" correct instruction.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Address URL: http://CoursesWeb.net";
Fotorama Image Gallery

Last accessed pages

  1. Calling Function and Class Method with Name from String (5792)
  2. Working with HTML attributes in PHP (13579)
  3. Get Mime Type of file or string content in PHP (6148)
  4. Disable button and Enable it after specified time (17416)
  5. Redirects (4874)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (270)
  2. Read Excel file data in PHP - PhpExcelReader (63)
  3. The Mastery of Love (59)
  4. PHP Unzipper - Extract Zip, Rar Archives (58)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (42)