One javascript Image Viewer widget _ image effects

Over the past few days, I have been pondering a scalable "album", which is actually a JS component used to display images. But what is scalability? That is, the effect of image switching is customizable. Through this component, we can customize a lot of effects, but this is not final yet. Now let's try it first.

The Code is as follows:

Var pola = new PhotoLook ("contain"); // create a PhotoLook object

This is the statement for instantiating This component. cantain is the ID of the p you specify, which is defined by the component owner.

The Code is as follows:

/* Set the PhotoLook size */
Pola. width = 240;
Pola. height = 320;
/* Add an image */
Pola. add ("http://img.overpic.net/thumbs/c/h/s/xchsypp84zbzof3ofu_s.jpg ");
Pola. add ("http://img.overpic.net/thumbs/c/4/8/xc48uw6026mq5kuk2jzxg_s.jpg ");
Pola. add ("http://img.overpic.net/thumbs/s/3/z/xs3zwhazx5db43ux8npmf_s.jpg ");
Pola. add ("http://img.overpic.net/thumbs/l/n/u/xlnunh3z65oz4de4y5qs_s.jpg ");
Pola. add ("http://img.overpic.net/thumbs/s/z/p/xszpf2cqu4la46wvve9n_s.jpg ");
Pola. add ("http://img.overpic.net/thumbs/7/q/k/x7qk2am7qzgyi5s03bdxi_s.jpg ");
Pola. add ("http://img.overpic.net/thumbs/ B /7/w/xb7wghi7ivyxmbz7tb72e_s.jpg ");
Pola. add ("http://img.overpic.net/thumbs/g/d/5/xgd532glxuyc7mmy2h99p_s.jpg ");
Pola. add ("http://img.overpic.net/thumbs/ I /m/f/ximfw3938obxo33qqjg_s.jpg ");
Pola. init ();

Define the component size, use the provided add method to add images, and then call init to initialize the image.

The Code is as follows:

/* Fade-out effect. The effect can be done by yourself and added by yourself. This is just a classic one (the effect must accept a parameter, that is, every small p, which we can process )*/
Var fadeOut = function (p ){
P. style. zIndex = 1;
P. style. opacity = 0;
P. style. filter = "Alpha (Opacity = '0 ')";
// P. filters. alpha. opacity = 20;
(Function (p, opacity ){
Var hide = function ()
{
Opacity = opacity + 0.1;
P. style. opacity = opacity;
P. style. filter = "Alpha (Opacity = '" + opacity * 100 + "')";
If (opacity <1)
{
SetTimeout (hide, 100 );
}
}
Hide ();
}) (P, 0)

};

Add a fade-out effect. Note that this effect is not certain. We can make other effects ourselves and then call addswitchMethod to add them to the component object:
/* Add fade-out effect (you can add many effects and set the sequence of effects )*/
Pola. addswitchMethod (fadeOut, "show ");

The following figure shows the effect matrix configuration of the example below.

The Code is as follows:

/* Add an effect matrix. Check the distribution of matrix numbers to see the approximate result. If the number is small, the effect will first occur */
Pola. addswitchTable ([[,], [,], [,]);
Pola. addswitchTable ([[1, 2, 2], [2, 1, 2], [1, 2], [2, 1, 2]);
Pola. addswitchTable ([[1, 2, 3, 4], [1, 2, 3, 4], [1, 2, 3, 4]);
Pola. addswitchTable ([[,], [,], [,], [,]);
Pola. addswitchTable ([[,], [,], [,]);
Pola. addswitchTable ([[1, 2, 3, 1], [3, 4, 2], [2, 4, 3], [1, 3, 2, 1]);
Pola. addswitchTable ([,], [,], [,]);
Pola. addswitchTable ([[,], [,], [,], []);

At first glance, you should know the relationship between the effect matrix and the switching effect.
Let's take a look at an example. By the way, because images are taken directly from the Internet and are not processed, the first round of switching will feel a little like a card, but when all of its images are buffered, the complete effect will be displayed.
In the future, the pre-loading function will be added to greatly reduce the impact of this situation (these images are too large, so I do not know how to upload images in the blog Park, or I have no idea how to upload them at all)
You can only view the album after you click the "initialize" button...
Complete configuration code

The Code is as follows:

Var pola = new PhotoLook ("contain"); // create a PhotoLook object
/* Set the PhotoLook size */
Pola. width = 240;
Pola. height = 320;
/* Add an image */
Pola. add ("http://img.overpic.net/thumbs/c/h/s/xchsypp84zbzof3ofu_s.jpg ");
Pola. add ("http://img.overpic.net/thumbs/c/4/8/xc48uw6026mq5kuk2jzxg_s.jpg ");
Pola. add ("http://img.overpic.net/thumbs/s/3/z/xs3zwhazx5db43ux8npmf_s.jpg ");
Pola. add ("http://img.overpic.net/thumbs/l/n/u/xlnunh3z65oz4de4y5qs_s.jpg ");
Pola. add ("http://img.overpic.net/thumbs/s/z/p/xszpf2cqu4la46wvve9n_s.jpg ");
Pola. add ("http://img.overpic.net/thumbs/7/q/k/x7qk2am7qzgyi5s03bdxi_s.jpg ");
Pola. add ("http://img.overpic.net/thumbs/ B /7/w/xb7wghi7ivyxmbz7tb72e_s.jpg ");
Pola. add ("http://img.overpic.net/thumbs/g/d/5/xgd532glxuyc7mmy2h99p_s.jpg ");
Pola. add ("http://img.overpic.net/thumbs/ I /m/f/ximfw3938obxo33qqjg_s.jpg ");
Pola. init ();
/* Fade-out effect. The effect can be done by yourself and added by yourself. This is just a classic one (the effect must accept a parameter, that is, every small p, which we can process )*/
Var fadeOut = function (p ){
P. style. zIndex = 1;
P. style. opacity = 0;
P. style. filter = "Alpha (Opacity = '0 ')";
// P. filters. alpha. opacity = 20;
(Function (p, opacity ){
Var hide = function ()
{
Opacity = opacity + 0.1;
P. style. opacity = opacity;
P. style. filter = "Alpha (Opacity = '" + opacity * 100 + "')";
If (opacity <1)
{
SetTimeout (hide, 100 );
}
}
Hide ();
}) (P, 0)

};


/* Add fade-out effect (you can add many effects and set the sequence of effects )*/
Pola. addswitchMethod (fadeOut, "show ");

/* Add an effect matrix. Check the distribution of matrix numbers to see the approximate result. If the number is small, the effect will first occur */
Pola. addswitchTable ([1, 2, 3, 4],
[2, 3, 4, 5],
[3, 4, 5, 6],
[4, 5, 6, 7]);
Pola. addswitchTable ([1, 2, 2],
[2, 1, 2, 1],
[1, 2, 2],
[2, 1, 2, 1]);
Pola. addswitchTable ([1, 2, 3, 4],
[1, 2, 3, 4],
[1, 2, 3, 4],
[1, 2, 3, 4]);
Pola. addswitchTable ([1, 2, 3, 4],
[,],
[11,16, 15,6],
[10, 9, 8, 7]);
Pola. addswitchTable ([1, 2, 3, 4],
[8, 7, 6, 5],
[5, 6, 7, 8],
[,]);
Pola. addswitchTable ([1, 2, 3, 1],
[3, 4, 4, 2],
[2, 4, 3],
[1, 3, 2, 1]);
Pola. addswitchTable ([1, 1, 4, 4],
[1, 1, 4, 4],
[3, 3, 2, 2],
[3, 3, 2, 2]);
Pola. addswitchTable ([1, 10, 4, 14],
[9, 3, 13, 7],
[2, 12, 6, 16],
[11,5, 15,8]);

/* Add an event handler to each button. This part is not configured with PhotoLook */
Var buttonautoPlay = document. getElementById ("autoPlay ");
ButtonautoPlay. onclick = function (){
Pola. autoPlay (4000 );
}
Var buttonstopAutoPlay = document. getElementById ("stopAutoPlay ");
ButtonstopAutoPlay. onclick = function (){
Pola. stopAutoPlay ();
}
Var buttonturn = document. getElementById ("turn ");
Var textBox = document. getElementById ("Text1 ");
Buttonturn. onclick = function (){
Pola. goTo (parseInt (textBox. value ));
}
Var buttonprevious = document. getElementById ("previous ");
Buttonprevious. onclick = function (){
Pola. previous ();
}
Var buttonnext = document. getElementById ("next ");
Buttonnext. onclick = function (){
Pola. next ();
}

Download component code