Product slider is not working in product view page magento

Question

I am using magento ver. 1.9.0.1 I am using slider to slide main product image in media.phtml page but it didn't work not even show any error.

Please see the below code: media.phtml

    <?php if ('true' == (string) Mage::getConfig()->getNode('modules/Amasty_Label/active')): ?>
                <div class="amlabel-div">               

                <?php echo Mage::helper('amlabel')->getLabels($_product, 'product') ?>
 <?php endif; ?>

<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>

<div class="product-image">
     <div style="position: relative;">

        <ul class="bxslider">
             <?php foreach ($this->getGalleryImages() as $_image): ?>
               <li>
                    <img id="amasty_zoom" data-zoom-image="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize($imageWidth, $imageHeight); ?>" width="<?php echo $imageWidth;?>" height="<?php echo $imageHeight;?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>"  title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
               </li>
             <?php endforeach; ?>
             </ul>

        <?php if (count($this->getGalleryImages()) > $itemCount && Mage::getStoreConfig('amconf/carousel/enable')): ?>
            <div id="prevGallery" style="top:<?php echo $smallImageSize/2 - 17;?>px" class="MagicScrollArrows MagicScrollArrowPrev"></div>
            <div id="nextGallery" style="top:<?php echo $smallImageSize/2 - 17;?>px" class="MagicScrollArrows MagicScrollArrowNext"></div>
             <?php if (Mage::getStoreConfig('amconf/carousel/pagination')): ?>
                <div id="ampagination" style="margin-top: 10px;"></div>
             <?php endif; ?>
        <?php endif; ?>
     </div>
</div>

<?php else: ?>

<div class="product-image">

       <div style="position: relative;">

       <ul class="bxslider">
             <?php foreach ($this->getGalleryImages() as $_image): ?>
               <li>
                    <img id="amasty_zoom" data-zoom-image="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>"src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize($imageWidth, $imageHeight); ?>" width="<?php echo $imageWidth;?>" height="<?php echo $imageHeight;?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>"  title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
               </li>
             <?php endforeach; ?>
            </ul> 

        <?php if (count($this->getGalleryImages()) > $itemCount && Mage::getStoreConfig('amconf/carousel/enable')): ?>
            <div id="prevGallery" style="top:<?php echo $smallImageSize/2 - 17;?>px" class="MagicScrollArrows MagicScrollArrowPrev"></div>
            <div id="nextGallery" style="top:<?php echo $smallImageSize/2 - 17;?>px" class="MagicScrollArrows MagicScrollArrowNext"></div>
             <?php if (Mage::getStoreConfig('amconf/carousel/pagination')): ?>
                <div id="ampagination" style="margin-top: 10px;"></div>
             <?php endif; ?>
        <?php endif; ?>
     </div>
</div>

<?php endif; ?>
<?php if ('true' == (string)Mage::getConfig()->getNode('modules/Amasty_Label/active')): ?>
                </div>
            <?php endif; ?>

<?php if (count($this->getGalleryImages()) > 0): ?>

<div class="more-views">

</div>
<?php endif;?>



<script src="http://urbanior.grapesdigital.com/skin/frontend/rwd/default/js/owl.carousel.js"></script>
<script src="http://urbanior.grapesdigital.com/skin/frontend/rwd/default/js/jquery.bxslider.js"></script>

<script>
jQuery(document).ready(function($){ 
$('.bxslider').bxSlider1({

        mode: 'fade'

     });
      $(".testi").owlCarousel({
        items : 5,
        itemsCustom : false,
        itemsDesktop : [2000, 1],
        itemsDesktopSmall : [979, 1],
        itemsTablet : [768, 1],
        itemsTabletSmall : false,
        itemsMobile : [479, 1],

       });
     }); 
</script>

Please see the code and tell me how to solve this issue. Thanks

in your `index.php` file write `ini_set('display_errors', 1);` and check what error is their — Amit Dwivedi, Dec 31 '15 at 07:14
your code is working fine on my system. check you have more then one thumbnails. `

__('More Views') ?>

` this is how I do — urfusion, Dec 31 '15 at 08:45
actually i want to slide the main product image in place of thumbnail images thats why i just cut the code of thumbnail images between
--
and put inside the main product image
...
and deleted the main product image code but here slider is not working......hope you understand what i am trying to say — Prince, Dec 31 '15 at 09:02

score 0 · Answer 1 · answered Dec 31 '15 at 09:44

0

Modify your html and place bxslider with the class product-image-gallery

<div class="product-image product-image-zoom">
    <div class="product-image-gallery  bxslider">
        <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>

and put Js at the end of file

<script src="http://urbanior.grapesdigital.com/skin/frontend/rwd/default/js/owl.carousel.js"></script>
<script src="http://urbanior.grapesdigital.com/skin/frontend/rwd/default/js/jquery.bxslider.js"></script>

<script>
jQuery(document).ready(function($){ 
$('.bxslider').bxSlider1({

        mode: 'fade'

     });
      $(".testi").owlCarousel({
        items : 5,
        itemsCustom : false,
        itemsDesktop : [2000, 1],
        itemsDesktopSmall : [979, 1],
        itemsTablet : [768, 1],
        itemsTabletSmall : false,
        itemsMobile : [479, 1],

       });
     }); 
</script>

I hope it work.

answered Dec 31 '15 at 09:44

urfusion

5,528
5
50
87

It shows blank page. I just updated my above code of media.phtml page ........please see that so you can understand – Prince Dec 31 '15 at 10:14
are you using any custom theme? – urfusion Dec 31 '15 at 10:16
ya actually i am using amasty extension for zoom purpose and color swatches thats why it is calling to his media.phtml page – Prince Dec 31 '15 at 10:19
Provide me link of that extension – urfusion Dec 31 '15 at 10:20
sorry bro. its a paid extension. I can not use it. provide me a link to download it So I can use it on mu local and help you further – urfusion Dec 31 '15 at 10:27
I have given you the code of media.phtml page.........you can check it and can help me as well – Prince Dec 31 '15 at 10:29
it is using their helpers and other functions like ` getLabels($_product, 'product') ?>` . So I cann't help you with only that code – urfusion Dec 31 '15 at 10:31
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/99389/discussion-between-prince-and-urfusion). – Prince Dec 31 '15 at 10:32

score 0 · Answer 2 · answered Dec 31 '15 at 16:23

0

Please check again if you already loaded bxslider's css file.

And think it should be $('.bxslider').bxSlider() not $('.bxslider').bxSlider1()

answered Dec 31 '15 at 16:23

Đặng Hiệp

54
6

Megha Jain · Answer 3 · 2019-08-01T13:09:04.323

Modify app/design/frontend/YOUR_THEME/default/template/catalog/product/view/media.phtml file

Add a class 'bxslider' with the class 'product-image-gallery' 

and put this code the end of file -

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
    <script>
     jQuery(document).ready(function($){ 
     $('.bxslider').bxSlider({

            mode: 'fade'

         });
          $(".testi").owlCarousel({
            items : 5,
            itemsCustom : false,
            itemsDesktop : [2000, 4],
            itemsDesktopSmall : [979, 1],
            itemsTablet : [768, 1],
            itemsTabletSmall : false,
            itemsMobile : [479, 1],

           });
         }); 
    </script>

Please also explain how your code tackles the OP's problem. – Yash Aug 01 '19 at 13:28 — Yash, Aug 01 '19 at 13:28

Product slider is not working in product view page magento

__('More Views') ?>

3 Answers3