Question

我为我的猫头鹰旋转木马制作了一个自定义缩略图。缩略图是猫头鹰旋转木马的分页点，我只是将它设计成它所以它看起来像一个缩略图，我将图像放在缩略图中作为背景图像。我的问题是每当我调整浏览器大小时，图像就会消失。有谁知道如何解决这个问题，请提前帮助我，谢谢！

这是页面Website

这是我的Jquery代码：

$j(document).ready(function() {
    var owl;
    owl = $j("#owl-sub-categories");
    owl.owlCarousel({

  navigation : false, // don't Show next and prev buttons
  slideSpeed : 500,
  paginationSpeed : 400,
  singleItem:true,
  autoHeight : true,
  afterInit: afterOWLinit

}）;

function afterOWLinit() {

    // adding A to div.owl-page
    $j('.owl-controls .owl-page').append('<a class="item-link" href="#"/>');

    var pafinatorsLink = $j('.owl-controls .owl-page');

    /**
     * this.owl.userItems - it's your HTML <div class="item"><img src="http://www.ow...t of us"></div>
     */
    $j.each(this.owl.userItems, function (i) {

        $j(pafinatorsLink[i])
            // i - counter
            // Give some styles and set background image for pagination item
            .css({
                'background': 'url(' + $j(this).find('img').attr('src') + ') no-repeat'
            })
    });

}


$j(".owl-controls").appendTo(".sub-thumbnail-col");

}）;

这是我的HTML：

       <?php foreach ($categories as $categ): ?>
           <div class="item">

                <div class = "item-header">
                      <div class = "item-header-extra item_child">

                      </div>
                      <div class = "item-header-inner item_child">
                          <h1><?php echo $categ->getName()?></h1>
                      </div>

                </div>

                <div class = "item-content">
                       <div class = "sub_main_img_inner item_child">
                            <a href="<?php echo $this->getCategoryUrl($categ)?>">
                                <?php 
                                if($imgUrl = Mage::getModel('catalog/category')->load($categ->getId())->getThumbnail()):?>
                                    <img src="<?php echo $this->getBaseUrl()."media/catalog/category/".$imgUrl ?>" alt="" />
                                <?php endif; ?>
                            </a>
                       </div>

                       <div class = "sub_desc_inner item_child">
                           <?php $desc = Mage::getModel('catalog/category')->load($categ->getId())?>
                           <?php echo $desc->getFeatures();?>

                       </div>

                </div>

           </div>
       <?php endforeach; ?>


<div class = "sub-thumbnail-col col-md-1">
    <!-- This div is the container for the appended thumbnail -->
</div>

Answer 1

我怀疑在#Update之后放置＆＃34; afterOWLinit＆＃34;在你的猫头鹰配置将解决您的问题。我自己做了一些非常相似的事情，发现经过几个小时的圆圈试图解决这个问题。

猫头鹰轮播自定义缩略图背景图像在窗口调整大小时消失

1 个答案: