jquery implements a simple picture viewer _jquery

DIY a picture viewer in your project. Because the initial code is not their own, but it was changed on the top did not get very beautiful. After a while there is time to rewrite the style and encapsulation, as a spare just accumulate it. If there are children's shoes useful, can be modified on this basis, easier, the code is relatively simple

There are several main features of the picture viewer:

　1. Display picture and picture information (picture name, publisher, etc.)

2. Switch pictures

3. Close Picture Viewer

Initialization interface function pictureViewer.init:function (PICINFOS,TAPNUMBER,ISBIG)

Picinfos: Incoming picture group information, must be formatted as follows
 var Picinfos = [
  {
   URL]: "Default.png",
   "Data": [
   {
    "key": "Name:" ",
    " value ":" Test Picture "
   },
   {
    " key ":" Publisher: ",
    " value ":" Chua "
   }
   ]
  },
  {
   "url": "Test.jpeg",
   "Data": [
   {
    "key": "Name",
    "value": "Test Picture"
   },
   {
    "key": " Publisher: "", "
    value": "The flood floods the downwind h"
   },
   {
    "key": "Other information of this picture",
    "value": "vsfsgsdgfds234323424"
   }
   ]
  },
  ...
 ] Style for incoming arguments 

tapnumber: The index of the picture to display in the picture list, must, starting at 0
isbig: whether to use a larger view, default is false, optional
HTML and CSS source code is as follows (an example is followed)

<! DOCTYPE html>  

JS source code is as follows

PictureViewer = {Picinfos: [], curpicindex:0, isbig:false,//big picture view? The default is False. The default picture display area is 40% of the window width, and the larger image is 80% imgtapselector: ". Imgtapdetail", Init:function (picinfos,tapnumber,isbig) {var _this = th

  is;
  _this.picinfos = Picinfos;
  _this.curpicindex = Tapnumber;
  _this.isbig = Isbig;
  
  Tapimginit ();
    The picture viewer initializes function Tapimginit () {//page code and events only need to initialize once (!_this.guid) {_this.guid = 1;
    Inittapimghtml ();
     $ (document). On ("click", "#rightTap", function () {_this.curpicindex++;
     if (_this.curpicindex = = _this.picinfos.length) {_this.curpicindex = 0;
     $ ("#tapContent"). HTML ("") Tapimg ()}). On ("click", "#leftTap", function () {_this.curpicindex--;
     if (_this.curpicindex < 0) {_this.curpicindex = _this.picinfos.length-1;
    $ ("#tapContent"). HTML ("") tapimg (); . On ("click", "#closeTap", function () {$ (_this.imgtapselector). Hide ("Fast")})} var offtop = top.document.b Ody.scrolltop | | Top.docUment.documentElement.scrollTop; $ (' #imgTapPanel '). CSS ("Margin-top", _this.isbig?) (
   OFFTOP&GT;30?OFFTOP:30): Offtop +) tapimg ();
  $ (_this.imgtapselector). Show ("Fast"); ///Initialize the image Viewer's HTML code function inittapimghtml () {var $detailText = ' <div class= ' Page-secshadow ' > ' + ' <d IV id= "Imgtappanel" class= "Page-shadowcontent ' + (_this.isbig?") Widget-big ":" ") + ' > ' + ' <div id=" Lefttap "class=" Lefttap "></div> ' + ' <div id=" Righttap "class=" R Ighttap "></div> ' + ' <div id=" Closetap "class=" Closetap "></div> ' + ' <div class=" widget Row "
    ><div class= "Widget-body" > ' + ' <div class= ' widget-detail row ' > ' + ' <div class= ' imgshow ' > ' + ' <span></span> ' + ' </div> ' + ' <di  
   
   V id= "tapcontent" ></div> ' + ' </div></div></div></div></div> '; $ (_this.imgtapselector). HTML ($detailText);
   HoverButton ("#leftTap", 0, 0, 0, " -80px");
   HoverButton ("#rightTap", " -80px", 0, " -80px", " -80px");
  HoverButton ("#closeTap", 0, " -165px", " -60px", " -165px"); //Add the left and right toggle icon, and turn off the icon's hover response event.  This can actually play CSS better some function HoverButton (ID, x, y, A, B) {$ (id). Hover (function () {$ (this). CSS (' background-position ', A + ' + B '},function () {$ (this). CSS (' background-position ', x + ' + Y)}}//refresh current picture and picture information function TapI MG () {var reg =/[::]$/, Lefttap = $ ("#leftTap"), Righttap = $ ("#rightTap"), Imgtap = $ ("#tapImg"), content

   Tap = $ ("#tapContent");
   LEFTTAP.CSS ("Display", "block");
   RIGHTTAP.CSS ("Display", "block");
    if (_this.picinfos.length = = 1) {lefttap.css ("display", "none");
   RIGHTTAP.CSS ("Display", "none");

   } imgtap.attr ("src", _this.picinfos[_this.curpicindex].url);

   var data = _this.picinfos[_this.curpicindex].data, datalength = data.length, $text = ""; for (var i=0 i<datalength; i++) {$text + = ' <divclass= "Form-group" > ' + ' <label class= "Detail-labelstyle" > ' +data[i].key.replace (Reg, "") + ':</label> '
   + ' <span id= ' spanloginname ' class= ' detail-spanstyle ' > ' +data[i].value+ ' </span> ' + ' </div> ';
   };

   Contenttap.empty (). append ($text); settimeout (function () {if (_this.isbig && imgtap.height () >) {imgtap.parent (). attr ("style", "Height:
    Inherit ");
    }else{imgtap.parent (). Removeattr ("style");
  }},1);
 }
 }
}

Hopefully this article will help you learn about JavaScript programming.