0

I'm trying to move the media gallery of the product from the media.phtml file to the view.phtml file. Basically I want to move the div with class = "more-views" which is contained in the media.phtml file.

When I try to insert it in a section of the view.phtml file and try to click on the product thumbnail, the effect of the photo change does not work. I noticed that this effect works only if the media gallery's thumbnails are inserted into the div with class = "gallery gallery_img" which is in the media.phtml file.

So, how can I make the effect of the image change of the product work if I move the thumbnails of the photos in the view.phtml file?

Thanks so much

I attached a photo for a better comprehension:

enter image description here

1

Your div must be like below in right section as per your your need:

<div class="more-views">
    <h2>More Views</h2>
    <ul class="product-image-thumbs">
                    <li>
            <a class="thumb-link" href="#" title="" data-image-index="0">
                <img src="http://demo.com/media/catalog/product/cache/1/thumbnail/75x/9df78eab33525d08d6e5fb8d27136e95/w/b/wbk009t.jpg" alt="" height="75" width="75">
            </a>
        </li>
                    <li>
            <a class="thumb-link" href="#" title="" data-image-index="1">
                <img src="http://demo.com/media/catalog/product/cache/1/thumbnail/75x/9df78eab33525d08d6e5fb8d27136e95/w/b/wbk009a_2.jpg" alt="" height="75" width="75">
            </a>
        </li>
                    <li>
            <a class="thumb-link" href="#" title="" data-image-index="2">
                <img src="http://demo.com/media/catalog/product/cache/1/thumbnail/75x/9df78eab33525d08d6e5fb8d27136e95/w/b/wbk009c_2.jpg" alt="" height="75" width="75">
            </a>
        </li>
        </ul>
</div>

i tried it with above structure and its working

can you run below script in console and test:

jQuery('.product-image-thumbs .thumb-link').click(function(e) {
            e.preventDefault();
            var jlink = $j(this);
            var target = $j('#image-' + jlink.data('image-index'));

            ProductMediaManager.swapImage(target);
        });
  • I tried but not work. When i copy this code in view.phtml and i try to click on thumbnail the main image not change... – Gabriel91 Apr 19 '18 at 13:27
  • Your structure of Element is same as mine? – Chirag Rajput Apr 19 '18 at 13:28
  • Yes is the same. Currently only div "more-views" located in the media.phtml works – Gabriel91 Apr 19 '18 at 13:37
  • @Gabriel91 , check updated answer – Chirag Rajput Apr 19 '18 at 13:38
  • Hi man, thanks i resolved this! I duplicated the jQuery function in media.phtml and i created a new div of "more-views" in view.phtml. Thanks for the help – Gabriel91 Apr 20 '18 at 8:51

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.