To be improved
1. The large image can be scaled automatically based on the browser resolution. Currently, it is displayed in a fixed width and height, and the excess part is hidden.
2. The large image is loaded directly into all images. If there are many images, the experience is poor. It can be changed to asynchronous loading or delayed loading. This can be implemented using the jquery control lazyload.
3. thumbnails are directly generated based on the parameters set during the upload. If they are vertical images, they will be compressed. You can change it to show only the local area, and hide the excess part.
4. the slide of the thumbnail list uses the jcarousellite plug-in. If you extract a slide as a plug-in, you need to integrate it into one.
5. currently, the large image area and the thumbnail area are relatively independent. The advantage is that they are relatively intuitive and you can change the display position on your own. The disadvantage is that there is a large amount of HTML code, unlike some plug-ins, you only need $ ("# ID.
JS Code
Copy codeThe Code is as follows: <script type = "text/javascript">
Var currentImage;
Var currentIndex =-1;
// Display the large image (the index parameter starts counting from 0)
Function showImage (index ){
// Update the current image page
$ (". CounterCurrent" 2.16.html (index + 1 );
// Hide or show the mouse gesture to the left to the right
Var len = $ ('# OriginalPic img'). length;
If (index = len-1 ){
$ ("# ANext"). hide ();
}
Else {
$ ("# ANext"). show ();
}
If (index = 0 ){
$ ("# APrev"). hide ();
}
Else {
$ ("# APrev"). show ();
}
// Display a large image
If (index <$ ('# OriginalPic img'). length ){
Var indexImage = $ ('# OriginalPic p') [index];
// Hide the current Graph
If (currentImage ){
If (currentImage! = IndexImage ){
((Currentimage0000.css ('z-Index', 2 );
$ (CurrentImage). fadeOut (0, function (){
Certificate (this).css ({'display': 'none', 'z-Index': 1 })
});
}
}
// Display the selected Graph
Certificate (indeximageapps.show().css ({'opacity ': 0.4 });
$ (IndexImage). animate ({opacity: 1 },{ duration: 200 });
// Update the variable
CurrentImage = indexImage;
CurrentIndex = index;
// Remove and add highlight
$ ('# ThumbPic img'). removeClass ('active ');
$ ('# ThumbPic img') [index]). addClass ('active ');
// Set the height of the gesture area to the left to the right
// Var tempHeight = $ ('# OriginalPic img') [index]). height ();
// $ ('# APrev'). height (tempHeight );
// $ ('# ANext'). height (tempHeight );
}
}
// Next
Function ShowNext (){
Var len = $ ('# OriginalPic img'). length;
Var next = currentIndex <(len-1 )? CurrentIndex + 1: 0;
ShowImage (next );
}
// Upload
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 ();
}
});
// Initialization event
$ (". OriginalPicBorder"). ready (function (){
ShowNext ();
// Bind a 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
Package and download:/201102/yuanma/Gallery_jb51.rar
