From the blog zli1 » cs-wsu by zhengjunli and used with permission of the author. All other rights reserved by the author.

First, make the interface more simpler, so when the readers scrolling the article, the pictures will not fly everywhere;

Second, add the lightbox feature into the chapter. Although I have set up the feature, but we are not yet to combine. 

Third, since they have HD pictures, they want us to make zoom function into the app, which we disable the function at beginning. 

This week, with joe’s help, my lightbox function now is working in the app.

http://cstest.worcester.edu/development/li/zoom/CS401Spring2013-user_interface/articles/archaeology.html

My primary work is working on the zoom function. My goal is to having zoom function, while doesnot effect other chapters. 

By talking with my classmate, Williams, he told me the way  how to disable the zoom function. 

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” />

From the blog zli1 » cs-wsu by zhengjunli and used with permission of the author. All other rights reserved by the author.

After got the update the articles from Tim this week, the content increased up to 8 chapters. So in my update this week, I have put all the picture and text information into 8 different html files and used existed button “Previous” and “Next” connect between each chapters. But since I having trouble to use the server this week, The size of the image will need to be redone. This should be fixed easily, once I could test on the ipad next week.

From the blog zli1 » cs-wsu by zhengjunli and used with permission of the author. All other rights reserved by the author.

We are almost there for the light box function. After Monday’s meeting, the light box function can works with in the articles in general. And notice the close button has been move to the right-up side of the screen, and I kept the close function working when the user click on anywhere in and outside of the light box. The only thing need to be fixed for the lighte box is the sized of the image. And that could be fixed easily by photoshop or any image software.

From the blog zli1 » cs-wsu by zhengjunli and used with permission of the author. All other rights reserved by the author.

Here is the new update of light box since last week, There is few issues I have make it improved.
The most significant improvement is that my original code would work for multiple pictures. And that gets improved.
Second, I added a close button on the top of the picture in the center.
Third, I added some shadow feature to the light box to make it looks pretty.
So for the rest of the week, hopefully I could meet up with Joe and James and let them add the light box into both article chapter and slide show chapter.

And since my code only work while have the pictures, so I will zip them and e-mail it out.

From the blog zli1 » cs-wsu by zhengjunli and used with permission of the author. All other rights reserved by the author.

This week, I am working on the java script Light Box foe both article chapter and slide show chapter. I have find an example online to do such a thing. And by simply add my code to both chapters index will make the light box function work!
And here is my code:

Quick Simple Light Box

body
{
font-family: Helvetica, Arial;
}

.backdrop
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:#000;
z-index:50;
display:none;
}

.box
{
position:absolute;
top:5%;
left:25%;
background: #000;
z-index:51;

-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow:0px 0px 15px #444444;
-webkit-box-shadow:0px 0px 15px #444444;
box-shadow:0px 0px 15px #444444;
display:none;

}
}

$(document).ready(function(){

$(‘.lightbox’).click(function(){
$(‘.backdrop, .box’).animate({‘opacity’:’.50′}, 300, ‘linear’);
$(‘.box’).animate({‘opacity’:’1.00′}, 300, ‘linear’);
$(‘.backdrop, .box’).css(‘display’, ‘block’);
});

$(‘.close’).click(function(){
close_box();
});

$(‘.backdrop’).click(function(){
close_box();
});

});

function close_box()
{
$(‘.backdrop, .box’).animate({‘opacity’:’0′}, 300, ‘linear’, function(){
$(‘.backdrop, .box’).css(‘display’, ‘none’);
});
}

This is Quick Simple Light Box

Realized that the picture I use in the web page is called 1.jpg and 1-mini.jpg. These two picture have different size. So before we upload the picture, I will need to smaller the regular size pictures and then it should work prefect.

From the blog zli1 » cs-wsu by zhengjunli and used with permission of the author. All other rights reserved by the author.

After few weeks of study JQuery and research on the light up box, I decided to use the example from web named demozoom. The picture will be enlarged if the user click on it as the picture shown.I have got the code running. So the next week I have to figure out the way to make the code runable on the existing code I have.

From the blog zli1 » cs-wsu by zhengjunli and used with permission of the author. All other rights reserved by the author.

From the blog zli1 » cs-wsu by zhengjunli and used with permission of the author. All other rights reserved by the author.

From the blog zli1 » cs-wsu by zhengjunli and used with permission of the author. All other rights reserved by the author.

There are some feature that I found might help out from our project.

The INSERT INTO Statement

The first form doesn’t specify the column names where the data will be inserted, only their values:

INSERT INTO table_name
VALUES (value1, value2, value3,…)

The second form specifies both the column names and the values to be inserted:

INSERT INTO table_name (column1, column2, column3,…)
VALUES (value1, value2, value3,…)

The UPDATE Statement

The UPDATE statement is used to update existing records in a table.

SQL UPDATE Syntax

UPDATE table_name
SET column1=value, column2=value2,…
WHERE some_column=some_value

SQL DELETE Statement

The DELETE Statement

The DELETE statement is used to delete rows in a table.

SQL DELETE Syntax

DELETE FROM table_name
WHERE some_column=some_value

From the blog zli1 » cs-wsu by zhengjunli and used with permission of the author. All other rights reserved by the author.