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 HTML5 tag can be used to embed an external application (SWF, PDF) in web page?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Which CSS pseudo-element adds a special style to the first line of a text?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Click on the window object property which gets or sets the URL of current page.
window.location window.self window.status
var url = window.location;
alert(url);
Indicate the PHP function used to get the contents of a file or page and store it into a string.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://coursesweb.net/");
echo $homepage;
Display multiple groups of images

Last accessed pages

  1. Node.js Move and Copy Directory (5379)
  2. querySelector and querySelectorAll (11853)
  3. Create simple Website with PHP (24792)
  4. JavaScript code and PHP (26045)
  5. Node.js Move and Copy file (13032)

Popular pages this month

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