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. 

Advertisements

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.