Current time: 09-23-2019, 03:03 PM
Hello There, Guest! (LoginRegister)

myCampusNotes | Forum




New Reply 
 
How to setup Grid and animate images on the default page of myCampusNotes.com
05-07-2014, 02:41 PM (This post was last modified: 05-07-2014 10:47 PM by Deep_Singh.)
Post: #1
How to setup Grid and animate images on the default page of myCampusNotes.com
Relevent Page : http://mycampusnotes.com/default.aspx

Complete explaination

randomImageGenerator.js
----------------------------
everything is included within $("document").ready(function(){});, its like void main() in c/c++ , all the

functions must be included in this file inorder to load all the javascript with page load.

how to get images from file
------------------------------------------------------------------------
use the following code
all the id's of images are stored from number 1-18
first we get the id of the div
Code:
for (var index = 1; index <= 18; index++) {
        var getIndex = index;
        var getid = document.getElementById(getIndex);
        getid.src = "images/smallPics/" + imgId[index - 1] + "01.jpg";
    }
first line transfers the control of index (which is initially 1) to getIndex
then we get the id of div by document.getelementbyid(getindex)
for example if getIndex = 1, then getid = document.getelementbyid(1) (i.e. it will go to control in

html where id = 1, i.e. <img id = 1>.... </img>

so on.. the loop will go through 18 cases and get all id's

then we will use the source attribute of image to get the source of image
getid.src = "images/smallPics/" + imgId[index - 1] + "01.jpg" means that source is being defined for

image at "images/smallPics/" + imgId[index - 1] + "01.jpg" , NOTE : This isnt creating a folder, its

storing image in folder.Important note : All the images should have src code, you can put source as

"#", so that the console doesnt give any error.

how to draw a grid of images
-------------------------------------------------
First of all, all the images should have a position:absolute attribute so that we could specify all the

position of images ourself, use the following code
Code:
function setImagesOnScreen() {
    var left = 0;
    var left1 = 0;
    var left2 = 0;
    for (var z = 1; z <= 6; z++) {
        $("#div" + z).css("left", left);
        left = left + 227;
    }
    for (var z = 7; z <= 12; z++) {
        $("#div" + z).css("left", left1);
        left1 = left1 + 227;
    }
    for (var z = 13; z <= 18; z++) {
        $("#div" + z).css("left", left2);
        left2 = left2 + 227;
    }
}
function setImages() {
    var getWidth = Math.floor($(window).width());
    var getHeight = Math.floor($(document).height());
    var myDiv = document.getElementById('d1'); //get #myDiv
    $('#div7, #div8,#div9,#div10,#div11,#div12').css("top", getHeight / 3);
    $('#div13,#div14,#div15,#div16,#div17,#div18').css("top", 2 * getHeight / 3);
    $('.show_Images').css("height", getHeight / 3);
    $('.main_image').css("height", getHeight);
    $('.main_image').css("width", getWidth);
}
these images are divided into 3 X 6 grid, we use the 'left' property of css to set the images on

screen, left, left1, left2 are initially set to 0 then using css property in javascript we set the

images on screen.

------------------------------------------------
Till now we have got 18 grids of images with id of image linking to it, i.e static page with no

animation associated with it. Now we will animate the grid and dynamically change the images (using fadeIn animation)
------------------------------------------------

How to change images on screen
------------------------------------------------
Code:
function changeImage(i) {
    var arr = new Array();
    arr = storeNumberIntoArray();
    var shuffldarray = new Array();
    shuffldarray = shuffle(arr);
    var getid1 = document.getElementById(i);
    getid1.src = "images/smallPics/" + shuffldarray[1] + "01.jpg";
}

function shuffle(array) {
    var counter = array.length, temp, index;
    // While there are elements in the array
    while (counter > 0) {
        // Pick a random index
        index = Math.floor(Math.random() * counter);
        // Decrease counter by 1
        counter--;
        // And swap the last element with it
        temp = array[counter];
        array[counter] = array[index];
        array[index] = temp;
    }
    return array;
}

function viewImages() {
    var imgId = new Array();
    imgId = storeNumberIntoArray();
    for (var index = 1; index <= 18; index++) {
        var getIndex = index;
        var getid = document.getElementById(getIndex);
        getid.src = "images/smallPics/" + imgId[index - 1] + "01.jpg";
    }
}

function storeNumberIntoArray() {
    var new_array = new Array();
    for (var i = 0; i < 18; i++) {
        new_array[i] = i + 1;
    }
    shuffle(new_array);
    return new_array;
}
The first code is calling the method 'storeNumberIntoArray()' , which will just create an array of 1 to

18 numbers and return the array, which we are saving in var arr = new Array(), then we need to shuffle

the images i.e create a random series of numbers (1 to 18) and store that into shuffldarray, then we

will get the id of the div and store that image into that div.

How to animate images
---------------------------------------------------
Code:
function animateImage1() {
    setInterval(function () {
        var setDiv = (Math.random() * 18 | 0) + 1;
        var setDelayTime = (Math.random() * 10000 | 5000) + 1;
        $('#div' + setDiv).fadeOut(0);
        changeImage(setDiv);
        $('#div' + setDiv).fadeIn(500).delay(setDelayTime);
    }, 5000);
}
this one is creating a random div at random instance of time and animating the image (first its fading

out then its changing the image then its fading in)

----------------------------------------------------
Complete source code
----------------------------------------------------
[Image: 2d029bw7rbxpcj8fg.jpg]

You can also download source code here : http://mycampusnotes.com/js/randomImageGenerator.js

---------------------------------------------------
Any doubts ? dont hesitate to ask here, we will be happy to help. Smile
Quote
New Reply 


Forum Jump:

Contact Us | myCampusNotes | Forum | Mobile Version | RSS Syndication
Return to Top

Login
Username:
Password:



Lost your password?

© Copyright 2015 myCampusNotes.com


Website designed to help the students of GGSIPU and other universities with notes preparation, counseling material and other stuff.

Powered by myBB.