Parts to be improved
1. The large image can be automatically scaled according to the resolution of the browser, and is currently displayed in accordance with the fixed width and height, which is hidden beyond part.
2. The big picture is now directly loaded all, if the picture is many, the experience is not good. Can be loaded asynchronously, or delayed loading, which can be implemented with the jquery control lazyload.
3. The thumbnail is based on the parameters of the upload set directly generated, if it is a vertical picture, will appear compressed. You can change to show only local, more than partially hidden.
4. The slide of the thumbnail list uses the Jcarousellite plug-in, and if the slide is extracted as a plugin, it needs to be integrated into one.
5. The current large area and thumbnail region is relatively independent, the advantage is more intuitive, you can arbitrarily change the display location, the disadvantage is that the amount of HTML code, unlike some plug-ins, only need $ ("#ID") on it.
JS Code
Copy Code code as follows:
<script type= "Text/javascript" >
var currentimage;
var currentindex =-1;
Show large image (parameter index count starting from 0)
function ShowImage (index) {
Update current Picture page number
$(". Countercurrent "). HTML (index + 1);
Hide or show left and right mouse gestures
var len = $ (' #OriginalPic img '). length;
if (index = = len-1) {
$ ("#aNext"). Hide ();
}
else {
$ ("#aNext"). Show ();
}
if (index = = 0) {
$ ("#aPrev"). Hide ();
}
else {
$ ("#aPrev"). Show ();
}
Show large image
if (Index < $ (' #OriginalPic img '). Length) {
var indeximage = $ (' #OriginalPic p ') [index];
Hide the current diagram
if (currentimage) {
if (currentimage!= indeximage) {
$ (currentimage). CSS (' Z-index ', 2);
$ (currentimage). fadeout (0, function () {
$ (this). css ({' Display ': ' None ', ' Z-index ': 1})
});
}
}
Display user-selected graphs
$ (indeximage). Show (). CSS ({' Opacity ': 0.4});
$ (indeximage). Animate ({opacity:1}, {duration:200});
Update variables
Currentimage = Indeximage;
Currentindex = index;
Remove and add highlighting
$ (' #ThumbPic img '). Removeclass (' active ');
$ ($ (' #ThumbPic img ') [index]). addclass (' active ');
Sets the height of the left and right mouse gesture area
var tempheight = $ ($ (' #OriginalPic img ') [index]). Height ();
$ (' #aPrev '). Height (tempheight);
$ (' #aNext '). Height (tempheight);
}
}
Next one
function Shownext () {
var len = $ (' #OriginalPic img '). length;
var next = Currentindex < (len-1)? Currentindex + 1:0;
ShowImage (next);
}
Last one
function Showprep () {
var len = $ (' #OriginalPic img '). length;
var next = Currentindex = 0? (len-1): currentIndex-1;
ShowImage (next);
}
Next Event
$ ("#aNext"). Click (function () {
Shownext ();
if ($ (". Active"). Position (). Left >= 144 * 5) {
$ ("#btnNext"). Click ();
}
});
Previous Event
$ ("#aPrev"). Click (function () {
Showprep ();
if ($ (". Active"). Position (). Left <= 144 * 5) {
$ ("#btnPrev"). Click ();
}
});
Initializing events
$(". Originalpicborder "). Ready (function () {
Shownext ();
Binding Thumbnail Click event
$ (' #ThumbPic li '). bind (' click ', Function (e) {
var count = $ (this). attr (' rel ');
ShowImage (parseint (count)-1);
});
});
</script>
Online Demo: http://demo.jb51.net/js/2011/Gallery/index.html
Packaged Downloads:/201102/yuanma/gallery_jb51.rar
