Fix php, jquery code for magento 1.9 store

I have a magento 1.9 store that I have made a custom piece of code to show a 360deg image in an iframe.

I have managed to get the iframe to show on the product page but it has a few issues that I need help to fix. this should be fairly easy but a little past my novice rank with coding.

The current code has a foreach loop that shows the images for any specific product.

1. I need the link for the image to show at the end of the foreach loop.

My attempts to just add after <?php endforeach ?> ends with the thumbnail endlessly looping as it thinks its still part of the carousel css. Adding it outside makes it not part of the carousel.

I need it to add to the very end of the foreach loop as the last item if the statement exists.

2. once the thumbnail is loaded i would like the link to the iframe show in the .product-image div replacing the default image.

here is the code that I currently have )but not working yet)

I am attempting to add a couple of new elements to a Magento 1.9 image carousel on the products page.

Ideally I would like to add at the end of the foreach loop but whatever I do it just keeps duplicating the div...

The second issue is that I am having trouble getting the content of the div to show in the class="product-image" div on the product page.

My goal is to show thumbnail image at the end of the loop array and when you click on the thumbnail image it shows the content of the iframe in the div "product-image".

I have tried various bits of JavaScript but I can't get it to work. Also after trying to add to the end of the loop I have just ended up putting it on the outside of the div as there is other jQuery actions going on here that are forcing the new div I add after endforeach to duplicate endlessly.

Goals:

show thumbnail at end of loop

link on thumbnail shows iframe in <div class="product-image">

Here is the code I have hacked... You must excuse me as I am complete novice at this and can read PHP Java ok but creating new code is a different story.

<div class="more-views additional-carousel">

<?php

$sliderFor = 4;

$productCount = count($this->getGalleryImages());

?>

<div id="additional-carousel" class="<?php if ($productCount >= $sliderFor){?>product-carousel<?php }else{?>products-grid<?php }?> <?php if ($productCount <= 1): ?>mobile-tablet<?php endif; ?>">

<?php foreach ($this->getGalleryImages() as $_image): ?>

<div class="slider-item">

<div class="product-block">

<a href='<?php echo $this->helper(' catalog/image ')->init($_product, 'image ', $_image->getFile())->resize(768);?>' class='cloud-zoom-gallery lightbox-group' title='<?php echo $this->escapeHtml($_image->getLabel()) ?>' rel="useZoom: 'zoom1', smallImage: '<?php echo $this->helper('catalog/image')->init($_product, 'image', $_image->getFile())->resize(768);?>' ">

<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(768); ?>" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />

</a>

</div>

</div>

<?php endforeach; ?>

</div>

<!-- if spinzam id exists in attributes-->

<?php if ($_product->getData("spinzam_id") == true):?>

<!-- thumbnail for spinzam link-->

<div class="slider-item">

<div class="product-block">

<a href="#" onclick="??"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(150); ?>"/>

<div class="uk-overlay uk-position-bottom product-block">

<p>360</p>

</div>

</a>

</div>

</div>

<!--content to add to .product-image div-->

<div id="spinzam" style="display:none;"><iframe src="[login to view URL]<?php echo $_product->getData(" spinzam_id ")?>" scrolling="no" style="max-width:100%; max-height:100vw;"></iframe>

</div>

<?php endif;?>

</div>

PHP Magento JavaScript CSS jQuery / Prototype

Proje NO: #20439202

Proje hakkında