Simple Web Page Image Zoom Tricks

In creating a website post page of your website would often included images for explanations of existing articles. Moreover, your article category is photography, so it requires you to show a picture that you want to show off. It is very necessary for you to include image zoom facility in your web page, so it will be easier for your web visitors to see clearly or clarify the picture shown.

There are lots of javascript code that you can find on the internet. One code that you can use is the javascript code developed by fat (github.com/fat). It's easy and simple to implement this code, so that you can easily apply in your website.

Very Simple

It takes only 3 javascript codes to apply this trick, simply by enabling jquery.min.js, bootstrap.min.js and zoom.js codes. Put the 3 lines of code into your website before the </body> tag, like the example below.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="js/zoom.js"></script>

Then in the article post html you give action to activate the zoom image with data-action="zoom" command, like the example below.

<p>
Meggings irony fashion axe, tattooed master cleanse Blue Bottle stumptown bitters authentic flannel freegan paleo letterpress ugh sriracha. Wolf PBR&B art party aesthetic meh cliche. Sartorial before they sold out deep v, aesthetic PBR&B craft beer post-ironic synth keytar pork belly skateboard pour-over. Tonx cray pug Etsy, gastropub ennui wolf ethnic Odd Future viral master cleanse skateboard banjo. Pitchfork scenester cornhole, whatever try-hard ethnic banjo +1 gastropub American Apparel vinyl skateboard Shoreditch seitan. Blue Bottle keffiyeh Austin Helvetica art party. Portland ethnic fixie, beard retro direct trade ugh scenester Tumblr readymade authentic plaid pickled hashtag biodiesel.
</p>
<img src="img/palm.jpg" data-action="zoom">
<p>
Thundercats freegan Truffaut, four loko twee Austin scenester lo-fi seitan High Life paleo quinoa cray. Schlitz butcher ethical Tumblr, pop-up DIY keytar ethnic iPhone PBR sriracha. Tonx direct trade bicycle rights gluten-free flexitarian asymmetrical. Whatever drinking vinegar PBR XOXO Bushwick gentrify. Cliche semiotics banjo retro squid Wes Anderson. Fashion axe dreamcatcher you probably haven't heard of them bicycle rights. Tote bag organic four loko ethical selfies gastropub, PBR fingerstache tattooed bicycle rights.
</p>

Based on the above code, the pictures in your article pages can do zoom.

Blogging Tricks

How do I apply this image zoom, if you are using hosting Blogger?

• Perform Edit HTML Template, then find </body> tag, then copy and paste the three lines of codes above, right above the </body> tag.
• Save Edit HTML Template.
• Apply in a blog article for each image in the <img tag with data-action="zoom" command (like the example above).

It's very simple right? If you want to download the master of this code you can download at this link.

• DEMO IMAGE ZOOM