Page 1 of 1

photo extension allowing for zoom in

Posted: Thu Jun 06, 2019 7:05 am
by mrwillow

Currently I am using the Fotorama extension for including JPEGs, as I like the design lay-out and ultimately the way it displays. However, it doesn't have a zoom-in function (at least I cannot tell), and wondered if there is an extension that allows the user to zoom in on an image. I am displaying quite scientific-type photos, and want to give the user this option.

Thank you,


Re: photo extension allowing for zoom in

Posted: Thu Jun 06, 2019 7:37 am
by RiaanN
For me personally this was a great option - Hope it can be of value to you

Re: photo extension allowing for zoom in

Posted: Thu Jun 06, 2019 8:01 am
by mrwillow
Hi RiaanN - yep, this is definitely the sort of thing I'm looking for. So how to install (or however best phrased)? I'm not a coder, and at first glance this appears to be an 'add HTML' to the Page HTML Properties installation. Is this correct? Which tab to install it in? And anything else to know?


Re: photo extension allowing for zoom in

Posted: Thu Jun 06, 2019 3:47 pm
by RiaanN
Remember WB is not an HTML editor, therefore you will not have the code, or the results of the code visible on the WB Design area. You will have to previev (a lot) in order to make it work for your specific design.

I will explain what I think is the easiest way for you to insert it, but you will have to play around quite a bit in order to place everything where you want it to be.

Start off by right click anywhere in the design panel and click on page HTML. We are going to copy and paste !

1. In the Between <head></head> tags section, copy the following code in there

<meta name="viewport" content="width=device-width, initial-scale=1.0">
* {box-sizing: border-box;}

.img-zoom-container {
position: relative;

.img-zoom-lens {
position: absolute;
border: 1px solid #d4d4d4;
/*set the size of the lens:*/
width: 40px;
height: 40px;

.img-zoom-result {
border: 1px solid #d4d4d4;
/*set the size of the result div:*/
width: 300px;
height: 300px;
function imageZoom(imgID, resultID) {
var img, lens, result, cx, cy;
img = document.getElementById(imgID);
result = document.getElementById(resultID);
/*create lens:*/
lens = document.createElement("DIV");
lens.setAttribute("class", "img-zoom-lens");
/*insert lens:*/
img.parentElement.insertBefore(lens, img);
/*calculate the ratio between result DIV and lens:*/
cx = result.offsetWidth / lens.offsetWidth;
cy = result.offsetHeight / lens.offsetHeight;
/*set background properties for the result DIV:*/ = "url('" + img.src + "')"; = (img.width * cx) + "px " + (img.height * cy) + "px";
/*execute a function when someone moves the cursor over the image, or the lens:*/
lens.addEventListener("mousemove", moveLens);
img.addEventListener("mousemove", moveLens);
/*and also for touch screens:*/
lens.addEventListener("touchmove", moveLens);
img.addEventListener("touchmove", moveLens);
function moveLens(e) {
var pos, x, y;
/*prevent any other actions that may occur when moving over the image:*/
/*get the cursor's x and y positions:*/
pos = getCursorPos(e);
/*calculate the position of the lens:*/
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
/*prevent the lens from being positioned outside the image:*/
if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
if (x < 0) {x = 0;}
if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
if (y < 0) {y = 0;}
/*set the position of the lens:*/ = x + "px"; = y + "px";
/*display what the lens "sees":*/ = "-" + (x * cx) + "px -" + (y * cy) + "px";
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
/*get the x and y positions of the image:*/
a = img.getBoundingClientRect();
/*calculate the cursor's x and y coordinates, relative to the image:*/
x = e.pageX - a.left;
y = e.pageY -;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};

2. In the Before </body> section, copy the following code in there.

<h1>Image Zoom</h1>

<p>Mouse over the image:</p>

<div class="img-zoom-container">
<img id="myimage" src="img_girl.jpg" width="300" height="240">
<div id="myresult" class="img-zoom-result"></div>

<p>The image must be placed inside a container with relative positioning.</p>
<p>The result can be put anywhere on the page, but must have the class name "img-zoom-result".</p>
<p>Make sure both the image and the result have IDs. These IDs are used when a javaScript initiates the zoom effect.</p>

// Initiate zoom effect:
imageZoom("myimage", "myresult");

3. Now have an image ready in JPG format and rename the image img_girl.jpg You can use other names and formats as well just remember to change the filename in the code that you pasted in step 2.

4. In WB drag the File Publisher to the design area.

5. Double click the File Publisher and click on Add Files

6. Browse to the image file that you want to use - In this scenario the file that is named img_girl.jpg

7. If all went well you will be able to see your image + the Zoom panel when you preview the page.

8. Now for the hard part that I cannot help you with, and that is to design the rest of your page to either accept the current placement of the code that you inserted, OR you must play around and manipulate the inserted code to display else where on your page.

Hope you come right !