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

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.