Fotorama Image Gallery

• 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:

• 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:

• 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:

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

<<-jqPlot Charts -- jQuery plugin for Image ..->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is used to add lists into <ul> and <ol> elements?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

Which value of the "display" property creates a block box for the content and ads a bullet marker?

block list-item inline-block

.some_class {
  display: list-item;
}

Which instruction converts a JavaScript object into a JSON string.

JSON.parse() JSON.stringify eval()

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

Indicate the PHP class used to work with HTML and XML content in PHP.

stdClass PDO DOMDocument

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

Fotorama Image Gallery

Jquery Course

Examples Fotorama Image Gallery

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month