1

フォトギャラリーを作ろうとしています。大きな写真コンテナーは空で始まります。サムネイルをクリックすると、ID を使用してフルサイズの写真がコンテナーに読み込まれ、フェードイン機能により、フェードする前に読み込まれたことが確認されます。ギャラリーのこの部分は問題なく動作しますが、前と次のボタンがまったくありません。

前へボタンと次へボタンが機能しません。次の写真をコンテナにロードし、ロードされるまで待ってからフェードインするようにしたいと思います。 /10/編集

JS

function fadeIn(obj) {
    $(obj).fadeIn(1000);
}

$(".photo").click(function() {
    var id = $(this).attr('id');
    $('#preload').prop('src',   
    'http://www.klossal.com/klossviolins/instruments/violins/full/' + id + '.jpg');

    fadeIn('#' + id);

$("#next").click(function() {  
  var id_a = $(id).next().attr('id');

  $('#preload').prop('src', 'http://www.klossal.com/klossviolins/instruments/violins/full/' + id + '.jpg');

  fadeIn('#' + id);
  });



  $("#prev").click(function() {  
  var id_b = $(id).prev().attr('id');

  $('#preload').prop('src', 'http://www.klossal.com/klossviolins/instruments/violins/full/' + id + '.jpg');

  fadeIn('#' + id);

});

});

CSS

ul {
  list-style-type: none;
}

.UNH_album li{
  float:left;
  padding:10px;
}

#prev {
  width:50px;
  height:50px;
  background:green;
  float:left;
}

#next {
  width:50px;
  height:50px;
  background:blue;
  float:left;
}

HTML

<div id="loading_box_container">
   <div id="loading_box">
        <img id="preload" onload="fadeIn(this)" src="#" style="display:none;"/>
</div>

<div id="nav">
  <div id="prev"></div>
  <div id="next"></div>
  <br style="clear:both;">
</div>

</div>  


<ul class="UNH_album">
  <li id="DanteBalboni_1918" class="photo">
    <img src="http://www.klossal.com/klossviolins/instruments/violins/DanteBalboni_1918.jpg">
</li>
<li id="KarlWurm_1978" class="photo">
    <img src="http://www.klossal.com/klossviolins/instruments/violins/KarlWurm_1978.jpg">
</li>
<li id="KarlGramm_1923" class="photo">
    <img src="http://www.klossal.com/klossviolins/instruments/violins/KarlGramm_1923.jpg">
</li>
</ul>
4

1 に答える 1

1

私が抱えていた問題は変数の定義にあり、グローバル変数を使用する必要があり、最終的には次のようになりました。

答えはグローバル変数なので、次のようになりました。

$(".photo").click(function() {
    id = $(this).attr('id');
});

$("#next").click(function() {  
      var id_a = $('#' + id).next().attr('id');
      id = id_a;
});

$("#prev").click(function() {  
      var id_b = $('#' + id).prev().attr('id');
      id = id_b;
});
于 2013-02-14T02:28:13.993 に答える