Placeholder Picture

Magnifying glas

A neat little tool with a magnifying glass that can be moved around on top of an image. Something to use for advertisments, perhaps? However, it will not work 'right out of the box', there is a tweak necessary after export. This will be explained below.

For some reason it appears that the magnifying glass will only work on images that are 200px wide, so on a page with an advertisment column it may be quite handy. The size of the actual magnifying glass can be adjusted.

To make a component of just the magnifying feature, select the container 'magnify', and also remember to grab everything from the header and footer sections in the Page manager (There is a js file in the resources!). If you instead select the 'wrapper', you will get this two-column setup with image to the left, text to the right. 

This building block is not dependent just on Foundation, it can be created identically in Bootstrap and Vanilla.

Tweaking:

Find the html code that looks like this:

<div class="responsive-picture small">
<picture><img alt="Placeholder Picture" src="./img/IMG_2513.jpg">
</picture>
</div>

Modify it to look like the code below instead:

<div class="responsive-picture">
<picture><img class="small" alt="Placeholder Picture" src="./img/IMG_2513.jpg">
</picture>
</div>

As you may see, the class name 'small' has been moved down to the <img> tag, see the bold text. Of course it is a hassle having to do this after every bit of editing. I'd advise you to accept that the magnifying glas is not doing anything while working with your project, and then, when you are done, after the last export, just before uploading, then you modify that code. The staff at CC are looking into this, and as soon as they have found a fix for it, this tweak won't be necessary any more.