Category Archives: JQuery

JQuery tutorial –- Effect — Part 4

1. Animating

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>jQuery Animating an Element</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#right”).click(function() {
$(“#theDiv”).animate({ width: “500px” }, 1000);
});
$(“#text”).click(function() {
$(“#theDiv”).animate({ fontSize: “24pt” }, 1000);
});
$(“#toggle”).click(function() {
$(“#theDiv”).animate({ left: “500” }, 1000, “swing”);
});
});
</script>
<style type=”text/css”>
div#theDiv {
position:relative;
width: 250px;
height: 180px;
margin: 10px;
padding: 20px;
background: cyan;
border: 2px solid black;
cursor: pointer;
}
p, span {
font-size: 16pt;
}
button {
margin: 5px;
}
</style>
</head>
<body>
<p>
Animating an Element</p>
<div id=”theDiv”>Animate Me</div>
<button id=”right”>Grow Right</button>
<button id=”text”>Big Text</button>
<button id=”toggle”>Move Div</button>
</body>
</html>

2. fading

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>jQuery Element Fading</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#fadein”).click(function() {
$(“#theDiv”).fadeIn(“normal”);
});
$(“#fadeout”).click(function() {
$(“#theDiv”).fadeOut(“normal”);
});
$(“#fadeto3”).click(function() {
$(“#theDiv”).fadeTo(“slow”, 0.3);
});
$(“#fadeup”).click(function() {
$(“#theDiv”).fadeTo(“slow”, 1.0);
});
});
</script>
<style type=”text/css”>
div#theDiv {
width: 250px;
height: 180px;
margin: 10px;
padding: 20px;
background: blue;
border: 2px solid black;
cursor: pointer;
}
p, span {
font-size: 16pt;
}
button {
margin: 5px;
}
</style>
</head>
<body>
<p>
Fading an Element</p>
<div id=”theDiv”>
</div>
<button id=”fadein”>Fade In</button>
<button id=”fadeout”>Fade Out</button>
<button id=”fadeto3″>Fade To .3</button>
<button id=”fadeup”>Fade To 1.0</button>
</body>
</html>

3.Sliding, Show and hide

$(function() {
$(“#slideup”).click(function() {
$(“#theDiv”).slideUp(“normal”);
});
$(“#slidedown”).click(function() {
$(“#theDiv”).slideDown(“normal”);
});
$(“#toggle”).click(function() {
$(“#theDiv”).slideToggle(“slow”);
});

$(“#show”).click(function() {
$(“#theDiv”).show(“normal”);
});
$(“#hide”).click(function() {
$(“#theDiv”).hide(“normal”);
});
$(“#toggle”).click(function() {
$(“#theDiv”).toggle(“slow”);
});
});

4.Images rotating

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>jQuery Image Rotator</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
// create the image rotator
setInterval(“rotateImages()”, 2000);
});

function rotateImages() {
var oCurPhoto = $(‘#photoShow div.current’);
var oNxtPhoto = oCurPhoto.next();
if (oNxtPhoto.length == 0)
oNxtPhoto = $(‘#photoShow div:first’);

oCurPhoto.removeClass(‘current’).addClass(‘previous’);
oNxtPhoto.css({ opacity: 0.0 }).addClass(‘current’).animate({ opacity: 1.0 }, 1000,
function() {
oCurPhoto.removeClass(‘previous’);
});
}
</script>
<style type=”text/css”>
#photoShow {
height:400px;
width:400px;
}
#photoShow div {
position:absolute;
z-index: 0;
}
#photoShow div.previous {
z-index: 1;
}
#photoShow div.current {
z-index: 2;
}
</style>
</head>
<body>
<h1>
jQuery-based Image Rotator</h1>
<div id=”photoShow”>
<div class=”current”>
<img src=”images/Grass.jpg” alt=”Photo Gallery” width=”400″ height=”400″ class=”gallery” />
</div>
<div>
<img src=”images/Leaf.jpg” alt=”Photo Gallery” width=”400″ height=”400″ class=”gallery” />
</div>
<div>
<img src=”images/Spring.jpg” alt=”Photo Gallery” width=”400″ height=”400″ class=”gallery” />
</div>
<div>
<img src=”images/Water.jpg” alt=”Photo Gallery” width=”400″ height=”400″ class=”gallery” />
</div>
</div>
</body>
</html>

Advertisements

JQuery tutorial – Events — Part 3

1. mouseover mouseleave event

$(function() {
$(“#evtTarget”).on(“mouseover mouseleave”, highlight);
$(“#evtTarget”).on(“click”, function(evt) {
$(“#evtTarget”).off(“mouseover mouseleave”, highlight);
$(“#evtTarget”).html(“<p>You shut off the hover effect!</p>”);
});
});

function highlight(evt) {
$(“#evtTarget”).toggleClass(“highlighted”);
}

2.Using jQuery to find the dive position

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Using the jQuery Event Object</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“div”).click(function(evt) {
$(this).html(“pageX: ” + evt.pageX + “, pageY: ” + evt.pageY + “, type: ” + evt.type + “, target: ” +
evt.target);
});
});
</script>
<style type=’text/css’>
.normal {
width:300px;
height:200px;
background-color: Silver;
font-size:18pt;
margin:5pt 5pt 5pt 5pt;
}
</style>
</head>
<body>
<h1>Using the jQuery Event Object</h1>
<div id=”Div1″ class=”normal”>Click on this div (Div1) to see the event information</div>
<div id=”Div2″ class=”normal”>Click on this div (Div2) to see the event information</div>
<div id=”Div3″ class=”normal”>Click on this div (Div3) to see the event information</div>
</body>
</html>

3. more mouse relative event

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Using Event Helpers</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#evtTarget”).hover(highlight, highlight);

$(“#evtTarget”).click(fnClick1);
$(“#evtTarget”).dblclick(fnClick2);
});

function highlight(evt) {
$(“#evtTarget”).toggleClass(“highlighted”);
}
function fnClick1() {
$(“#evtTarget”).html(“Click!”);
}
function fnClick2() {
$(“#evtTarget”).html(“Double Click!”);
}
</script>
<style type=’text/css’>
.normal {
width:300px;
height:200px;
background-color:Yellow;
font-size:18pt;
}

.highlighted {
background-color:Red;
}
</style>
</head>
<body>
<h1>Using Event Helpers</h1>
<div id=”evtTarget” class=”normal”>Mouse over this div to see the effect. Click on it to change the content.</div>
</body>
</html>

4. div click event

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Miscellaneous jQuery Events</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“div”).one(“click”, function() {
$(this).css({ background: “red”,
cursor: “auto”
});
});
});
</script>
<style type=”text/css”>
div {
width: 60px;
height: 60px;
margin: 10px;
float: left;
background: blue;
border: 2px solid black;
cursor: pointer;
}
p {
font-size: 18pt;
}
</style>
</head>
<body>
<p>
Click on each square to change color</p>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</body>
</html>

5. table working with event

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Striping/Hover Highlighting a Table</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#theList tr:even”).addClass(“stripe1”);
$(“#theList tr:odd”).addClass(“stripe2”);

$(“#theList tr”).hover(
function() {
$(this).toggleClass(“highlight”);
},
function() {
$(this).toggleClass(“highlight”);
}
);

$(“#theList”).on(“click”, “tr”, function showText (evt) {
alert($(this).text());
})
});
</script>
<style type=”text/css”>
th,td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000000;
}
tr {
border: 1px solid gray;
}
td {
width:200px;
padding:3px;
}
th {
background-color:#D2E0E8;
color:#003366
}
table {
border: 1pt solid gray;
}
.clickable {
cursor:pointer;
}
.stripe1 {
background-color:#0f0;
}
.stripe2 {
background-color:#afa;
}
.highlight {
background-color: #ffcc00;
font-weight:bold;
}
</style>
</head>
<body>
<h1>Using jQuery to stripe and hover-highlight a table</h1>
<table id=”theList”>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Milk</td>
<td>1.99</td>
</tr>
<tr>
<td>Eggs</td>
<td>2.29</td>
</tr>
<tr>
<td>Butter</td>
<td>3.49</td>
</tr>
<tr>
<td>Bread</td>
<td>0.99</td>
</tr>
<tr>
<td>Pasta</td>
<td>1.19</td>
</tr>
<tr>
<td>Honey</td>
<td>4.39</td>
</tr>
<tr>
<td>Cookies</td>
<td>2.99</td>
</tr>
<tr>
<td>Apples</td>
<td>0.59</td>
</tr>
<tr>
<td>Sugar</td>
<td>1.78</td>
</tr>
<tr>
<td>Pepper</td>
<td>1.56</td>
</tr>
</tbody>
</table>
</body>
</html>

JQuery Auto complete work with bakcode by using asp.net mvc

Recently to convert the new website, I have a bookinng form for the clients to finished the booking,there is some exiting data need to using auto complete. In the past I alway use ajax tool control kits to achieve that result. But now I am kind of fun for JQuery. Here is the Jquery Autocomplete textbox

First I have databses contain all the subuerbs, here is my database table.

databaseSuburbs

here is my action in my BookController:

databseJasonResult

I let it return json because json is the fast and easy analyse data at moment.

Then in your view , just add the reference to JQuery UI:

autocompleteJqury

You could ignore the timepicker.min.css, and timepicker.min.js, I use it to picker up the time, for autocomplete don’t need those two references.

here just in you view you just need one more line.

@Html.TextBox(“SearhToSuburb”, null, new {type=”text”,@class=”form-control”, @id = “search_to_suburb” })

That’s it. Simply isn’t it. Have fun. Below is what will it looking like.feels

Create marquee news in front page and the news is read from the database with expired data,also included management page to insert news

My boss just saw other company website has a marquee new on the front page, so she asked me if I could make one and arrow her to insert news and the news will dispear at the expired data.

For achieve that task, first I create a table in my database table, here is my table:

breadNewTable

then I write a store proceedure, a little tip for fresh guy, alway use store preceedure to insert data for security reasons.

breadNewStoreProceedure

Now, We could start the front end job. I create a user control:marquee.ascx(so you could put it in anyway you like), to display the new, here is my html code:

frontUCmarquee

here is the backcod, I used ado.net to open the database and qurery what I need, and bind it to my BulledtedList:

databasereadertomarquee

See the code this if(!IsPostBack) is not neccessary, but I use web froms so it wil inherit maintain state so I don’t need retrieve database everytime postback.

here I am also happy to share the css file for style this unorder list to display inline:

MarqueeCssStyle

A tip for fresh guy, put this in the page your use control will stand it.

Now, you just need drag the usercontrol to any page you want it with this css style in top of the header it. You coud see it.

Then We could start create a page to arrow my boss to insert the bread news, I used boostrap format so it save my time to write css. here is the front page look like:

addNews

here is the html code:

htmlCodeAddnews

The form use jQury Validate, the jquery-ui.js, is for my boss click then will pop up the jQuery calender to arrow her to put the expired date. So simple isn’t, I am love JQure very much, save a lot of time. It remind me when I first time write javascript over 10 years ago, for every simply function I need write a lot codes.

Finally I just need write a event could be fired by this button.

storeIntodatabase

Ok, That’s all. Have fun!

Using c# code to force bootstrap modal stay open after page postback

Recently I write a small function into my asp.net application.To enable the driver to input the time the submit the pick up client and drop off the client time.
My boss like the pick up time and drop off time should been populate by just click.so I write a code on the back of page to retrive the time every time the driver click the button.
But the dropoff button driver me to nuts,Because When the dropoff button click I pop out the bootstrap modal.But the problems came out this button need make page postback to retrive the current time and after postback my modal need stay open.
It take me a while to fix out this.
Here is my solution.
first, I need write javascript like this is for to open the modal: #dropoffModal is my hidden modal.

 function openModal() {
$('#dropoffModal').modal({ show: true });
}
 

Second I have the the button is like this(See the button click will fire a event named:”Button_DropOff_Click” behind it):

 button_click_event_fire_javascript

Finally, just write your event on the page behind file:


protected void Button_DropOff_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);
}

here just a solution. by the way, You could use ScriptManager.RegisterStartupScript() this command call another function in your frond page javascript.

Revision:how to use backbone

three way to create your  model:

Person = Backbone.Model.extend({})
Person = Backbone.Model.extend({
defaults:{
name:"";//Model arrow undefined data
create:new Date() //here arrow put PHP function
}
});
Person = Backbone.Model.extend({
defaults:function(){
return   {  name:"";  //Model arrow undefined data
create:new Date()
}
}
});

Read and Write:

var person = new Person({ name:”Sandy”,age:”12″});

person.get(“name”);//” Sandy”

person.set({name:”Anna”,age:”12″});//overwrite it

Create Simple View

PersonView = Backbone.View.extend({

render:function(){

var person = “<p>” + this.model.get(“user”) + “</p>”;

$(this.el).html(person);

}

});

“this.el” meaning: every View Model create a Page Scope, el means the root tag<div></div>,

Get Model data Add into HTML page

var personView = new PersonView({

model:person;

})

personView.render();

console.log(personView.el);//check the el

Get Data from the server(RESTful way)

var Person = Backbone.Model.extend({urlRoot:”/person”}); //point to the data sourse

var person = new Person({id:1}); //point to your object

person.fetch();//get /person/1

person.save();//put /person/1

var newPerson=new PersonModel(); //create a new object

newPerson.set({name:”Sandy Zhang”}); // give the an name

newPerson.save(); // insert into /person

newPerson.get(“id”); //2

newPerson.destroy();// Delete /person/2

Create Better View

var PersonView = Backbone.View.extend({

tagName:”article”,

id:”personOne”;

class:”person”,

attributes:{title:this.model.get(“name”)},

render:function(){

var person=”<p>” + this.model.get(“name”)+”</p>”;

$(this.el).html(person);

}

});

this will render html sourse:

<article id=”personOne” class = “person” title=”Sandy Zhang”>

<p>Sandy Zhang</p>

</article>

Cache of the jQuery object

$(“#personOne”).html();

in Backbone.js: $(this.el).html(); or better way : this.$el.html()

el  is  generated for the cache of jQuery object, so that it can be used repeatedly without fear of generating multiple instances of the jQuery object.

Built-in template engine(underscore template)

use render() seems not elegant ,now we use underscore template

var PersonView = Backbone.View.extend({

tagName:”article”,

id:”personOne”;

class:”person”,

attributes:{title:this.model.get(“name”)},

template: _.template(‘<p><%= name %></p>’),

render:function(){

data = this.model.toJSON();

$(this.el).html(template(data));

}

}); // Cool! looking better

Track your instance

var person = new Person({name:”sandy”}); //create a instance

person.on(“change”,function(){

alert(“Something changed on ” + this.get(“name”) );

});

person.on(“change:age”,function(){

alert(this.get(“name”) +”,Your age has been changed ”  );

});

Change data to JSON format

var person = new Person({id:1});

console.log(person.toJSON());

//or

console.log(JSON.stringify(person));

Now Add View event

var PersonView = Backbone.View.extend({

tagName:”article”,

id:”personOne”;

class:”person”,

attributes:{title:this.model.get(“name”)},

template: _.template(‘<p><%= name %></p>’),

render:function(){

data = this.model.toJSON();

this.$el.html(template(data));

},

events:{ “mouseover” :”showMore”,},

showMore:function(){…….},

});

Advance Level

1.Server <= (get) model (data) => view (rendering) => DOM

var PersonView = Backbone.View.extend({

input:_.template(‘<input type=”text”><%= name%></input>’),

submit: _.template(‘<button type=”submit”>Change Name</button>’),

render: function(){

data = this.model.toJSON();

this.$el.html(input(data)).html(submit);

}

});

Now we can  change name now, the question is how do you know the model data has changed? This needs to view it through the event.

var PersonView = Backbone.View.extend({

events:{“submit button”:”updateName”}

updataName:function(){

newName = $(this).val();  // this=button!

if(newName !== this.model.get(‘name’)){

this.model.set({name:newName}); }

else{ return;}

}

});

Well…it did work, but the problem is : should belong Model processing logic  put in the View now. So we reconstruct it.

var PersonView = Backbone.View.extend({

events:{“submit button”:”updateName”}

updateName:function(){

newName = $(this).val();

this.model.updateName(newName);

}

});

var Person = Backbone.Model.extend({

updateName: function(newName){

this.set({name:newName});

this.save(); // tell server to save the new name into database

}

})

2.The above, we pass the parameter value changes transferred to the Model, and then further processed by the Model it wants to do.

Now, the loop model like this:

Server <= (updated) model (proceed) <= (notification) view <= (user interaction) DOM

If the data model changes, how to notice the view? You might immediately think of the render method can be performed immediately after the completion notification view:

var PersonView = Backbone.View.extend({

updateName:function(){

newName = $(this).val();

this.model.updateName(newName);

this.render();

}

});

Ah good idea …… but it is not always useful, because the value of the model could be changed elsewhere, such as in another view . So, how to notify the specified view  response to the model changes?

So, use listenTo() function

var PersonView = Backbone.View.extend({

initialize:function(){

this.listenTo(this.model,”change”,this.render);

//this.model.on(“change”,this.render,this);

}

});

3. collection

a)Collect multiple model data

When there was more and more instances , in order to facilitate the processing of them, we usually think of them together with the array. Backbone.js Collection module provides a simplified way to help us:

var Person = Backbone.Collection.extend({ model:person });

var person.add{[{name:”Sandy Zhang”, id:1},{name:”Anna li”,id:2}]};

person.length //=>2

person.get(2) // => { name : “Anna li”,id:2}

person.at(0) //=>{ name:”Sandy Zhang”, id:1}

HTML5 Push State API

Backbone.history.start({pushState: true});

var App = new (Backbone.Router.extend({
initialize: function() {
this.person = new person();
this.personView = new personView({collection: this.person});
$(“#app”).append(this.personView.el);
},

index: function() {
this.person.fetch();
},

start: function() {
Backbone.history.start({pushState: true});
}
}));

$(function() { App.start(); });

Backbone Collection

run the code in the browse should look like

backbone3

here is the code for get the collection:

<script type=”text/javascript”>
Student = Backbone.Model.extend({
defaults:{
name:””,
age:””
}

});
ClassRoom = Backbone.Collection.extend({
model:Student
});

var student1 = new Student({name:”Sandy”,age:”20″});
var student2 = new Student({name:”Rachel”,age:”18″});
var student3 = new Student({name:”Anna”,age:”23″});
var collection = new ClassRoom([student1,student2,student3]);

</script>

Backbone – Router

On this post create 2 template,and use backbone router to communicate with those 2 pages, here is the code.

<script type=”text/template” id=”first_template”>
<label>My First View:</label>
<a href=”#second”>Go to Second View</a>

</script>

<script type=”text/template” id=”second_template”>
<label>My Second View:</label>
<a href=”#first”>Go to First View</a>

</script>

<div id = “container”></div>

<script type=”text/javascript”>
FirstView = Backbone.View.extend({
el:$(‘#container’),
initialize:function(){
this.render();
},

render:function(){
var template = _.template($(‘#first_template’).html(),{});

this.$el.html(template);

}

});

SecondView = Backbone.View.extend({
el:$(‘#container’),
initialize:function(){
this.render();
},

render:function(){
var template = _.template($(‘#second_template’).html(),{});

this.$el.html(template);

}

});

MyRouter = Backbone.Router.extend({
routes:{
“”:”firstPage”,
“first”:”firstPage”,
“second”:”secondPage”
},

firstPage:function(){
new FirstView();
},
secondPage:function(){
new SecondView();
}

});

var router = new MyRouter();
Backbone.history.start();

</script>

 

Backbone create a View

On this post just create a event and render it, and the event communicate with your html ID.

here is the code for your view, just put this in your body will work.

test on the browser should look like this.

backbone2

<script type=”text/template” id=”sample_template”>
<label>Name:</label>
<input type=”text” id=”name_desc”/>
<input type=”button” value=”Add Name” id=”btn”/>

</script>
<div id = “container”></div>
<script type=”text/javascript”>
Name = Backbone.View.extend({
el:$(‘#container’),
initialize:function(){
this.render();
},

render:function(){
var template = _.template($(‘#sample_template’).html(),{});

this.$el.html(template);

},
events:{
“click input[type=button]”: “addName”
},

addName:function(){
alert(“The name: “+$(‘#name_desc’).val() + ”  has been added”);
}
});

var name = new Name();
</script>

use javascript create back and forward button for images gallery

here is the source code.

var count = 0;
// image name array
var imageArr = new Array(“addiction”, “amy”,”abba”, “aphex”,”backstreet”, “bjork”, “bowie”, “donna”,”elliott”, “fergie”, “groove”, “him”,”jeff”, “kanye”, “linkin”, “lisagerrard”,”maddy”, “mariah”, “marvin”, “mary”,”melon”, “neyo”, “nick”, “nin”,”pumpkins”, “rhcp”, “rihanna”, “rob”,”rufus”, “seether”, “staticx”, “stereophonics”,”tim”);
// image description array
var imageDescArr = new Array (“Addiction”, “Amy”, “Abba”, “Aphex”,”Backstreet”, “Bjork”, “Bowie”, “Donna”,”Elliott”, “Fergie”, “Groove”, “Him”,”Jeff”, “Kanye”, “Linkin”, “Lisagerrard”,”Maddy”, “Mariah”, “Marvin”, “Mary”,”Melon”, “Neyo”, “Nick”, “Nin”,”Pumpkins”, “Rhcp”, “Rihanna”, “Rob”,”Rufus”, “Seether”, “Staticx”, “Stereophonics”,”Tim”);
// This function will click next picture
function nextPic()
{

//get Id is ‘pic’ replace the picture src
document.getElementById(‘pic’).src=’images/product/’+imageArr[count]+’.jpg’;
//get Id is ‘desc’ replace the text src
document.getElementById(‘desc’).innerHTML=imageDescArr[count];
//loop count++
count++;
//when count is equal imageArr.length
if(count==imageArr.length)
{
// back is zero
count=0;
}

}
// This function will click back picture
function backPic()
{
//get Id is ‘pic’ replace the picture src
document.getElementById(‘pic’).src=’images/product/’+imageArr[count]+’.jpg’;
//get Id is ‘desc’ replace the text src
document.getElementById(‘desc’).innerHTML=imageDescArr[count];
//loop count–
count–;
// count is less than zero
if(count<0)
{
//back to number is imageArr.length subtract one
count=imageArr.length-1;
}

}