Question

我试图让jQuery循环插件在CMS中工作（因此杂乱的标记）并且除了分页缩略图之外一切都正常工作。由于CMS，我必须将缩略图的URL放在相应图像的类中。然后我试图拉这些URL并将它们用于分页按钮的图像。正在构建分页包装器，但每个分页按钮都是空的。不确定我做错了什么。

我在同一页面上也有多个循环幻灯片。

这是我的javascript：

    (function ($) {
    $('.gallery').each(function (i) {
        $(this).after('<div class="galleryNav galleryNav' + i + '">').cycle({
            fx: 'scrollHorz',
            speed: 'fast',
            timeout: 0,
            pager: '.galleryNav' + i,
            pagerAnchorBuilder: function (idx, slide) {
            var slideImg = $(slide).attr('class');

            if (slideImg == undefined){
            slideImg = "";
            };
            return '<div><a href="#" style="background-image:url(' + slideImg + ');"></a></div>';
            }
        });
    });
})(jQuery);

这是我的HTML：

<div class="row">
 <article class="galleryArticle">
      <div class="galleryWrap">
           <div class="gallery">
                <img src="image1.jpg" class="image1Thumb.jpg" alt="image1" />
                <img src="image2.jpg" class="image2Thumb.jpg" alt="image1" />
                <img src="image3.jpg" class="image3Thumb.jpg" alt="image1" />
                <img src="image4.jpg" class="image4Thumb.jpg" alt="image1" />
           </div>
      </div>
      <header>
           <h1 class="articleTitle">Title</h1>
           <h2 class="eventDate">Date</h2>
      </header>
      <div class="articleContent">Article Content</div>
 </article>

感谢您的帮助。

Answer 1

您为img标记指定的班级名称无效

类名应该以a开头。然后是一个名字，但你的名字是

image1Thumb.jpg its invalid

就像这样使用

在你的单页

 .image1Thump { your styles goes here }

你的HTML中的

<img src="image1.jpg" class="image1Thumb" alt="image1" />

然后它应该工作。

具有缩略图分页的Jquery循环插件

1 个答案: