0

ユーザーがボタンをクリックしたときにのみ開くギャラリーがあります。最初にギャラリーを表示したくないので、コード display:none を追加しました。しかし、ボタンをクリックすると背景だけが開き、画像は表示されません。

何が問題なのですか？

<a onClick="$('.fixed-bar').toggle('slow');" data-icon="grid" data-iconpos="notext" data-inline="true" class="ui-btn-right" data-direction="reverse" style="margin-right:70px">Paginas</a>

<div class="container demo-3">
    <div class="main">
        <div class="fixed-bar" style="display:none">
            <ul id="carousel" class="elastislide-list">
                <li><a href="#"><img src="elastislide/small/1.jpg" alt="image01" /></a></li>
                <li><a href="#"><img src="elastislide/small/2.jpg" alt="image02" /></a></li>
            </ul>
        </div>
    </div>
</div>

<script type="text/javascript">
    $( '#carousel' ).elastislide( {
        minItems : 2
    } );
</script>
4

2 に答える 2

3

トピックから少し外れますが、一般的には、jQuery/CSS をそのようにインラインで記述しない方がよいでしょう。メンテナンスとパフォーマンス上の理由から、それらを外部ファイルに配置することをお勧めします。

これは動作中のjsFiddleです。

ところで、私はその特定のリンクのクラス ' ui-btn-right' をここで jQuery と CSS のセレクターとして使用しました。おそらく、その特定のリンクに ID または何かをセレクターとして使用するように指定する必要があります。 .

jQuery:

$('.ui-btn-right').on('click', function(){
  $('.fixed-bar').toggle('slow');
});

HTML:

<a data-icon="grid" data-iconpos="notext" data-inline="true" class="ui-btn-right" data-direction="reverse">Paginas</a>   
<div class="container demo-3">
   <div class="main">
     <div class="fixed-bar">   
       <ul id="carousel" class="elastislide-list">
         <li><a href="#"><img src="elastislide/small/1.jpg" alt="image01" /></a></li>
         <li><a href="#"><img src="elastislide/small/2.jpg" alt="image02" /></a></li>
       </ul>
     </div>
   </div>
</div>

CSS:

.ui-btn-right {
  margin-right:70px;      
}

.fixed-bar {
    display:none;
}
于 2013-04-08T17:30:13.863 に答える
0

カルーセル効果を行うためにある種の JavaScript ギャラリーを使用している場合。style="visibility: hidden"代わりに使用する必要がある場合があります。スクリプトは最初にサイズを計算している可能性があり、display:noneオブジェクトはこれらのサイズになりません。

編集：あなたはプラグインを使用しているので、私はまだ私の可視性を待機しています：隠されたソリューション。参照用にプラグインがリンクされているようには見えませんが、それは elatislide-responsive-carousel であると推測しています。

このプラグインのソースを見ると、340 行目で、後でプラグインで使用するために画像を格納するために、outerWidth と outerHeight を呼び出すように見えます。

問題は、0 を格納していることです。以前に投稿した jsfiddle を変更して、ここに表示しました。

http://jsfiddle.net/Z6DhF/1/

インラインを使用する代わりに他の人が提案したように、このコードを試してください

CSS

.fixed-bar { visibility: hidden }

于 2013-04-08T17:31:33.897 に答える