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 is used to include external CSS file in web page?
<body> <script> <link>
<link href="/templ/style.css" rel="stylesheet" type="text/css" />
Which CSS property sets the text size?
font-weight text-decoration font-size
h2 {
  font-size: 1em;
}
Indicate the JavaScript property that can add HTML code into an element.
text value innerHTML
document.getElementById("someID").innerHTML = "HTML content";
Click on the function that returns the number of characters of a string in PHP.
count() strlen() stristr()
$str = "http://CoursesWeb.net/";
$nr_chr = strlen($str);
echo $nr_chr;       // 22
Fotorama Image Gallery

Last accessed pages

  1. JavaScript trim, rtrim and ltrim (11612)
  2. SHA1 Encrypt data in JavaScript (30715)
  3. Get Duration of Audio /Video file before Upload (14016)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (72834)
  5. CSS Trapezoid Shape (10580)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (695)
  2. SHA256 Encrypt hash in JavaScript (425)
  3. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (412)
  4. SHA1 Encrypt data in JavaScript (384)
  5. Read Excel file data in PHP - PhpExcelReader (307)