jquery plug-in production picture gallery gallery_jquery

First create the jquery.gallery.js plug-in file and build the program skeleton.

Copy code The code is as follows:

(function ($) {
$.fn.gallery = function () {
return this.each(function () {
var self = $(this);
self.click(function () {

});
　});
　}
})(jQuery);

Create an html file using the plug-in we created.

Copy code The code is as follows:

< ;img src="Images/orderedList2.png" alt="" />


　

Now we start to consider how to achieve the effect of enlarging the image when clicking on the image. In fact, the enlarged picture we display is not the original picture, but we clone a new picture, add it to the page and display it. In addition, by calculating the height and width of the page, the height and width of the image, and the position of the scroll bar, the center alignment of the large image is achieved. Let’s look at the improved code below:

Copy the code The code is as follows:

( function ($) {
$.fn.gallery = function () {
return this.each(function () {
//Save this variable to self in order to avoid program errors
//As for the reason, the previous chapter briefly mentioned that the objects represented by this in the upper and lower functions are different
var self = $(this);
//Set the height of the small picture to 100 (according to personal needs Can be adjusted, or provide options)
self.height(100);

//Add click event
self.click(function () {
//Remove the id as myImgGallery The object, in fact, this object is the large image object
//Every time you click, the large image generated by the last click must be removed
$('#myImgGallery').remove();

self.clone() //jquery's clone method, clone 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 also set it to other values ​​according to your needs)
.css({
position: 'absolute'
})
.prependTo('body')//Add the large image to the body object
//Use the center plug-in you created to center the image
//Note, be sure to add the clone object to The center method can only be called after the body, otherwise the width and height of the clone object are both 0
.center()
.click(function () {//Add the click event of the large image
$(this). remove(); //When clicking on the large image, delete itself
});
});
});
};
$.fn.center = function () {
return this.each(function () {
$(this).css({
//Set absolute positioning so that it will float on 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);

Okay, that’s the end of today’s content.

demo download address: jQuery.plugin.gallery