{"id":32834,"date":"2018-07-31T16:04:03","date_gmt":"2018-07-31T10:04:03","guid":{"rendered":"https:\/\/www.elementpack.pro\/demo\/?page_id=32834"},"modified":"2026-03-09T13:02:03","modified_gmt":"2026-03-09T07:02:03","slug":"image-magnifier","status":"publish","type":"page","link":"https:\/\/www.elementpack.pro\/demo\/element\/image-magnifier\/","title":{"rendered":"Image Magnifier"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"32834\" class=\"elementor elementor-32834\" data-elementor-settings=\"{&quot;element_pack_global_tooltip_width&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_width_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_width_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_padding&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_padding_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_padding_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true}}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d2307c9 e-flex e-con-boxed magic-button-disabled-no e-con e-parent\" data-id=\"d2307c9\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-4116815 bdt-backdrop-filter-yes e-con-full e-flex bdt-filter-backdrop magic-button-disabled-no e-con e-child\" data-id=\"4116815\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-19da511 elementor-widget__width-auto elementor-widget-tablet__width-initial elementor-widget elementor-widget-bdt-advanced-heading\" data-id=\"19da511\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"bdt-advanced-heading.default\">\n\t\t\t\t\t<div id=\"19da511\" class=\"bdt-ep-advanced-heading\" data-settings=\"{&quot;titleMultiColor&quot;:&quot;no&quot;}\"><h2 class=\"bdt-ep-advanced-heading-title\"><span class=\"bdt-ep-advanced-heading-main-title\"><span class=\"bdt-ep-advanced-heading-main-title-inner\">Demo 01 : <\/span><span class=\"bdt-mainh-split-text\">Image Type Inner Example<\/span><\/span><\/h2><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3055eed elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"3055eed\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"522\" data-end=\"668\">Call Image magnifier without any config,just apply it on an image. You can set the image size, apply some style or make it responsive as usual.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-71c1e2b magic-button-disabled-yes e-con-full e-flex e-con e-child\" data-id=\"71c1e2b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6c88265 elementor-widget elementor-widget-bdt-image-magnifier\" data-id=\"6c88265\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"bdt-image-magnifier.default\">\n\t\t\t\t\t            <div data-settings=\"{&quot;type&quot;:&quot;inner&quot;,&quot;bigImageSrc&quot;:&quot;https:\\\/\\\/www.elementpack.pro\\\/demo\\\/wp-content\\\/uploads\\\/2018\\\/08\\\/04-scaled.jpg&quot;,&quot;smoothMove&quot;:true,&quot;preload&quot;:true,&quot;zoomSize&quot;:[480,300],&quot;offset&quot;:[0,0]}\" class=\"bdt-image-magnifier bdt-position-relative\">\n                <img decoding=\"async\" class=\"bdt-image-magnifier-image\" src=\"https:\/\/www.elementpack.pro\/demo\/wp-content\/uploads\/2018\/08\/04-scaled.jpg\" alt=\"\">\n            <\/div>\n            \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0cc32c6 e-flex e-con-boxed magic-button-disabled-no e-con e-parent\" data-id=\"0cc32c6\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-1647e49 bdt-backdrop-filter-yes e-con-full e-flex bdt-filter-backdrop magic-button-disabled-no e-con e-child\" data-id=\"1647e49\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bea8274 elementor-widget__width-auto elementor-widget-tablet__width-initial elementor-widget elementor-widget-bdt-advanced-heading\" data-id=\"bea8274\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"bdt-advanced-heading.default\">\n\t\t\t\t\t<div id=\"bea8274\" class=\"bdt-ep-advanced-heading\" data-settings=\"{&quot;titleMultiColor&quot;:&quot;no&quot;}\"><h2 class=\"bdt-ep-advanced-heading-title\"><span class=\"bdt-ep-advanced-heading-main-title\"><span class=\"bdt-ep-advanced-heading-main-title-inner\">Demo 02 : <\/span><span class=\"bdt-mainh-split-text\">Image Type Stranded Example<\/span><\/span><\/h2><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c30e2ed elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"c30e2ed\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"525\" data-end=\"669\">Responsive! Standard zoom mode show on the left\/right. You can set the zoom view size ,custom css class , set the offset of the thumb image or other offset target!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-75d4761 e-con-full e-flex magic-button-disabled-no e-con e-child\" data-id=\"75d4761\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fe2dd89 elementor-widget elementor-widget-bdt-image-magnifier\" data-id=\"fe2dd89\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"bdt-image-magnifier.default\">\n\t\t\t\t\t            <div data-settings=\"{&quot;type&quot;:&quot;standard&quot;,&quot;bigImageSrc&quot;:&quot;https:\\\/\\\/www.elementpack.pro\\\/demo\\\/wp-content\\\/uploads\\\/2018\\\/08\\\/03-scaled.jpg&quot;,&quot;smoothMove&quot;:true,&quot;preload&quot;:true,&quot;position&quot;:&quot;left&quot;,&quot;zoomSize&quot;:[600,416],&quot;offset&quot;:[10,0]}\" class=\"bdt-image-magnifier bdt-position-relative\">\n                <img decoding=\"async\" class=\"bdt-image-magnifier-image\" src=\"https:\/\/www.elementpack.pro\/demo\/wp-content\/uploads\/2018\/08\/03-scaled.jpg\" alt=\"\">\n            <\/div>\n            \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e7a729a e-flex e-con-boxed magic-button-disabled-no e-con e-parent\" data-id=\"e7a729a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-675fbe9 bdt-backdrop-filter-yes e-con-full e-flex bdt-filter-backdrop magic-button-disabled-no e-con e-child\" data-id=\"675fbe9\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4e719f9 elementor-widget__width-auto elementor-widget-tablet__width-initial elementor-widget elementor-widget-bdt-advanced-heading\" data-id=\"4e719f9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"bdt-advanced-heading.default\">\n\t\t\t\t\t<div id=\"4e719f9\" class=\"bdt-ep-advanced-heading\" data-settings=\"{&quot;titleMultiColor&quot;:&quot;no&quot;}\"><h2 class=\"bdt-ep-advanced-heading-title\"><span class=\"bdt-ep-advanced-heading-main-title\"><span class=\"bdt-ep-advanced-heading-main-title-inner\">Demo 03 : <\/span><span class=\"bdt-mainh-split-text\">Image Type Follow Example<\/span><\/span><\/h2><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-52fe36f elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"52fe36f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"521\" data-end=\"669\">Follow Zoom of single image, Can be set large image or not. And you can easy custom the lens size and style<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0e61642 e-con-full e-flex magic-button-disabled-no e-con e-child\" data-id=\"0e61642\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ab1277e elementor-widget elementor-widget-bdt-image-magnifier\" data-id=\"ab1277e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"bdt-image-magnifier.default\">\n\t\t\t\t\t            <div data-settings=\"{&quot;type&quot;:&quot;follow&quot;,&quot;bigImageSrc&quot;:&quot;https:\\\/\\\/www.elementpack.pro\\\/demo\\\/wp-content\\\/uploads\\\/2018\\\/08\\\/02-scaled.jpg&quot;,&quot;preload&quot;:true,&quot;zoomSize&quot;:[150,100],&quot;offset&quot;:[0,0]}\" class=\"bdt-image-magnifier bdt-position-relative\">\n                <img decoding=\"async\" class=\"bdt-image-magnifier-image\" src=\"https:\/\/www.elementpack.pro\/demo\/wp-content\/uploads\/2018\/08\/02-scaled.jpg\" alt=\"\">\n            <\/div>\n            \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ba719ec e-flex e-con-boxed magic-button-disabled-no e-con e-parent\" data-id=\"ba719ec\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-44f2b31 bdt-backdrop-filter-yes e-con-full e-flex bdt-filter-backdrop magic-button-disabled-no e-con e-child\" data-id=\"44f2b31\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5f492b4 elementor-widget__width-auto elementor-widget-tablet__width-initial elementor-widget elementor-widget-bdt-advanced-heading\" data-id=\"5f492b4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"bdt-advanced-heading.default\">\n\t\t\t\t\t<div id=\"5f492b4\" class=\"bdt-ep-advanced-heading\" data-settings=\"{&quot;titleMultiColor&quot;:&quot;no&quot;}\"><h2 class=\"bdt-ep-advanced-heading-title\"><span class=\"bdt-ep-advanced-heading-main-title\"><span class=\"bdt-ep-advanced-heading-main-title-inner\">Demo 04 : <\/span><span class=\"bdt-mainh-split-text\">No Smooth Move Example<\/span><\/span><\/h2><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a358757 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"a358757\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"521\" data-end=\"669\">The No Smooth Move option offers quick, fixed magnification without animation \u2014 ideal for precise and fast image inspections.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-71e3b31 e-con-full e-flex magic-button-disabled-no e-con e-child\" data-id=\"71e3b31\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f4a8204 elementor-widget elementor-widget-bdt-image-magnifier\" data-id=\"f4a8204\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"bdt-image-magnifier.default\">\n\t\t\t\t\t            <div data-settings=\"{&quot;type&quot;:&quot;standard&quot;,&quot;bigImageSrc&quot;:&quot;https:\\\/\\\/www.elementpack.pro\\\/demo\\\/wp-content\\\/uploads\\\/2018\\\/08\\\/01-scaled.jpg&quot;,&quot;preload&quot;:true,&quot;position&quot;:&quot;left&quot;,&quot;zoomSize&quot;:[560,469],&quot;offset&quot;:[10,0]}\" class=\"bdt-image-magnifier bdt-position-relative\">\n                <img decoding=\"async\" class=\"bdt-image-magnifier-image\" src=\"https:\/\/www.elementpack.pro\/demo\/wp-content\/uploads\/2018\/08\/01-scaled.jpg\" alt=\"\">\n            <\/div>\n            \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-951163a e-flex e-con-boxed magic-button-disabled-no e-con e-parent\" data-id=\"951163a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-e598298 e-con-full e-flex magic-button-disabled-no e-con e-child\" data-id=\"e598298\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bdf7599 elementor-widget__width-auto elementor-widget-tablet__width-initial elementor-widget elementor-widget-bdt-advanced-heading\" data-id=\"bdf7599\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"bdt-advanced-heading.default\">\n\t\t\t\t\t<div id=\"bdf7599\" class=\"bdt-ep-advanced-heading\" data-settings=\"{&quot;titleMultiColor&quot;:&quot;no&quot;}\"><h2 class=\"bdt-ep-advanced-heading-title\"><span class=\"bdt-ep-advanced-heading-main-title\"><span class=\"bdt-ep-advanced-heading-main-title-inner\">Demo 05 : <\/span><span class=\"bdt-mainh-split-text\">Horizontal Offset Example<\/span><\/span><\/h2><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-37dc3ed elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"37dc3ed\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>The Horizontal Offset feature positions the zoomed view to the side, allowing users to explore image details without overlapping the main content.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"ep-section-eql-height elementor-element elementor-element-7b077be e-con-full e-flex magic-button-disabled-no e-con e-child\" bdt-height-match=\"target: .ep-section-eql-height .elementor-element .elementor-widget\" data-id=\"7b077be\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2cd9a4c elementor-widget elementor-widget-bdt-image-magnifier\" data-id=\"2cd9a4c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"bdt-image-magnifier.default\">\n\t\t\t\t\t            <div data-settings=\"{&quot;type&quot;:&quot;standard&quot;,&quot;bigImageSrc&quot;:&quot;https:\\\/\\\/www.elementpack.pro\\\/demo\\\/wp-content\\\/uploads\\\/2018\\\/08\\\/04-scaled.jpg&quot;,&quot;preload&quot;:true,&quot;position&quot;:&quot;left&quot;,&quot;zoomSize&quot;:[600,426],&quot;offset&quot;:[100,0]}\" class=\"bdt-image-magnifier bdt-position-relative\">\n                <img decoding=\"async\" class=\"bdt-image-magnifier-image\" src=\"https:\/\/www.elementpack.pro\/demo\/wp-content\/uploads\/2018\/08\/04-scaled.jpg\" alt=\"\">\n            <\/div>\n            \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Demo 01 : Image Type Inner Example Call Image magnifier without any config,just apply it on an image. You can set the image size, apply some style or make it responsive as usual. Demo 02 : Image Type Stranded Example Responsive! Standard zoom mode show on the left\/right. You can set the zoom view size ,custom css class , set the offset of the thumb image or other offset target! Demo 03 : Image Type Follow Example Follow Zoom of single image, Can be set large image or not. And you can easy custom the lens size and style Demo 04 : No Smooth Move Example The No Smooth Move option offers quick, fixed magnification without animation \u2014 ideal for precise and fast image inspections. Demo 05 : Horizontal Offset Example The Horizontal Offset feature positions the zoomed view to the side, allowing users to explore image details without overlapping the main content.<\/p>\n","protected":false},"author":6974,"featured_media":0,"parent":32,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-32834","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.elementpack.pro\/demo\/wp-json\/wp\/v2\/pages\/32834","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.elementpack.pro\/demo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.elementpack.pro\/demo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.elementpack.pro\/demo\/wp-json\/wp\/v2\/users\/6974"}],"replies":[{"embeddable":true,"href":"https:\/\/www.elementpack.pro\/demo\/wp-json\/wp\/v2\/comments?post=32834"}],"version-history":[{"count":0,"href":"https:\/\/www.elementpack.pro\/demo\/wp-json\/wp\/v2\/pages\/32834\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.elementpack.pro\/demo\/wp-json\/wp\/v2\/pages\/32"}],"wp:attachment":[{"href":"https:\/\/www.elementpack.pro\/demo\/wp-json\/wp\/v2\/media?parent=32834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}