Display Product 360 HTML in the _ProductDetailsPictures view

Hi,

I have a requirement to display a product 360 view of my product on our Product details page.  I want to display it in the Product Details Pictures view so that it becomes one more "photo" of the product.  The product 360 is simply an iframe that comes from an online service.

I've already taken care of displaying the thumbnail but I cannot get the partial view to be displayed; I get a file not found error.  I guess the problem I have is in the way I'm calling the link...

The code that displays the the thumbnail and  photo is like this:

 @if (!String.IsNullOrEmpty(Model.SpinVideoId))
{
<a class="thumb-popup-link" href="/Themes/Tiffany/Views/Product/_spin.cshtml" title="Product 360 Image">
<img src="~/Content/Images/360img.jpg" alt="Product 360 Image" title="Product 360 Image" />
</a>
}

Where do you get the file not found error? Check the view template path or the path to this iframe.

Once I click the thumbnail to open my view, I get the error in the screenshot below.  Is it that the modal popup will only display image files?  I think the error is in how I'm calling it.  On a different section, I called @HTML.Partial("_spin") and that worked, so how do I call my view from the <a> tag source field? (i.e. <a src=~/themes/.../.../_spin.cshtml">)?

I figured out one way to make it work.  I created an action method in the Product controller that takes the video Id as a string parameter.

Then I call the view and pass my id as the model.

Another problem I found was that the MagnificPopup script had a type property set to image and that did not let my iframe display, I simply changed the type to iframe and styled it to fit.  Evidently the iframe type has no problem displaying images also.

Here is the updated code for the thumbnail image:

<a class="thumb-popup-link" href="@Url.Action("spin", "Product", new { SpinVideoId = @Model.SpinVideoId })" title="Product 360 Image">
<img src="~/Content/Images/360img.jpg" alt="Product 360 Image" title="Product 360 Image" />
</a>

I hope this helps others!