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">...
