0

私は現在、jquery gallerifficプラグインを使用して、多数の画像（マップ）を表示しています。Jqueryはインデックスを使用してそれぞれを生成しているようです。したがって、現在のインデックスに応じて表示されるさまざまなdiv/imagesをどのように適用するのか疑問に思っています。

たとえば、各スライドには、画像スライダーのように回転する地図の画像（複数の地図）が含まれます。カーソルを合わせると、単純なcssスプライトが表示されるさまざまな位置の小さな画像（Googleマップのマーカーなど）が必要になります。情報」ボックス。

div / imagesをjavascriptのコンテナに適用するために、各スライドを一意に識別する方法がわからないという事実に苦労しています。

Galleriffic：

画像スライドを生成するコードの一部：

buildImage: function(imageData, isSync) {
            var gallery = this;
            var nextIndex = this.getNextIndex(imageData.index);

            // Construct new hidden span for the image
            var newSlide = this.$imageContainer
                .append('<span class="image-wrapper current"><a class="advance-link" rel="history" href="#"></a></span>')
                .find('span.current').css('opacity', '0');

            newSlide.find('a')
                .append(imageData.image)
                .click(function(e) {
                    gallery.clickHandler(e, this);
                });

ヘルプ/指示は大歓迎です

-ありがとう

4

1 に答える 1

0

onSlideChange画像がホバーされたときに何をすべきかを決定するために、galleriffic プラグイン自体のコールバックを使用しないのはなぜですか?

jQuery(document).ready(function($) {
    var _currentSlide = -1;
    var gallery = $('#thumbs').galleriffic({
        onSlideChange: function(prevIndex, nextIndex) {
            //use nextIndex to determine what mouseover event does
            _currentSlide = nextIndex;
        }
     }

      $(".mainImageClass").mouseover(function() {
          //hide all current markers
          $(".marker").hide();
          //show only the relevant marker
          $(".marker[rel='" + _currentIndex + "']").show();
      });
 }

HTML:

<div class='marker' rel='1'>Content to show when over slide #1</div>
<div class='marker' rel='2'>Content to show when over 2</div>
...

ソースを変更するのではなく、このイベントを利用します。

于 2012-09-28T14:16:33.490 に答える