1

Product images (main & thumbnails) are not displaying on product page.
Only error logged in browser console shows:

Uncaught TypeError: Cannot read property 'show' of undefined

this.settings.fotoramaApi.show(mainImageIndex);

gallery.js:296

About my build:

  • magento 2.1.1, upgraded via CLI
  • nexcess magento hosting setup
  • sample data deployed
  • custom child theme
  • Magento/luma parent theme
  • no modifications to catalog/product/view templates or layout

Page source / browser output:

<div class="column main">
    <div class="product-info-main">...</div>
    <div class="product media"><div class="gallery-placeholder" data-gallery-role="gallery-placeholder"><!--
    /**
     * Copyright © 2016 Magento. All rights reserved.
     * See COPYING.txt for license details.
     */
    -->
    <div class="fotorama-item" data-gallery-role="gallery">
        <div data-gallery-role="fotorama__focusable-start" tabindex="-1"></div>
        <div class="fotorama__wrap fotorama__wrap--css3 fotorama__wrap--slide fotorama__wrap--toggle-arrows">
            <div class="fotorama__stage" data-fotorama-stage="fotorama__stage">
                <div class="fotorama__arr fotorama__arr--prev" tabindex="0" role="button" aria-label="Previos" data-gallery-role="arrow">
                    <div class="fotorama__arr__arr"></div>
                </div>
                <div class="fotorama__stage__shaft" tabindex="0" data-gallery-role="stage-shaft">
                </div>
                <div class="fotorama__arr fotorama__arr--next fotorama__arr--disabled" tabindex="-1" role="button" aria-label="Next" data-gallery-role="arrow">
                    <div class="fotorama__arr__arr"></div>
                </div>
                <div class="fotorama__video-close"></div>
                <div class="fotorama__zoom-in" data-gallery-role="fotorama__zoom-in" aria-label="Zoom in" role="button" tabindex="0"></div>
                <div class="fotorama__zoom-out" data-gallery-role="fotorama__zoom-out" aria-label="Zoom out" role="button" tabindex="0"></div>
                <div class="fotorama__spinner"></div>
            </div>
            <div class="fotorama__nav-wrap" data-gallery-role="nav-wrap">
                <div class="fotorama__nav fotorama__nav--thumbs">
                    <div class="fotorama__fullscreen-icon" data-gallery-role="fotorama__fullscreen-icon" tabindex="0" aria-label="Exit fullscreen" role="button"></div>
                    <div class="fotorama__thumb__arr fotorama__thumb__arr--left" role="button" aria-label="Previos" data-gallery-role="arrow" tabindex="-1">
                        <div class="fotorama__thumb--icon"></div>
                    </div>
                    <div class="fotorama__nav__shaft">
                        <div class="fotorama__thumb-border"></div>
                    </div>
                    <div class="fotorama__thumb__arr fotorama__thumb__arr--right" role="button" aria-label="Next" data-gallery-role="arrow" tabindex="-1">
                        <div class="fotorama__thumb--icon"></div>
                    </div>
                </div>
            </div>
        </div>
        <div data-gallery-role="fotorama__focusable-end" tabindex="-1"></div>
    </div>
    <div class="magnifier-preview" data-gallery-role="magnifier" id="preview"></div>
    </div>
    <!--Fix for jumping content. Loader must be the same size as gallery.-->
    <script>
        var config = {
                "width": 700,
                "thumbheight": 110,
                "navtype": "slides",
                "height": 560        },
            thumbBarHeight = 0,
            loader = document.querySelectorAll('[data-gallery-role="gallery-placeholder"] [data-role="loader"]')[0];

        if (config.navtype === 'horizontal') {
            thumbBarHeight = config.thumbheight;
        }

        loader.style.paddingBottom = ( config.height / config.width * 100) + "%";
    </script>


    </div><div class="bundle-options-container">...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.