Article image swap/zoom on mouseover

5 Comentarios

  • Tal Admon

    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.

    3
  • Ashleigh Rentz

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

    0
  • Nicole S.
    Zendesk Community Team

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

    0
  • Andreas Hove

    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>

    1
  • Andrey Bezukladnikov

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

    0

Iniciar sesión para dejar un comentario.

Tecnología de Zendesk