According to the existing defect in the light box zoom feature that the article page will remain on the same zoom size when user exit from the light box. My original plan is let user to click on the picture and return to the article page with the full size. However, it does not work that way. So I came up with another solution, which unblock the zoom function on the article page. The advantage of doing this is user will being able to zoon back and normally read the article. The disadvantage will be when the user did not close the light box with size, the page will look disorganized until they zoom back in. I have gave a couple people test on the user experience, they feel nature’s zoom in for the picture, and when they close the light box, they will realized the page need to be zoom out, also. I mean, this the not the solution that my original plan was. But this is at least a solution for the problem. 

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

This week, people from Worcester Art Museum come to the class and gave each of the content group some suggestions to make our app looks nicer and more usable. Her suggestion for our group is follow:

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.

After few weeks process of the project, I have some general understanding of how to build a data which could connect with the jsp file. During the class, we have decided to start to build up a sever to host this app. And I decided to change my focus on web interface, something I have never done before. Together with Joe, we will working on the article secession which should display some reading while having some pictures on the side. Joe has got some functions working and display very nicely. And someone suggested to us to have a function to enlarge the picture if people want to take a close look at the picture. What I have done this week is try out the functions that its already exist , and get familiar with the JQuery. And I will focus more how to make a lights up box at the following week. 

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

While I am working on the article secession, gitHub is being introduced to the class as a tool to use for the online project hosting. So set up gitHub and learn how to use it is another task for me in this week. In web http://git-scm.com/book, it has 9 chapters guild you all kinds of different things within the git. After I installing the git in my windows, I will being able to clone the our class’s repo,  remote the cloned repo, create and delete a new branch, push your files to the branch on Github, etc. It is really helpful for doing a project as a group and to kept working on it as a whole. 

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

Continue from last week, by connected SQL with JSP, the next step is to know how to modify the data in the table by insert, delete, select such functions. There is a very useful web that I found online: http://www.w3schools.com/sql/. On the web, there are a lot a good code basic and advanced feature about SQL.

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.