{"id":43498,"date":"2018-04-02T21:01:24","date_gmt":"2018-04-02T13:01:24","guid":{"rendered":"http:\/\/www.hongkiat.com\/blog\/?p=43498"},"modified":"2022-07-17T21:57:52","modified_gmt":"2022-07-17T13:57:52","slug":"viewer-js-images-script","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/viewer-js-images-script\/","title":{"rendered":"Viewer &mdash; Simple Image Zooming Plugin for Vanilla JS &amp; jQuery"},"content":{"rendered":"<p>You can do a quick search and find <a href=\"https:\/\/www.hongkiat.com\/blog\/responsive-lightbox-library\/\">dozens of libraries<\/a> for image lightboxes, slideshows, galleries, you name it.<\/p>\n<p>One of the newest libraries that caught my attention is <a href=\"https:\/\/fengyuanchen.github.io\/viewer\/\" target=\"_blank\" rel=\"noopener\">Viewer<\/a>. Currently in version 0.6, it\u2019s still a project under development, but this image <strong>plugin\u2019s design and features<\/strong> are both phenomenal.<\/p>\n<p class=\"note\"><strong>Read Also:<\/strong> <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/wp-image-performance-plugins\/\" rel=\"noopener\">9 WordPress Plugins to Improve Images Performance<\/a><\/p>\n<p>From the homepage, you\u2019ll find a live demo with various image styles. You can choose to <strong>set your own gallery to different features<\/strong> like direct zooming with a single image, or a lengthy slideshow housing many images.<\/p>\n<p>This also comes with an \u201cinline mode\u201d that attaches the image viewer to an element on the page. So when the <strong>user clicks a thumbnail it\u2019ll zoom the photo<\/strong> inside that element rather than on top of the entire page.<\/p>\n<figure><a href=\"https:\/\/fengyuanchen.github.io\/viewer\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/viewer-js-images-script\/01-viewer-js-jquery-image-plugin.jpg\" alt=\"viewer image script\" width=\"1000\" height=\"607\"><\/a><\/figure>\n<p>You\u2019ll find buttons for pretty much everything: rotations, extra captions, and full 1:1 zooming to get a clear view of hi-res photos.<\/p>\n<p>With a few JS options <strong>you decide how the Viewer script should work<\/strong>. Don\u2019t want to let visitors zoom into pictures? No problem.<\/p>\n<p>You can also disable the slideshow feature, or just disable the next\/prev buttons in the UI. Same goes for the <strong>thumbnail pics<\/strong> that appear when the slideshow is in full view.<\/p>\n<figure><a href=\"https:\/\/fengyuanchen.github.io\/viewer\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/viewer-js-images-script\/02-viewer-plugin-images-example.jpg\" alt=\"viewer image slideshow plugin\" width=\"1000\" height=\"593\"><\/a><\/figure>\n<p>Also, note this script has a <a href=\"https:\/\/github.com\/fengyuanchen\/viewerjs\" target=\"_blank\" rel=\"noopener\">non-jQuery version<\/a> if you prefer vanilla JS. Both plugins work the same way and they\u2019re both in active development. Everything you need to customize this interface can be found on the <a href=\"https:\/\/github.com\/fengyuanchen\/viewer\" target=\"_blank\" rel=\"noopener\">main GitHub page<\/a>.<\/p>\n<p>If you\u2019re big into coding your own UIs then Viewer is a very cool plugin. It offers so <strong>much control over each slideshow\u2019s behavior<\/strong> that you can restructure this into pretty much anything you want.<\/p>\n<p>Web developers will have a field day working with all the options in this free image script.<\/p>","protected":false},"excerpt":{"rendered":"<p>You can do a quick search and find dozens of libraries for image lightboxes, slideshows, galleries, you name it. One of the newest libraries that caught my attention is Viewer. Currently in version 0.6, it\u2019s still a project under development, but this image plugin\u2019s design and features are both phenomenal. Read Also: 9 WordPress Plugins&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[911,4406],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Viewer &mdash; Simple Image Zooming Plugin for Vanilla JS &amp; jQuery - Hongkiat<\/title>\n<meta name=\"description\" content=\"You can do a quick search and find dozens of libraries for image lightboxes, slideshows, galleries, you name it. One of the newest libraries that caught\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/viewer-js-images-script\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Viewer &mdash; Simple Image Zooming Plugin for Vanilla JS &amp; jQuery\" \/>\n<meta property=\"og:description\" content=\"You can do a quick search and find dozens of libraries for image lightboxes, slideshows, galleries, you name it. One of the newest libraries that caught\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/viewer-js-images-script\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2018-04-02T13:01:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-17T13:57:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/viewer-js-images-script\/01-viewer-js-jquery-image-plugin.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/viewer-js-images-script\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/viewer-js-images-script\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Viewer &mdash; Simple Image Zooming Plugin for Vanilla JS &amp; jQuery\",\"datePublished\":\"2018-04-02T13:01:24+00:00\",\"dateModified\":\"2022-07-17T13:57:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/viewer-js-images-script\\\/\"},\"wordCount\":322,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/viewer-js-images-script\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/viewer-js-images-script\\\/01-viewer-js-jquery-image-plugin.jpg\",\"keywords\":[\"jQuery\",\"vanilla\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/viewer-js-images-script\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/viewer-js-images-script\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/viewer-js-images-script\\\/\",\"name\":\"Viewer &mdash; Simple Image Zooming Plugin for Vanilla JS &amp; jQuery - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/viewer-js-images-script\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/viewer-js-images-script\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/viewer-js-images-script\\\/01-viewer-js-jquery-image-plugin.jpg\",\"datePublished\":\"2018-04-02T13:01:24+00:00\",\"dateModified\":\"2022-07-17T13:57:52+00:00\",\"description\":\"You can do a quick search and find dozens of libraries for image lightboxes, slideshows, galleries, you name it. One of the newest libraries that caught\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/viewer-js-images-script\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/viewer-js-images-script\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/viewer-js-images-script\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/viewer-js-images-script\\\/01-viewer-js-jquery-image-plugin.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/viewer-js-images-script\\\/01-viewer-js-jquery-image-plugin.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/viewer-js-images-script\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Viewer &mdash; Simple Image Zooming Plugin for Vanilla JS &amp; jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Viewer &mdash; Simple Image Zooming Plugin for Vanilla JS &amp; jQuery - Hongkiat","description":"You can do a quick search and find dozens of libraries for image lightboxes, slideshows, galleries, you name it. One of the newest libraries that caught","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/viewer-js-images-script\/","og_locale":"en_US","og_type":"article","og_title":"Viewer &mdash; Simple Image Zooming Plugin for Vanilla JS &amp; jQuery","og_description":"You can do a quick search and find dozens of libraries for image lightboxes, slideshows, galleries, you name it. One of the newest libraries that caught","og_url":"https:\/\/www.hongkiat.com\/blog\/viewer-js-images-script\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2018-04-02T13:01:24+00:00","article_modified_time":"2022-07-17T13:57:52+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/viewer-js-images-script\/01-viewer-js-jquery-image-plugin.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/viewer-js-images-script\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/viewer-js-images-script\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Viewer &mdash; Simple Image Zooming Plugin for Vanilla JS &amp; jQuery","datePublished":"2018-04-02T13:01:24+00:00","dateModified":"2022-07-17T13:57:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/viewer-js-images-script\/"},"wordCount":322,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/viewer-js-images-script\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/viewer-js-images-script\/01-viewer-js-jquery-image-plugin.jpg","keywords":["jQuery","vanilla"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/viewer-js-images-script\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/viewer-js-images-script\/","url":"https:\/\/www.hongkiat.com\/blog\/viewer-js-images-script\/","name":"Viewer &mdash; Simple Image Zooming Plugin for Vanilla JS &amp; jQuery - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/viewer-js-images-script\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/viewer-js-images-script\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/viewer-js-images-script\/01-viewer-js-jquery-image-plugin.jpg","datePublished":"2018-04-02T13:01:24+00:00","dateModified":"2022-07-17T13:57:52+00:00","description":"You can do a quick search and find dozens of libraries for image lightboxes, slideshows, galleries, you name it. One of the newest libraries that caught","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/viewer-js-images-script\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/viewer-js-images-script\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/viewer-js-images-script\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/viewer-js-images-script\/01-viewer-js-jquery-image-plugin.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/viewer-js-images-script\/01-viewer-js-jquery-image-plugin.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/viewer-js-images-script\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Viewer &mdash; Simple Image Zooming Plugin for Vanilla JS &amp; jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-bjA","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/43498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=43498"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/43498\/revisions"}],"predecessor-version":[{"id":60502,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/43498\/revisions\/60502"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=43498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=43498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=43498"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=43498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}