Home > Developer > JavaScript
First, create the jquery. gallery. js plug-in file to build the program skeleton.
Copy codeThe Code is as follows:
(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.
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Script type = "text/javascript" src = "Scripts/jquery-1.6.2.js"> </script>
<Script type = "text/javascript" src = "Scripts/jquery. gallery. js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ('Img '). gallery ();
});
</Script>
</Head>
<Body>
</Body>
</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:
Copy codeThe Code is as follows:
(Function ($ ){
$. Fn. gallery = function (){
Return this. each (function (){
// Save this variable to self to avoid program errors
// As for the reason, the previous chapter briefly mentions that this represents different objects in the upper and lower sections of the function.
Var self = $ (this );
// Set the height of the thumbnail to 100 (you can adjust the height based on your needs, or provide options)
Self. height (100 );
// Add a click event
Self. click (function (){
// Remove the object whose id is myImgGallery. In fact, this object is a large image object.
// Remove the large image generated during the last click each time
$ ('# 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 of the available area height of the page (you can set it to another value as needed)
. Css ({
Position: 'abort'
})
. PrependTo ('body') // Add a large image to the body object
// Use the self-created center plug-in to center Images
// 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 (){
Certificate (this).css ({
// Set absolute positioning so that it will float at the top (you can set the zindex attribute if necessary)
Position: 'absolute ',
// Set vertical center alignment
Top: ($ (window). height ()-$ (this). height ()/2 + $ (window). scrollTop () + 'px ',
// Set horizontal center alignment
Left: ($ (window). width ()-$ (this). width ()/2 + $ (window). scrollLeft () + 'px'
});
});
};
}) (JQuery );
Now, the content of today is over.
Demo: jQuery. plugin. gallery
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
