0

I have a Magento CE 1.8.1.0 and I am customizing the product details page. What I want is under the bottom row of images (I believe you call these the gallery images) I have a a href text based link that when you click it I want to make an iframe which will load a video to appear/replace the products big image above it.

Since I have a video plugin that overwrites the media.phtml page I had to also re-code the page so that when you click the small thumbnail images they will replace the large image which is working fine. But I do not now how to write the code to make it replace the base product image with an iframe instead. Any suggestions on where to start

Here is my code that does the replacing of the large base image

   <!-- BASE IMAGE BOX -->
       <div class="product-image 360viewvid" style="display:none">
                     <iframe src="<?php echo $arqspin['image']['spin_url']; ?>" width="370" height="370" scrolling="no" frameborder="0"></iframe>
       </div>
   <a class="product-image cloud-zoom" id="main-image" title="<?php echo $this->htmlEscape($_product->getImageLabel()); ?>" href="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>">
                    <?php
                        $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(370).'" height="370" width="370" alt="'.$this->htmlEscape($_product->getImageLabel()).'" title="'.$this->htmlEscape($_product->getImageLabel()).'" id="pimage" />';
                        echo $_helper->productAttribute($_product, $_img, 'image');
                    ?>
  </a>
  <script type="text/javascript">
            //<![CDATA[
                jQuery(document).ready(function(){
                    var options = {
                            zoomType: 'reverse',//Values: standard, reverse
                            zoomWidth: 374,
                            zoomHeight: 327,
                            xOffset: 0,
                            yOffset: 50,
                            imageOpacity: 0.6,
                            title : false
                    };
                    /*jQuery('#main-image').jqzoom(options);*/
                });
            //]]>
 </script>

 <!-- The bottom thumbnail images -->
 <?php if (count($this->getGalleryImages()) > 0): ?>
    <div class="more-views" id="moreViews">
       <!-- <h2><?php echo $this->__('More Views') ?></h2>--> 
       <ul id="image-list" class="slides">
            <?php foreach ($this->getGalleryImages() as $_image): ?>
                <li>
                   <a href="#" onclick="imageReplace('<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>')" rel="useZoom:'zoomID',smallImage:'<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize(517, 577)?>'">
                       <img class="img-responsive" src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(162, 181)?>" width="162" height="181" alt="<?php echo $this->htmlEscape($_image->getLabel())?>" />
                   </a>
               </li>
        <?php endforeach; ?>
    </ul>

  </div>
 <?php endif; ?>
 <a href="#" id="showvid"><i class="fa fa-refresh"></i> 360&deg; View</a>


 <!-- script to replace base product image with the image that is clicked on from the thumbnails -->
 <script type="text/javascript">
   function imageReplace(newimageURL)
     {
       document.getElementById("pimage").setAttribute('src', newimageURL);
       document.getElementById("pimage").style.width = '100%';
     }

    <!-- make 360video appear when you click 360 view button and replace large base product image
    $(function()
    {
       $('#showvid').click(function() 
        {
           $('#360viewvid').show().find("iframe").attr("src","<?php echo              $arqspin['image']['spin_url']; ?>");
           $('#pimage').hide();
        });
    });
 </script>
2
  • Thank you philwinkle. That got it working for me. However I have one more issue. So now when you click the 360 view text link the video shows and hides the products large base image. However I need when a user clicks on one of the thumbnail images for the video now to get back hidden and for what ever thumbnail is clicked to be displaced. So I edited the javascript that replaces the large image when you click on a thumbnail like below. However now the video will go away but an image will not display – Jayreis Sep 3 '15 at 14:57
  • function imageReplace(newimageURL){ document.getElementById("pimage").setAttribute('src', newimageURL); document.getElementById("pimage").style.width = '100%'; jQuery('#360viewvid').hide(); jQuery('#pimage').show(); } – Jayreis Sep 3 '15 at 14:59
3

The issue looks like your imageReplace javascript function expects that $ is jQuery, wherein in Magento it's actually prototype.

Replace these with jQuery like your ajax call in the block above.

2
  • 1
    Of we can use $j if we jQuery non conflict define link this $j=jQuery.noConflict(); – Amit Bera Sep 3 '15 at 14:42
  • Only in 1.9+, but yes you're right. – philwinkle Sep 3 '15 at 14:44

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.