0

Having an issue making a slider work in the media.phtml file.

Using bxslider on the site. Pulled the JS + CSS onto the site. But can not get the Indiv Product Slider to work.

Any ideas?

<?php
    $_product = $this->getProduct();
    $_helper = $this->helper('catalog/output');
?>
<div class="product-image product-image-zoom">
    <div class="product-image-gallery">
        <img id="image-main"
             class="gallery-image visible"
             src="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>"
             alt="<?php echo $this->escapeHtml($this->getImageLabel()) ?>"
             title="<?php echo $this->escapeHtml($this->getImageLabel()); ?>" />

        <?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
            <?php if ($this->isGalleryImageVisible($_image)): ?>
            <img id="image-<?php echo $i; ?>"
                 class="gallery-image"
                 src="<?php echo $this->getGalleryImageUrl($_image); ?>"
                 data-zoom-image="<?php echo  $this->getGalleryImageUrl($_image); ?>" />
            <?php endif; ?>
        <?php $i++; endforeach; ?>
    </div>
</div>

<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
    <h3><?php echo $this->__('More Views') ?></h3>
    <ul class="product-image-thumbs" id="recently">
    <?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
        <?php if ($this->isGalleryImageVisible($_image)): ?>
        <li>
            <a class="thumb-link" href="#" title="<?php echo $this->escapeHtml($_image->getLabel()) ?>" data-image-index="<?php echo $i; ?>">
                <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(75); ?>"
                     width="75" height="75" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
            </a>
        </li>
        <?php endif; ?>
    <?php $i++; endforeach; ?>
    </ul>
</div>
<?php endif; ?>

<?php echo $this->getChildHtml('after'); ?>



<script>
    jQuery(document).ready(function(){
  jQuery('#recently').bxSlider({
    auto: true,
    slideWidth: 170,
    pager:true,
    slideMargin:28,
    speed:500,
    controls: true,
    minSlides: 1,
    maxSlides: 4,
    moveSlides: 1

    });
});
</script>
  • Where did you call the js and the css? Ive I look in my media.phtml (from my template) and there is for example this: <head> <link rel="stylesheet" href="<?php echo $this->getSkinUrl(); ?>quickview/css/jquery.fancybox-1.3.4.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->getSkinUrl(); ?>quickview/css/stylefancy.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->getSkinUrl(); ?>quickview/css/cloud-zoom.css" type="text/css" /> </head> Maybe there is no js or css link in your case. – Marcel Dec 20 '18 at 13:56

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.