MPGal is a light, simple and easy to customize image gallery script created with pure JavaScript (less than 8 KB, with comments in code).
You not need to know or to add JavaScript code, just some html tags. And you can set multiple image galleries in the same page.
When you click on the image, it is displayed in fullscreen modal box. See the examples bellow.

- To download the script and examples, click this link: MPGal Image Gallery (540 KB).

For questions or problems related to this script, please write on Forum.

Usage

1. Download the script and copy the mpgal.css and mpgal.js files on your server.
2. Include the "mpgal.css" and "mpgal.js" in your webpage, and add the images into a Div with class="mpgal".
- To make an image in page to be displayed in modal box (wich isn't into a Div for gallery), just add: class="mpgal" to that image.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>MPGal Image Gallery</title>
<link rel="stylesheet" type="text/css" href="mpgal.css">
</head>
<body>
<div class="mpgal" data-mpgal="thumb_width:80, thumb_height:50, maxwidth:600, maxheight:400">
  <img src="image1.jpg" alt="Alt text" width="640" height="480" data-caption="Text for caption. Optional." />
  <img src="picture2.png" alt="Alt text" width="500" height="400" />
  ...
</div>

<img src="image_address.png" alt="Alt text" width="100" height="70" class="mpgal" data-caption="Optional text" />

<script src="mpgal.js"></script>
</body>
</html>
- With the data-mpgal attribute you can define settings data (name:value , separated by comma) for image gallery included in that Div. It is optional, if you not add it, the script will use the default settings.
- The data-caption attribute in the <img> tag can be used to add some text for image caption.
- It is indicated to include the "mpgal.js" script after the Div with images, to the end of the html code, before the </body>, but it works also if you include it into the <head>.

Settings for data-mpgal

Examples

• Gallery 1 - with settings data added in "data-mpgal" ("showimg:false" to not show image in stage).
<div data-mpgal="showimg:false, thumb_width:100, thumb_height:70" class="mpgal">...</div>
- Displays the image in fullscreen when you click on it.
cat dolphin spring_dream1 spring_dream2 tree

• Gallery 2 - images are added into a simple:<div class="mpgal">...</div>
- When the image in stage it is clicked, will show it in fullscreen.
cat dolphin spring_dream1 spring_dream2 tree

• Gallery 3 - with settings data added in "data-mpgal" ("modal:false" to not display image in fullscreen).
<div class="mpgal" data-mpgal="modal:false, thumb_width:80, thumb_height:50, maxwidth:600, maxheight:400">...</div>
spring_dream1 spring_dream2 cat dolphin tree

• Set an image to be displayed in modal box, just adding class="mpgal" to the image.
- Click on it: spring_dream2

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<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
MPGal - Simple Image Gallery

Last accessed pages

  1. Convert XML to JSON in JavaScript (22200)
  2. Draw arrow markers between clicks coords in Canvas (1143)
  3. Change CSS file with jQuery (3875)
  4. PHP getElementById and getElementsByTagName (34575)
  5. Contact page - CoursesWeb (33564)

Popular pages this month

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