Javascript Course

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 attribute is used in <a> tag for the address of the link?
src href rel
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Which CSS property sets the type of the text font?
font-family text-decoration font-size
h2 {
  font-family:"Calibri",sans-serif;
}
What instruction selects all the <div> tags with class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // number of selected items
alert(nr_elms);
Indicate the function that can be used to get the sum of values in an array.
array_sum() array_diff() array_shift()
$arr =[1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
Display multiple groups of images

Last accessed pages

  1. CSS3 Flexbox Container (634)
  2. Ajax-PHP File Manager (8069)
  3. Get Lower, Higher and Closest Number in JavaScript (2314)
  4. JavaScript strip_tags and stripslashes (5704)
  5. SBMD - Simple Backup MySQL Database (4231)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (812)
  2. SHA256 Encrypt hash in JavaScript (734)
  3. Create simple Website with PHP (690)
  4. Read Excel file data in PHP - PhpExcelReader (689)
  5. PHP Unzipper - Extract Zip, Rar Archives (684)