Question

我正在使用magento ver。 1.9.0.1我使用滑块在media.phtml页面中滑动主要产品图像，但它甚至没有显示任何错误。

请参阅以下代码： 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>

请参阅代码并告诉我如何解决此问题。感谢

Answer 1

修改您的HTML并将designer: could not exec '/usr/lib/x86_64-linux-gnu/qt5/bin/designer': No such file or directory放在课程bxslider

上

product-image-gallery

并将Js放在文件的末尾

<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>

我希望它有效。

Answer 2

如果您已经加载了bxslider的css文件，请再次检查。

认为它应该是 $（＆＃39; .bxslider＆＃39;）。bxSlider（）而不是 $（＆＃39; .bxslider＆＃39;）。bxSlider1（）

Answer 3

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>

产品滑块在产品视图页magento中不起作用

3 个答案: