June 9, 2014

Weebly Tricks #55 - Featured Image Zoomer

Posted by Domz at 6/09/2014

Weebly Image Zoomer


Our next tutorial is popular on most online shops and stores. The best way to name it is "Image Zoomer". The main feature is when you hover your mouse on a particular image with this effect; a magnified reflection will appear on its side letting you scan the original image. Just think of a digital camera trying to capture a distant object using its zoom to focus on some specific details. The code is surprisingly easy to follow.








1. There were actually two types of this zoomer but I simplified the code making it one. Download the files below by right clicking on it and choose "save link as".

multizoom.js
multizoom.css

Upload them to your template by going to Weebly > Design > Edit CSS/HTML > Add new files > choose the file you've just downloaded. After that, save your template.

2. Now go to the page you want to insert this zoomer and we will edit its header. To do that, go to Pages > Select the page title on the left > Click the advance settings on the right > Scroll down and on the header code box simply paste the following code:

<link rel="stylesheet" href="http://myweeblytricksdemo.weebly.com/files/theme/multizoom.css" type="text/css" />

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

<script type="text/javascript" src="http://myweeblytricksdemo.weebly.com/files/theme/multizoom.js">

// Featured Image Zoomer (w/ optional multizoom and adjustable power)- By Dynamic Drive DHTML code library (www.dynamicdrive.com)
// Multi-Zoom code (c)2012 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
// Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more

</script>

<script type="text/javascript">

jQuery(document).ready(function($){

  $('#image1').addimagezoom({
    zoomrange: [3, 10],
    magnifiersize: [200,200],
   })

  $('#image2').addimagezoom({
    zoomrange: [3, 10],
    magnifiersize: [300,300],
   })

  $('#image3').addimagezoom({
    zoomrange: [3, 10],
    magnifiersize: [300,300],
   })

  $('#image4').addimagezoom({
    zoomrange: [3, 10],
    magnifiersize: [300,300],
   })

  $('#image5').addimagezoom({
    zoomrange: [3, 10],
    magnifiersize: [300,300],
   })

})

</script>

Change the red marked text with your own site address. Look at the codes in green text, these will be the settings for your images. Notice that there are five of them (image01,image02...), this means you are allowed to insert five images on one page with this effect. However, you can actually add as many images as you want, just copy a complete set of the green text and give it a unique ID. Click on the "Save and edit".

3. Now that you’re on page work area, drag an "embed code" from the left and paste the following code:

<img id="image2" border="0" src="http://myweeblytricksdemo.weebly.com/files/theme/car1.jpg" style="width:300px;height:200px">

<img id="image1" border="0" src="http://myweeblytricksdemo.weebly.com/files/theme/car2.jpg" style="width:200px;height:100px">

The first thing you should change is the image source highlighted in red, use your own. Next is the inline CSS, the green text is the minified size of your image. Assuming you have 1920x1080 image then you can make it 300x200 giving a perfect zoom output. Lastly, the blue text is your image IDs which should be unique, you can change their styles through their respective IDs as seen on step one. Publish your site and try to hover your mouse pointer on the image.

More details and explanations from the code source found at the demo page.

You're done!! It’s actually easy, simple and most of all FREE! Give me a comment if it helps you and you site!

Get email updates and more access! (Free)
Email *
email marketing by activecampaign


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

8 comments:

  1. Replies
    1. Appreciate that Malthe. You're welcome!!

      Delete
  2. Great help. Thanks.
    I have an image which original size is 1392x4171. When I use the zoom with the mouse scroll, the image looses quality. Which setting should I put so that the zoom comes with quality, since the picture has high resolution? Thanks.

    ReplyDelete
    Replies
    1. Hi Diogo,

      Please post this on the forum... with the site so I can check.

      Delete
    2. Domingo,

      I am having the same issue with quality depletion. The link is: http://richardvjr.weebly.com/blog/the-accumulation-of-boardsthus-far

      Delete
    3. HI Richard,

      Please post this on the forum. Sorry but I can only accommodate queries when it was asked on the forum.

      Delete
  3. I don´t know Domingo, but your work here is AWESOME!!! THANK YOU REALLY! GBY

    ReplyDelete

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top