Solution for the zoom in lightbox

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. 

article chapter update Week April 29

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. 

 

Goes in <head> of html

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

 
Goes in <javascript>
 
<script type=”text/javascript”>
      $(document).bind(‘touchmove’, function(e) { e.preventDefault(); } );
    </script>
 
And the next thing is to make my lightbox zoom function work. while does not effect my article page. 
 
After I test it, it will work if I close my lightbox in a regular size. However, if I close my lightbox pictures while I zoom in, my article chapter will be effect.
 
For the last week, I will continue working on this problem. And I will say, the article chapter is getting their!

Articles chapter update

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.

update in articles chapter(light box)

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.

Update of light box 4-2-2013

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.

Quick Simple Light Box

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.

March - 17 light up box

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.

March- 3 JQuery

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. 

March – 10 git-hub

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.