{"id":20393,"date":"2014-05-28T15:01:57","date_gmt":"2014-05-28T07:01:57","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=20393"},"modified":"2025-04-04T01:53:59","modified_gmt":"2025-04-03T17:53:59","slug":"zoom-effect-images-zoomer","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/zoom-effect-images-zoomer\/","title":{"rendered":"Apply Smooth Zoom Effect To Images With Zoomer"},"content":{"rendered":"<p>There\u2019s a quote that goes, <strong>\u201ca picture is worth a thousand words.\u201d<\/strong> In web design, it becomes even more relevant. Especially when it\u2019s about showcasing products, like in an <a href=\"https:\/\/www.hongkiat.com\/blog\/essential-things-ecommerce-site-should-have\/\">e-commerce site<\/a> for example. People need to get a clear grasp and be able to look at the product in a <a href=\"https:\/\/www.hongkiat.com\/blog\/focusing-on-visual-content\/\">visual manner<\/a> before they make a purchase after all.<\/p>\n<p>Making the image as large as possible can\u2019t solve this problem, as it will also take a huge amount of available space. Therefore the best choice is to make the image zoomable. With <strong>Zoomer<\/strong> you can make that happen with ease.<\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/marshallku\/smooth-zoom\">Zoomer<\/a> is a free javascript library that <strong>enables your image to be zoomable<\/strong>. When it\u2019s enabled, it will add its own style and a button for zooming in and out. It also supports multiple images, which will automatically be turned into an image gallery.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/jpeg-optimization-guide\/\" class=\"ref-block__link\" title=\"Read More: Optimizing Images for Websites (Ultimate Guide)\" rel=\"bookmark\"><span class=\"screen-reader-text\">Optimizing Images for Websites (Ultimate Guide)<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/jpeg-optimization-guide.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-14251 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/jpeg-optimization-guide.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Optimizing Images for Websites (Ultimate Guide)<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tWhen it comes to website performance, image optimization plays a key role. Large, unoptimized images can slow down...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Initialization<\/h2>\n<p>Before initializing it, first include the Zoomer script (which you can get from <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/FormstoneClassic\/Zoomer\">GitHub page)<\/a> into your project like so:<\/p>\n<pre>\r\n &lt;script src=\"js\/jquery.fs.zoomer.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\r\n <\/pre>\n<p><strong>Zoomer<\/strong> will surround the image with its style and add a zooming in and out button. You should include the Zoomer stylesheet before the closing tag of <code>head<\/code> as well.<\/p>\n<pre>\r\n &lt;head&gt;\r\n ..\r\n &lt;link href=\"css\/jquery.fs.zoomer.css\" rel=\"stylesheet\" type=\"text\/css\"&gt;\r\n ..\r\n &lt;\/head&gt;\r\n <\/pre>\n<h2>Zooming In And Out<\/h2>\n<p>To create a new Zoomer, easily include an image inside a wrapper. Don\u2019t forget to give the wrapper fixed height and width as all available space will be filled by the new markup. For instance, I create a wrapper with the name of <code>.zoomable<\/code> and define the height to 500px and the width to 100% like so:<\/p>\n<pre>\r\n .zoomable { \r\n\t height: 500px; \r\n\t width: 100%; \r\n }\r\n <\/pre>\n<p>Then I wrap the image I want to make zoomable, as per below:<\/p>\n<pre>\r\n &lt;div class=\"zoomable\"&gt;\r\n &lt;img src=\"img\/image-demo.jpg\" \/&gt;\r\n &lt;\/div&gt;\r\n <\/pre>\n<p>The plugin will resize the image until some empty space for the wrapper is available. And if you add more images inside the wrapper, the plugin will automatically detect it then build its own gallery with a pagination button.<\/p>\n<p>So, is the image zoomable? Not yet. We still need to call the plugin and include the class we\u2019ve just created inside it:<\/p>\n<pre>\r\n $(\".zoomable\").zoomer();\r\n <\/pre>\n<p>It\u2019s done! The image is zoomable now.<\/p>\n<h2>Giving Options<\/h2>\n<p>If you not satisfied with the button, the background, the zooming increment etc, you can customize it by adding a small javascript snippet. Just put it into the plugin script like so.<\/p>\n<pre>\r\n$(\".zoomable\").zoomer({\r\n  customClass: \"custom\",\r\n  increment: 0.05\r\n});\r\n\r\n <\/pre>\n<p>The <code>customClass<\/code> option can replace the background wrapper of the plugin while <code>increment<\/code> can be used to increase the degree of your zooming, and whether it is \u201csmooth\u201d or \u201crough\u201d.<\/p>\n<p>You can also handle a really large image that has been sliced into equal tiles with <strong>Zoomer<\/strong>. To do this, you must pass the tiles when initializing the plugin with <code>source<\/code>. Give it a thumbnail then declare all the sliced image sources using the following snippet:<\/p>\n<pre>\r\n$(\".zoomable\").zoomer({\r\n  source: {\r\n    thumbnail: \"img\/thumbnail.jpg\",\r\n    tiles: [\r\n      [\"img\/01-01.jpg\", \"img\/01-02.jpg\", \"img\/01-03.jpg\"],\r\n      [\"img\/02-01.jpg\", \"img\/02-02.jpg\", \"img\/02-03.jpg\"],\r\n      [\"img\/03-01.jpg\", \"img\/03-02.jpg\", \"img\/03-03.jpg\"]\r\n    ]\r\n  }\r\n});\r\n\r\n <\/pre>\n<p>In the HTML code, just call the wrapper without the <code>img<\/code> source like so:<\/p>\n<pre>\r\n &lt;div class=\"zoomable\"&gt;\r\n &lt;\/div&gt;<\/pre>\n<h2>Final Thought<\/h2>\n<p>Images can give users more detailed representation. There are many ways to display images to be as detailed as possible, such as applying a lightbox or hover zoom. Zoomer gives you an additional option to do this. <strong>If you have any other ways, share it with us in the comment box below.<\/strong><\/p>","protected":false},"excerpt":{"rendered":"<p>There\u2019s a quote that goes, \u201ca picture is worth a thousand words.\u201d In web design, it becomes even more relevant. Especially when it\u2019s about showcasing products, like in an e-commerce site for example. People need to get a clear grasp and be able to look at the product in a visual manner before they make&hellip;<\/p>\n","protected":false},"author":136,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[911],"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.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Apply Smooth Zoom Effect To Images With Zoomer - Hongkiat<\/title>\n<meta name=\"description\" content=\"There&#039;s a quote that goes, &quot;a picture is worth a thousand words.&quot; In web design, it becomes even more relevant. Especially when it&#039;s about showcasing\" \/>\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\/zoom-effect-images-zoomer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Apply Smooth Zoom Effect To Images With Zoomer\" \/>\n<meta property=\"og:description\" content=\"There&#039;s a quote that goes, &quot;a picture is worth a thousand words.&quot; In web design, it becomes even more relevant. Especially when it&#039;s about showcasing\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/zoom-effect-images-zoomer\/\" \/>\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=\"2014-05-28T07:01:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:53:59+00:00\" \/>\n<meta name=\"author\" content=\"Irfan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@IrfanFza\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Irfan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/zoom-effect-images-zoomer\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/zoom-effect-images-zoomer\\\/\"},\"author\":{\"name\":\"Irfan\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\"},\"headline\":\"Apply Smooth Zoom Effect To Images With Zoomer\",\"datePublished\":\"2014-05-28T07:01:57+00:00\",\"dateModified\":\"2025-04-03T17:53:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/zoom-effect-images-zoomer\\\/\"},\"wordCount\":522,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"jQuery\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/zoom-effect-images-zoomer\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/zoom-effect-images-zoomer\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/zoom-effect-images-zoomer\\\/\",\"name\":\"Apply Smooth Zoom Effect To Images With Zoomer - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2014-05-28T07:01:57+00:00\",\"dateModified\":\"2025-04-03T17:53:59+00:00\",\"description\":\"There's a quote that goes, \\\"a picture is worth a thousand words.\\\" In web design, it becomes even more relevant. Especially when it's about showcasing\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/zoom-effect-images-zoomer\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/zoom-effect-images-zoomer\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/zoom-effect-images-zoomer\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Apply Smooth Zoom Effect To Images With Zoomer\"}]},{\"@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\\\/483b1092b8017f37d977331e91935d8c\",\"name\":\"Irfan\",\"description\":\"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/IrfanFza\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/irfan_fauzii\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Apply Smooth Zoom Effect To Images With Zoomer - Hongkiat","description":"There's a quote that goes, \"a picture is worth a thousand words.\" In web design, it becomes even more relevant. Especially when it's about showcasing","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\/zoom-effect-images-zoomer\/","og_locale":"en_US","og_type":"article","og_title":"Apply Smooth Zoom Effect To Images With Zoomer","og_description":"There's a quote that goes, \"a picture is worth a thousand words.\" In web design, it becomes even more relevant. Especially when it's about showcasing","og_url":"https:\/\/www.hongkiat.com\/blog\/zoom-effect-images-zoomer\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-05-28T07:01:57+00:00","article_modified_time":"2025-04-03T17:53:59+00:00","author":"Irfan","twitter_card":"summary_large_image","twitter_creator":"@IrfanFza","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Irfan","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/zoom-effect-images-zoomer\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/zoom-effect-images-zoomer\/"},"author":{"name":"Irfan","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c"},"headline":"Apply Smooth Zoom Effect To Images With Zoomer","datePublished":"2014-05-28T07:01:57+00:00","dateModified":"2025-04-03T17:53:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/zoom-effect-images-zoomer\/"},"wordCount":522,"commentCount":1,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["jQuery"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/zoom-effect-images-zoomer\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/zoom-effect-images-zoomer\/","url":"https:\/\/www.hongkiat.com\/blog\/zoom-effect-images-zoomer\/","name":"Apply Smooth Zoom Effect To Images With Zoomer - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2014-05-28T07:01:57+00:00","dateModified":"2025-04-03T17:53:59+00:00","description":"There's a quote that goes, \"a picture is worth a thousand words.\" In web design, it becomes even more relevant. Especially when it's about showcasing","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/zoom-effect-images-zoomer\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/zoom-effect-images-zoomer\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/zoom-effect-images-zoomer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Apply Smooth Zoom Effect To Images With Zoomer"}]},{"@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\/483b1092b8017f37d977331e91935d8c","name":"Irfan","description":"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.","sameAs":["https:\/\/x.com\/IrfanFza"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/irfan_fauzii\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-5iV","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20393","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\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=20393"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20393\/revisions"}],"predecessor-version":[{"id":73694,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20393\/revisions\/73694"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=20393"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=20393"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=20393"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=20393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}