Replace Product large image with iframe onclick a link

Question

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>

Answer 1

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.