Zoom function to increase the size of the image responsively within it's container element at the correct height position.

gallery-zoom.html

<!--
HTML markup for gallery and each element.
The important elements are the wrapping element ".image-grid" the
actual zoomable div ".image" and the clickable zoom button 
".image-zoom" which is passed to the jQuery funciton.
-->

<div id="image" class="image-grid">
    <article class="image funeralplan-option" id="funeral-option--casket-aries-bronze"
             data-group="casket,protective_metal">
        <figure class="image-media funeralplan-option-media">
            <div class="image-zoom">
                <span class="visual-hide">Zoom</span>
            </div>
            <img src="/image/casket-aries-bronze/open/image%2Fimage%2F"
            alt="Aries Bronze  Image" />
        </figure>
        <div class="image-info">
            <h3 class="image-title">Aries Bronze </h3>
            <span class="image-categorization">
                Casket / Protective Metal
            </span>
            <span class="image-price">
                $3,188
            </span>
        </div>
        <div class="image-option-desc">
            
        </div>
    </article>
    <article class="image funeralplan-option" id="funeral-option--casket-desert-champagne"
             data-group="casket,protective_metal">
        <figure class="image-media funeralplan-option-media">
            <div class="image-zoom">
                <span class="visual-hide">Zoom</span>
            </div>
            <img src="/image/casket-desert-champagne/open/image%2Fimage%2F"
            alt="Desert Champagne Image" />
        </figure>
        <div class="image-info">
            <h3 class="image-title">Desert Champagne</h3>
            <span class="image-categorization">
                Casket / Protective Metal
            </span>
            <span class="image-price">
                $5,335
            </span>
        </div>
        <div class="image-option-desc">
            
        </div>
    </article>
    <article class="image funeralplan-option" id="funeral-option--casket-golden-classic"
    data-group="casket,protective_metal">
        <figure class="image-media funeralplan-option-media">
            <div class="image-zoom">
                <span class="visual-hide">Zoom</span>
            </div>
            <img src="/image/casket-golden-classic/open/image%2Fimage%2F"
            alt="Golden Classic Image" />
        </figure>
        <div class="image-info">
            <h3 class="image-title">Golden Classic</h3>
            <span class="image-categorization">
                Casket / Protective Metal
            </span>
            <span class="image-price">
                $13,056
            </span>
        </div>
        <div class="image-option-desc">
            
        </div>
    </article>
    <article class="image funeralplan-option" id="funeral-option--casket-golden-sienna"
    data-group="casket,protective_metal">
        <figure class="image-media funeralplan-option-media">
            <div class="image-zoom">
                <span class="visual-hide">Zoom</span>
            </div>
            <img src="/image/casket-golden-sienna/open/image%2Fimage%2F"
            alt="Golden Sienna Image" />
        </figure>
        <div class="image-info">
            <h3 class="image-title">Golden Sienna</h3>
            <span class="image-categorization">
                Casket / Protective Metal
            </span>
            <span class="image-price">
                $10,172
            </span>
        </div>
        <div class="image-option-desc">
            
        </div>
    </article>
</div>

gallery-zoom.js

/**
 * Gallery zoom functions
 * Description: The following code allows you to build a zoom
 * function responsively to increase the size of the image within it's container
 * element t the correct height position.
 */

    /**
     * Attach zoom to image elements within a gallery
     * @param selector str Clickable element to cause zoom
     * @param selector str Parent image element that wraps the image-zoom
     *                     element and will be "zoomed" to 100% width
     * @param selector str Gallery wrapper to set the height relative too
     */
    $('.image-zoom').galleryZoom('.image', '.image-grid');

    /**
     * Zoom into an image within a grid. The zoom button will enable set
     * some classes which will be used to enlarge the image. All real
     * work will be done within the `state-zoom` on the image itself and
     * `state-active` on the grid.
     *
     * @chainable
     * @param  {selector} grid The parent wrapping grid element
     * @return {selector} provided jQuery element
     */
    $.fn.imageZoom = function (image, grid) {
        var $grid = $(grid);
        var gridoffset = $grid.offset().top;
        var current_zoom = null;
        return $(this).on('click', function (e) {
            var option = $(this).parents(image);
            var current_position = $(this).offset().top - gridoffset;
            e.preventDefault();
            // Zoom out
            if ($(option).hasClass('state-zoom')) {
                $('.state-zoom').removeClass('state-zoom').css('top', '');
                option.removeClass('state-zoom');
                $grid.removeClass('state-inactive');
                current_zoom = null;
                return this;
            }
            if ($('.state-zoom').length) {
                $('.state-zoom').removeClass('state-zoom').css('top', '');
            }
            // Zoom in
            option.addClass('state-zoom').css('top', current_position);
            $grid.addClass('state-inactive');
            current_zoom = option;
        });
    };