First of all, I'm not the one who developed "elevateZoom" plugin! This is the original plugin website! This is the plugin modified version website (elevateZoom Plus)! (I use the modified version, elevateZoom Plus, since it seems to be more up to date!)
elevateZoom is a jQuery plugin, so, it requires jQuery library in order to work! (Tested with jQuery 1.7.0, 1.8.3 and 3.2.1)
Google Blogger and almost all websites nowadays use html 5 doctype declaration, which is, <!DOCTYPE html> ! Just in case, make sure your html code has a doctype declaration in order to allow jQuery to work properly! (<!DOCTYPE html> is the recommended one!)
Step 1 - Load jQuery library into your blog
(If you already use jQuery library in your blog, skip this step!)
Go to the blog layout and add a "HTML/JavaScript" Gadget! Copy and past there the following code:
- This Image shows how to create a Gadget!
- Visit this link to see how to hide any Gadget!
Step 2 - Load "elevateZoom Plus" plugin into your blog
(Note): "elevateZoom Plus" Gadget must be placed below "jQuery" Gadget! (See Image)
Go to the blog layout and add a "HTML/JavaScript" Gadget! Copy and past there the following code:
Note that, by default, the "Screen Mode" zoom effect is applied to all <img> elements in your blog! If you don't want such a behavior, remove the "Default Option" from the code or just choose another option to be used as default option!
You can modify the options to fit your needs, or, add your own custom option if you want! (There is an example in "Step 3" below!)
Mouse Wheel Scroll Zoom In/Out is enabled by default for all the options! (You can turn it off if you want!)
- This Image shows how to create a Gadget!
- Visit this link to see how to hide any Gadget!
Step 3 - How to and Examples
There are basically 2 ways to use this plugin:
Using a Small and Large Image (This is the recommended one):
<img id="elevateZoom Option" src="Small Image Url" data-zoom-image="Large Image Url" />
(Note that, the Small Image must be proportionally scaled down from the Large Image!)
Using only a Large Image (not recommended):
<img id="elevateZoom Option" src="Large Image Url" width="put a number smaller than the Large Image width" />
(Your page load time will increase if you are loading Larger Images)
(Note) Some Blogger Templates automatically add "padding" style to <img> tags, causing some Zoom effect position problems! To fix this problem, include style="padding:0px;" inside the <img> tags!
Default Screen Mode Zoom effect in use!
<img src="Small Image Url" data-zoom-image="Large Image Url" />
<img src="Small Image Url" data-zoom-image="Large Image Url" />
Default Screen Mode zoom effect Disabled!
<img id="ZoomImg_" src="Image Url" />
(If a <img> tag "id" attribute contains "ZoomImg_" string, "Default Screen Mode zoom effect" is automatically disabled for that <img> tag)
Disable "Default Screen Mode" and enable "Inside" (Inner) zoom effect!
<img id="ZoomImg_Inside" src="Small Image Url" data-zoom-image="Large Image Url" />
<img id="ZoomImg_Inside" src="Small Image Url" data-zoom-image="Large Image Url" />
 |
|
|
|
|---|
Disable "Default Screen Mode" and enable "Window Right\Up\Down\Left" zoom effect!
<img id="ZoomImg_WindowRight" src="Small Image Url" data-zoom-image="Large Image Url" />
<img id="ZoomImg_WindowUp" src="Small Image Url" data-zoom-image="Large Image Url" />
<img id="ZoomImg_WindowDown" src="Small Image Url" data-zoom-image="Large Image Url" />
<img id="ZoomImg_WindowLeft" src="Small Image Url" data-zoom-image="Large Image Url" />
 |
 |
|---|
Disable "Default Screen Mode" and enable "LensSquare\Round" zoom effect!
<img id="ZoomImg_LensSquare" src="Small Image Url" data-zoom-image="Large Image Url" />
<img id="ZoomImg_LensRound" src="Small Image Url" data-zoom-image="Large Image Url" />
<img id="ZoomImg_LensSquare" src="Small Image Url" data-zoom-image="Large Image Url" />
<img id="ZoomImg_LensRound" src="Small Image Url" data-zoom-image="Large Image Url" />
Disable "Default Screen Mode" and enable "Screen" zoom effect!
<img id="ZoomImg_Screen" src="Small Image Url" data-zoom-image="Large Image Url" />
<img id="ZoomImg_Screen" src="Small Image Url" data-zoom-image="Large Image Url" />
You can disable "Default Screen Mode" and enable your own custom option while editing a post!
(<img> tag must be placed above the <script> code)
If you want to create more advanced custom options, visit the modified elevateZoom Plus website, or, visit the original elevateZoom website which is basically almost the same thing!(<img> tag must be placed above the <script> code)
Some Extra Files from GitHub!
Keywords:
Blogger - Image Zoom Plugin
Blogger - elevateZoom Plugin
Blogger - elevateZoom Plus Plugin
Blogger - Image Zoom Magnifier
Blogger - Image Zoom Magnifying glass
Note that if you add the hiding code as custom markup, instead of content, you can use <data:widget.instanceId /> and don't have to worry about manually matching the ID of the widget, once it's been created.
ReplyDelete<b:includable id='main'>
<!-- Hide Gadget -->
<style>#<data:widget.instanceId /> { display: none; }</style>
<b:include name='super.main' />
</b:includable>
Hi Luke,
DeleteThanks for your reply!
When I got time (I really don't have it right now), I will try your code and eventually update all my posts related with hiding gadgets!
Thanks for the tip!
Hi Luke,
DeleteI tested your code, but unfortunately, it didn't work!
After saving the gadget, the string inside "style" tag is automatically removed!
Hello, please help me I'm a bit confused about this code: small and large image url... how can I have a small and large image url? In your view source I found only large image url...
ReplyDeleteGo to my page source code and search for any "data-zoom-image" string! Links associated to "data-zoom-image" are the large images, and to the right you will find links associated with "src" which are the small images!
DeleteYes, you can use only "src" to represent the large and small image, but it's not recommended because it may slow down your page load time!
Thanks for this great tutorial! :) I'm not clicking all the urls, I thought all contain large images :) silly me :) Big big thanks bro!
DeleteYou are welcome!
Deletehello
ReplyDeleteGive details info
ReplyDelete