Because I often take pictures of high-definition photos, I always think that the computer screen is too small to look at, and it is not convenient to enlarge the details. Since HTML5 supports full screen, why not? So I wrote such a small stuff to meet my own needs to view the big picture in high definition.
Features: Supports automatic full-screen display on HTML5 fullscreen API browsers. You can double-click the zoom icon to conveniently view the quality of the source image.
HTML:
< Div ID = "Container" > < A Href = "Big.jpg" REL = "Fullscreengallery" Title = "That year, the lotus blossoms filled the pond" > < IMG SRC = "Thumb.jpg" Width = "200" > </ A > < A Href = "Big.jpg" REL = "Fullscreengallery" Title = "That year, the lotus blossoms filled the pond" > < IMG SRC = "Thumb.jpg" Width = "200" > </ A > </ Div >
Add the rel = "fullscreengallery" attribute to the link a. href is the address of the larger image.
JS call:
<SCRIPT type = "text/JavaScript">$ ('# Container a [rel = "fullscreengallery"]'). Fullscreengallery ();</SCRIPT>
View demo
GitHub address: https://github.com/yaojaa/jQuery-full-screen-gallery