How To Add Plus Size Image Viewer in Your Blog

Want to show something new on your blog? What if you try "Plus Size Image Viewer" on your blog. Plus Size Image Viewer is an attractive method to enlarge or zoom  the image without open the new tab. Plus Size Image Viewer automatically adds a caption beneath the images of your choice that when clicked on launches a "plus size" version of the image. The enlarged image can be a different image from the original, so the former is loaded only on demand when requested. How is it works? Watch the demo below :

So, how is it? You wanna add it? Follow this tutorial.

1. Go to your Dashboard >> Design >> Edit HTML >> Check Expand Widget Templates.

2. Search this code (Ctrl + F), </head> 

3. Then, add this code below, above it :

<link href='https://sites.google.com/site/howtohouse/hth-scripts/howtohouse-plusimageviewer.css' rel='stylesheet' type='text/css'/>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script src='https://sites.google.com/site/howtohouse/hth-scripts/howtohouse-plusimageviewer.js' type='text/javascript'>

/***********************************************
* Plus Size Image Viewer- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
* Shared by HOW-TO HOUSE at www.place2how-to.com
***********************************************/

</script>

4. Save your template.

To add a "Plus Size Image Viewer" to any image,

1. Insert the two attributes in red inside the image's IMG tag :

<img src="YOUR IMAGE URL" data-plusimage="YOUR IMAGE URL" data-plussize="800,600" />

2.  Example code for image above, look something like this :

<img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs5z6BoPKMd8ggKhbORfQYRfoGZHUJp3vRyooy0p9TPLPAcUqpPjILu53-RHd-BEH8UxZrJn59N-NCaMEKCz7ku6_KQ1YYz0SBmhYSKfBGyIMM0gwem6KsA-YZzuRNjHgp_oIq7Qt0ymo/" data-plusimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs5z6BoPKMd8ggKhbORfQYRfoGZHUJp3vRyooy0p9TPLPAcUqpPjILu53-RHd-BEH8UxZrJn59N-NCaMEKCz7ku6_KQ1YYz0SBmhYSKfBGyIMM0gwem6KsA-YZzuRNjHgp_oIq7Qt0ymo/" data-plussize="800,600"/>

3. Preview it. If it's ok, you are succeeded. DONE!

It definitely gives a different look to your blog. Your blog will look more attractive and professional. GOOD LUCK!


source : JavaScript Kit


Facing any problem? Just drop your comment! :D