The main content of this article is to explain the implementation of image corridor-gallery.
First, create the jquery. Gallery. js plug-in file to build the program skeleton.
(Function ($ ){
$. FN. Gallery = function (){
Return this. Each (function (){
VaR self = $ (this );
Self. Click (function (){
});
});
}
}) (Jquery );
Create an HTML file and use the plug-in we created.
<!DOCTYPE html>Now let's start to consider how to display the enlarged image when you click an image. In fact, the enlarged image is not the original image, but a new image is cloned, added to the page, and displayed. In addition, the center alignment of a large image is achieved by calculating the page height, width, image height, width, and scroll bar position. The improved code is as follows:
(Function ($) {$. FN. gallery = function () {return this. each (function () {// save this variable to self to avoid program errors // For the reason, in the previous chapter, we briefly mentioned that this represents different var self =$ (this) objects in the upper and lower sections of the function; // set the height of the thumbnail to 100 in a unified manner (you can adjust it according to your personal needs, or options are provided.) self. height (100); // Add the Click Event self. click (function () {// remove the object whose ID is myimggallery. In fact, this object is actually a large image object. // each time you click, to remove the larger image generated during the last click ('# myimggallery '). remove (); self. clone () // jquery's clone method, clone the image. ATTR ('id', 'myimggallery ') // set the ID to myimggallery. height ($ (window ). height ()/2) // set the Image Height to half the height of the available area of the page (you can set it to another value as needed ). CSS ({position: 'absolute '}). prependto ('body') // Add a large image to the body object // use the self-created center plug-in to center the image. // note, you must add the clone object to the body before calling the center method. Otherwise, the width and height of the clone object are both 0. center (). click (function () {// Add a click event for a large image $ (this ). remove (); // when you click a large image, delete itself}) ;}) ;}; $. FN. center = function () {return this. each (function () {locate (this).css ({// set absolute positioning, so that it will float at the top (you can set the zindex attribute if necessary) position: 'absolute ', // set the vertical center alignment top: ($ (window ). height ()-$ (this ). height ()/2 + $ (window ). scrolltop () + 'px ', // sets the horizontal center alignment left: ($ (window ). width ()-$ (this ). width ()/2 + $ (window ). scrollleft () + 'px '}) ;};}) (jquery );
Now, the content of today is over.
Demo: jquery.plugin.gallery.zip
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
