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 tag is used to include external CSS file in web page?
<body> <script> <link>
<link href="/templ/style.css" rel="stylesheet" type="text/css" />
Which CSS property sets the text size?
font-weight text-decoration font-size
h2 {
  font-size: 1em;
}
Indicate the JavaScript property that can add HTML code into an element.
text value innerHTML
document.getElementById("someID").innerHTML = "HTML content";
Click on the function that returns the number of characters of a string in PHP.
count() strlen() stristr()
$str = "http://CoursesWeb.net/";
$nr_chr = strlen($str);
echo $nr_chr;       // 22
Display multiple groups of images

Last accessed pages

  1. OOP - Classes and objects - Create Class (5326)
  2. Classes - Interface in ActionScript 3 (2498)
  3. SHA1 Encrypt data in JavaScript (30714)
  4. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (58876)
  5. innerHTML in PHP (14848)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (692)
  2. SHA256 Encrypt hash in JavaScript (425)
  3. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (412)
  4. SHA1 Encrypt data in JavaScript (383)
  5. Read Excel file data in PHP - PhpExcelReader (306)