JQuery implements a simple image viewer and jquery implements a viewer.

JQuery implements a simple image viewer and jquery implements a viewer.

The project diy an image viewer. Because the initial code is not your own, but it is not very beautiful after being changed. If you have time to rewrite the style and encapsulation, just accumulate as a slave. If some shoes are useful, you can modify them on this basis, which is easier and the code is simpler.

Image Viewer provides the following functions:

　1. display image and Image Information (image name, publisher, etc)

2. Switch Images

3. Disable Image Viewer

Initialize the interface function pictureViewer. init: function (picInfos, tapNumber, isBig)

PicInfos: required. Format: var picInfos = [{"url": "default.png", "data": [{"key": "name :", "value": "Test image" },{ "key": "publisher:", "value": "chua"}] },{ "url": "test.jpeg ", "data": [{"key": "name", "value": "Test image" },{ "key": "publisher:", "value ": "h" },{ "key": "other information about this image", "value": "vsfsgsdgfds234323424"}]},...] // input the parameter Style

TapNumber:The index of the image to be displayed in the image list. required, starting from 0.
IsBig:Whether to use a larger image. The default value is false. Optional.
The source code of html and css is as follows (an example is provided later)

<! DOCTYPE html> 
The source code of js is as follows:

PictureViewer = {picInfos: [], curPicIndex: 0, isBig: false, // view a large image? The default value is false. The default image display area is 40% of the window width, and the larger image is 80% imgTapSelector :". imgTapDetail ", init: function (picInfos, tapNumber, isBig) {var _ this = this; _ this. picInfos = picInfos; _ this. curPicIndex = tapNumber; _ this. isBig = isBig; tapImgInit (); // Image Viewer initialization function tapImgInit () {// Page code and events only need to be initialized once. if (! _ This. guid) {_ this. guid = 1; initTapImgHtml (); $ (document ). on ("click", "# rightTap", function () {_ this. curPicIndex ++; if (_ this. curPicIndex = _ this. picInfos. length) {_ this. curPicIndex = 0 ;}$ ("# tapContent" pai.html ("") tapImg ()}). on ("click", "# leftTap", function () {_ this. curPicIndex --; if (_ this. curPicIndex <0) {_ this. curPicIndex = _ this. picInfos. length-1 ;}$ ("# tapContent" ).html ("") tapImg ();}). on ("cli Ck "," # closeTap ", function () {$ (_ this. imgTapSelector ). hide ("fast")} var offTop = top.doc ument. body. scrollTop | top.document.doc umentElement. scrollTop; ('{imgtappanel'}.css ("margin-top", _ this. isBig? (OffTop> 30? OffTop: 30): offTop + 100) tapImg (); $ (_ this. imgTapSelector ). show ("fast") ;}// initialize the html code function initTapImgHtml () of the Image Viewer () {var $ detailText = '<div class = "page-secShadow">' + '<div id = "imgTapPanel" class = "page-shadowContent' + (_ this. isBig? "Widget-big ":"") + '">' + '<div id =" leftTap "class =" leftTap "> </div>' + '<div id =" rightTap "class =" rightTap "> </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> '+' <div id =" tapContent "> </div> '+' </div> </d Iv> </div> '; dimensions (_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/right switch icon and close the hover RESPONSE event of the icon. In fact, this can play A better function hoverButton (id, x, y, A, B) {$ (id) in css ). hover (function () {detail (this).css ('background-position', A + ''+ B)}, function () {detail (this).css ('background-position ', x + ''+ y)}) // refresh the current image and image information function tapImg () {var reg =/[:] $ /, leftTap = $ ("# leftTap"), rightTap = $ ("# rightTap"), imgTap = $ ("# tapImg"), contentTap = $ ("# 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 + = '<div class = "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 () & gt; 400) {imgTap. parent (). attr ("style", "height: inherit");} else {imgTap. parent (). removeAttr ("style") ;}}, 1 );}}}
I hope this article will help you learn about javascript programming.
Articles you may be interested in:

 

 
  
Image Viewer built with CSS + JS
 
  
Javascript web page Image Viewer (compatible with IE and FF) allows you to zoom in and out images
 
  
Android-implemented Image Viewer instances that can adjust transparency