This page contains two scripts to display multiple groups of images with JavaScript, ordered by categories, or with Next and Back buttons. A mini-gallery of images.
- The image is displayed in new window when click on it.

• To Download these scripts, with the examples presented below, click: Mini-Gallery of images.
- For details about the code, see the comments in scripts.

Display multiple groups of images - By categories

This script contains a JavaScript object with functions that parse a JSON object with arrays (categories) with addresses of images. Shows the categories into a Menu, and displays the images added to each category.

Include the following JavaScript and HTML code in your webpage.
- Replace the image addresses added in the gimgs variable, and in the DIV tag, with the addresses of your images.
You can add more images, or categories with addresses in the "gimgs" variable, with this syntax: "category_name": ['img_address1', 'img_address2'] .
<div style="position:relative;">
 <div id="gimenu" style="float:right;width:180px;"></div>
 <div id="gimgs" style="margin:2px 200px 2px 2px">
  <img src="dir/img1.jpg" alt="Title img 1" onclick="window.open(this.src)" width="100" height="100">
  <img src="dir/img2.jpg" alt="Text img2" onclick="window.open(this.src)" width="100" height="100">
 </div>
 <br style="clear:both;"/>
</div>
<script type="text/javascript"><!--
// Display group of images with categories - coursesweb.net/javascript/

// HERE add the groups of images -  "category_name": ['img_address1', 'img_address2']
var gimgs = {
  "Autumn Life": ['dir/img1.jpg', 'dir/img2.jpg'],
  "Nature": ['dir/picture1.jpg', 'dir/picture2.jpg', 'dir/picture3.jpg'],
  "Spring Dream": ['dir/photo1.jpg', 'dir/photo2.jpg', 'dir/photo3.jpg']
};

// Object for the group of images
var setImgs = new Object();
 // create and return the menu with image categories
 setImgs.getMenu = function(){
   // traverse "gimgs" object, gets and create UL menu with category lists
   var re = '<ul>';
   for(var gictg in gimgs) {
     re += '<li style="cursor:pointer;text-decoration:underline;" onclick="setImgs.getImgs(\''+ gictg+ '\')">'+ gictg+ '</li>';
   }

   return re+ '</ul>';
 }

 // traverse the category from "gimgs" object, indicated in gictg parameter, and display the images in #setimgs
 setImgs.getImgs = function(gictg) {
   var nrim = gimgs[gictg].length;
   var re = '';
   for(var i=0; i<nrim; i++) {
     re += ' <img src="'+ gimgs[gictg][i]+ '" onclick="window.open(this.src)" height="100" />';
   }
   document.getElementById('gimgs').innerHTML = re;
 }

// adds in #gimenu the menu returned by getMenu() method
document.getElementById('gimenu').innerHTML = setImgs.getMenu();
--></script>

It is important that the HTML tag in which the images are added to have id="gimgs", and the element for menu to have id="gimenu" .


Demo:
Mini Gallery autumn picture 1 Image Gallery autumn picture 2


Display multiple groups of images with Next - Back buttons

This script contains Next and Back buttons that display the next and previous group of images added into a multidimensional array. Each sub-array contains the addresses of a group of images.
- Replace the image addresses added in the gimgs variable, and in the DIV element, with the addresses of your images. You can add more images, or arrays with addresses in the "gimgs" variable.
<div id="gimgs">
 <img src="dir/img1.jpg" alt="Title img 1" onclick="window.open(this.src)" width="100" height="100">
 <img src="dir/img2.jpg" alt="Text img2" onclick="window.open(this.src)" width="100" height="100">
</div>
<button onclick="setImgs.back();">&lt;&lt;</button> &nbsp; 
<button onclick="setImgs.next();">&gt;&gt;</button>
<script type="text/javascript"><!--
// Display group of images with Next, Back buttons - coursesweb.net/javascript/

// HERE add the groups of images
// Each group into a [], with their SRC addres between quotes, separated by comma
var gimgs = [
  ['dir/img1.jpg', 'dir/img2.jpg'],
  ['dir/picture1.jpg', 'dir/picture2.jpg', 'dir/picture3.jpg'],
  ['dir/photo1.jpg', 'dir/photo2.jpg', 'dir/photo3.jpg']
];

// Object for the group of images
var setImgs = new Object();
 setImgs.ig = 0;            // store the index for Next /Back group

 // traverse the accessed group in gimgs (with "ig" index), and display the images in #setimgs
 setImgs.getImgs = function() {
   var nrim = gimgs[this.ig].length;
   var re = '';
   for(var i=0; i<nrim; i++) {
     re += ' <img src="'+ gimgs[this.ig][i]+ '" onclick="window.open(this.src)" height="100" />';
   }
   document.getElementById('gimgs').innerHTML = re;
 }

 // set the "ig" to access Next group
 setImgs.next = function(){
   if(this.ig < (gimgs.length - 1)) this.ig++;
   else this.ig = 0;
   this.getImgs();
 }

 // set the "ig" to access Previous group
 setImgs.back = function(){
   if(this.ig > 0) this.ig--;
   else this.ig = gimgs.length - 1;
   this.getImgs();
 }
--></script>

Demo:
Image Gallery autumn life 1 Image Gallery autumn life img2
 

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Display multiple groups of images

Last accessed pages

  1. Football Cars (4322)
  2. Waitress (556)
  3. JavaScript code and PHP (19859)
  4. My New Room 2 (352)
  5. Pool Master Secure (3904)

Popular pages this month

  1. Flash Games - Free online Games (1360)
  2. Qwop (1158)
  3. Tunnel Rush (1062)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (983)
  5. Drag Racer V3 (758)