1

ギャラリー内の画像のオーバーレイ画像ナビゲーション矢印を作成しようとしていますが、いくつかのスクリプトが見つかりましたが、正常に機能するために画像のサイズを指定する必要があることを除いて、正常に機能します。HTMLコード

<div id="article_image">

    <img alt="" src="image.jpg" />

    <div id="article_image_overlay" style="height: 361px; width: 620px">

        <a href="prev" class="prev" title="Previous image"><span style="height: 361px; display: inline"/></a>
        <a href="next" class="next" title="Next image"><span style="height: 361px; display: inline"/></a>
    </div>

</div>

とCSSスタイル

#article_image {clear:both;margin:7px 0 10px;position:relative;overflow:hidden;overflow:hidden;}
#article_image img {display:block;}

#article_image_overlay {position:absolute;z-index:2;top:0;left:0;}
#article_image_overlay a {position:absolute;left:0;top:0;width:50%;height:100%;background:url('blank.gif') repeat 0 0;}

#article_image_overlay .next {left:auto;right:0;}

#article_image_overlay span {float:left;width:75px;height:100%;display:none;zoom:1;background:url('blank.gif') repeat 0 0;margin:0 0 0 12px;cursor:pointer;}
#article_image_overlay .next span {margin:0 12px 0 0;float:right;}

#article_image_overlay .prev:hover span,#article_image_overlay .prev.hover span {background:url('arrow_left.png') no-repeat 0 50%;}
#article_image_overlay .next:hover span,#article_image_overlay .next.hover span {background:url('arrow_right.png') no-repeat 100% 50%;}

すべて正常に動作しますが、画像のサイズに（直接）アクセスできません。HTMLコードから削除して、純粋なCSS / JSソリューションで動作するようにしたいので、ここでサポートが必要です。ありがとうございます:)

4

1 に答える 1

0

以前にこの問題がありました。コードを実行する前に、次のように画像を「ロード」する必要があります。

$('.myDiv img').load(function() {
   // run slider here...
});

スライダーを実行するには、画像を完全にロードする必要があることに気付くでしょう。これは見栄えがよくない可能性があるため、ロード中は「.myDiv」を非表示にし、画像が配置されたら表示することをお勧めします (を参照してください)。これにはjquery トゥーグルを使用します)。

それが役立つことを願っています！

メガバイト

于 2012-04-18T13:56:57.393 に答える