I need to show by default 5 images in magento prduct page gallery. I change the view of gallery is from vertical to horizontal. I need to know that which js file i have to modify for display default 5 images in product galley. Please specify any way by which i can display 5 images default in product galley page.
My view.xml galley code
<!-- Gallery and magnifier theme settings. Start -->
<var name="gallery">
<var name="nav">thumbs</var> <!-- Gallery navigation style (false/thumbs/dots) -->
<var name="loop">true</var> <!-- Gallery navigation loop (true/false) -->
<var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false) -->
<var name="arrows">false</var> <!-- Turn on/off arrows on the sides preview (true/false) -->
<var name="caption">false</var> <!-- Display alt text as image title (true/false) -->
<var name="allowfullscreen">false</var> <!-- Turn on/off fullscreen (true/false) -->
<var name="navdir">vertical</var> <!-- Sliding direction of thumbnails (horizontal/vertical) -->
<var name="navarrows">true</var> <!-- Turn on/off on the thumbs navigation sides (true/false) -->
<var name="navtype">slides</var> <!-- Sliding type of thumbnails (slides/thumbs) -->
<var name="transition">
<var name="effect">slide</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
<var name="duration">500</var> <!-- Sets transition duration in ms -->
</var>
<var name="fullscreen">
<var name="nav">thumbs</var> <!-- Fullscreen navigation style (false/thumbs/dots) -->
<var name="loop">true</var> <!-- Fullscreen navigation loop (true/false/null) -->
<var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false/null) -->
<var name="arrows">false</var> <!-- Turn on/off arrows on the sides preview (true/false/null) -->
<var name="caption">false</var> <!-- Display alt text as image title (true/false) -->
<var name="navdir">horizontal</var> <!--Sliding direction of thumbnails in full screen(horizontal/vertical) -->
<var name="thumbwidth">50</var> <!-- Width of thumbnails in fullscreen -->
<var name="thumbheight">50</var> <!-- Height of thumbnails in fullscreen -->
<var name="navigation_carousel">true</var> <!-- Display navigation thumbs as carousel (true/false) -->
<var name="transition">
<var name="effect">dissolve</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
<var name="duration">500</var> <!-- Sets transition duration in ms -->
<var name="carousel">true</var> <!-- Display navigation thumbs as carousel (true/false) -->
</var>
</var>
</var>
Gallery.phtml setting.
<script type="text/x-magento-init">
{
"[data-gallery-role=gallery-placeholder]": {
"mage/gallery/gallery": {
"mixins":["magnifier/magnify"],
"magnifierOpts": <?php /* @escapeNotVerified */ echo $block->getMagnifier(); ?>,
"data": <?php /* @escapeNotVerified */ echo $block->getGalleryImagesJson(); ?>,
"options": {
"nav": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/nav"); ?>",
"loop": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/loop"); ?>,
"keyboard": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/keyboard"); ?>,
"arrows": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/arrows"); ?>,
"allowfullscreen": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/allowfullscreen"); ?>,
"showCaption": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/caption"); ?>,
"width": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
"thumbwidth": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'width'); ?>,
"thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height')
?: $block->getImageAttribute('product_page_image_small', 'width'); ?>,
"height": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'height')
?: $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
"transitionduration": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/transition/duration"); ?>,
"transition": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/transition/effect"); ?>",
"navarrows": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/navarrows"); ?>,
"navtype": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/navtype"); ?>",
"navdir": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/navdir"); ?>"
},
"fullscreen": {
"nav": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/fullscreen/nav"); ?>",
"loop": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/fullscreen/loop"); ?>,
"navdir": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/fullscreen/navdir"); ?>",
"arrows": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/fullscreen/arrows"); ?>,
"showCaption": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/fullscreen/caption"); ?>,
"transitionduration": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/fullscreen/transition/duration"); ?>,
"transition": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/fullscreen/transition/effect"); ?>"
},
"breakpoints": <?php /* @escapeNotVerified */ echo $block->getBreakpoints(); ?>
}
}
}
</script>