0

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:

  1. show thumbnail at end of loop
  2. 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="https://spinzam.com/shot/embed/?idx=<?php echo $_product->getData(" spinzam_id ")?>" scrolling="no" style="max-width:100%; max-height:100vw;"></iframe>
    </div>

    <?php endif;?>

</div>

Your Answer

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

Browse other questions tagged or ask your own question.