带有缩略图分页的Jquery Cycle插件

Question

I am trying to get the jQuery cycle plugin working in a CMS (hence the messy mark up) and have everything working except the paging thumbnails. Due to the CMS, I have to put the thumbnails' URLs in their corresponding image's class. Then I am trying to pull those URLs and use them for the paging buttons' images. The paging wrapper is being built, but each paging button is empty. Not sure what I am doing wrong.

I also have multiple cycle slideshows on the same page.

Here is my 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);

and here is my 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>

Thanks for the help.

Answer 1

The class name you given to the img tag is invalid

the class name should be start with a . and followed by a name but you gave name as

image1Thumb.jpg its invalid

just use like this

in your stle sheet

 .image1Thump { your styles goes here }

in your html

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

Then it should work.