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 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";
Display multiple groups of images

Last accessed pages

  1. Select in MySQL, Output results in HTML Table (1419)
  2. Golf Putt It In (739)
  3. Disable button and Enable it after specified time (5129)
  4. Flash Games - Free online Games (22975)
  5. Move image from an element /tag to another (1637)

Popular pages this month

  1. Qwop (3219)
  2. Get Attribute (ID, Class, Name, Title, Src) with jQuery (2547)
  3. Get the value of the selected /checked checkboxes in a form (1608)
  4. Insert, Select and Update NULL value in MySQL (1423)
  5. Add, Change, and Remove Attributes with jQuery (1301)