Article image swap/zoom on mouseover | Community
Skip to main content

Article image swap/zoom on mouseover

  • March 9, 2016
  • 5 replies
  • 0 views

Has anyone had any luck in implementing an easy mouseover image swap/zoom within an article?

Many of our articles contain screen shots I'd like them to zoom to cursor within the article. Some articles have multiple images of which a zoom would be required.

I have tried implementing a number of options but as yet without success.

Thanks

Andrew

This topic has been closed for replies.

5 replies

  • March 10, 2016

I had implemented "Zoomify" with great success.
See it in action:

http://screencast.com/t/A3ITsCa9C

First, download the plugin from here:

http://www.jqueryscript.net/lightbox/jQuery-Plugin-For-Image-Lightbox-with-Zoom-Effect-Zoomify.html

Open the .zip file and upload the file "zoomify.min.js" as an asset to your theme.
The file is located in the "dist" folder in the .zip

Add the following to the Document Header:

<script src="{{asset 'zoomify.min.js'}}"></script>
<script>
$( document ).ready(function() {
$('.article-body img').zoomify();
});
</script>

 

Now, add the following to the CSS tab:

/* ------------- Zoomify -------------*/
.zoomify {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: zoom-in;
}

.zoomify.zoomed {
cursor: -webkit-zoom-out;
cursor: zoom-out;
padding: 0;
margin: 0;
border: none;
border-radius: 0;
box-shadow: none;
position: relative;
z-index: 1501;
}

.zoomify-shadow {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
z-index: 1500;
background: rgba(0, 0, 0 , .3);
opacity: 0;
}

.zoomify-shadow.zoomed {
opacity: 1;
cursor: pointer;
cursor: -webkit-zoom-out;
cursor: zoom-out;
}

 

Save and publish to start zoomifying your article images!

Credit for Zoomify goes to Indri Muska.
This is the project's GitHub's page.


Ashleigh11

Four years later, this solution still works great and just saved me a lot of trouble. Thanks Tal!


Nicole17
  • April 30, 2020

So glad to hear that, Ashleigh! Thanks for coming back to let us know. :)


  • November 26, 2020

The solution works great! Thanks a lot, Tal!

 

I didn't have jQuery, so to make it work I had to import jQuery as well:

- Download jQuery: https://jquery.com/download/

- Upload the file "jquery-<version>.min.js" as an asset to your theme.

- The Document Header (document_head.hbs file) should then include the following:

<script src="{{asset 'jquery-3.5.1.min.js'}}"></script>
<script src="{{asset 'zoomify.min.js'}}"></script>
<script>
$( document ).ready(function() {
$('.article-body img').zoomify();
});
</script>


  • January 12, 2021

Thanks a lot, Andreas! You have the clearest hint!