Non-jQuery achieves scattered pictures on the table, click to enlarge the LightBox effect,

Non-jQuery achieves scattered pictures on the table, click to enlarge the LightBox effect,

As follows:

Demo address http://xueduany.github.io/KitJs/KitJs/demo/Lightbox-Gallery/demo.html

The implementation principle is very simple. The basic html is as follows:

Copy codeThe Code is as follows:
<Div id = "gallery">
<Div class = "item">
<A class = "kitLightBox" href = "img/original/blue-green-nature.jpg" target = "_ blank"> </a>
<Div class = "desc">
Blue-green-nature
</Div>
</Div>
<Div class = "item">
<A class = "kitLightBox" href = "img/original/2-breast-stroke.jpg" target = "_ blank"> </a>
<Div class = "desc">
2-breast-stroke
</Div>
</Div>
<Div class = "item">
<A class = "kitLightBox" href = "img/original/farm.jpg" target = "_ blank"> </a>
<Div class = "desc">
Farm
</Div>
</Div>
<Div class = "item">
<A class = "kitLightBox" href = "img/original/bahnhoff.jpg" target = "_ blank"> </a>
<Div class = "desc">
Bahnhoff
</Div>
</Div>

......

Define a tablecloth, that is, div id = "gallery"

Then, in order to arrange the photo album in a vertical column, div class = "item", which uses a link to package the image.

Next, we want to achieve the effect of photo dispersion,

Copy codeThe Code is as follows:
$ K (function (){
$ K ('. item', $ k (' # gallery '). each (function (){
Javask(this).css ({
Top: $ kit. math. rand ($ k ('# gallery'). innerHeight () + 'px ',
Left: $ kit. math. rand ($ k ('# gallery'). innerWidth () + 'px ',
'-Webkit-transform': 'rotate ('+ $ kit. math. rand (-40, 40) + 'deg )'
});
})

Here, $ k is the method of kit, similar to jQuery's $, and the API is exactly the same. This code indicates finding the div of all items and setting it to absolute positioning. the height and width of the tablecloth are used, generate random numbers and arrange them. For css3, use the rotate attribute unique to css3 to rotate a certain angle.

At this time, the photos began to be dispersed to achieve the effect shown in Figure 1. Next, let's look at the LightBox effect,

Copy codeThe Code is as follows:
$ K (function (){
$ K ('. item', $ k (' # gallery '). each (function (){
Javask(this).css ({
Top: $ kit. math. rand ($ k ('# gallery'). innerHeight () + 'px ',
Left: $ kit. math. rand ($ k ('# gallery'). innerWidth () + 'px ',
'-Webkit-transform': 'rotate ('+ $ kit. math. rand (-40, 40) + 'deg )'
});
}). PushStack ('A. kitlightbox'). each (function (){
New $ kit. ui. LightBox ({
El: this
}). Init ();
});
});

The complete code is as above. For the link of each image, use the lightbox UI widget of kitjs to instantiate the image, and click the desired effect. The animation effect is used to open the image. ^_^ Have a good time!

LightBox source https://github.com/xueduany/KitJs/blob/master/KitJs/src/js/widget/LightBox/lightbox.js

Source code https://github.com/xueduany/KitJs/blob/master/KitJs/demo/Lightbox-Gallery/demo.html

This article is based on the KITJS framework. If you are not familiar with it, we will introduce this great js framework in detail in subsequent articles.