1

私の Web サイトには小さなサムネイル ("t1.jpg"、"t2.jpg"、"t3.jpg"、...) のリストがあり、中央のダイアログ ボックスにフルサイズで表示されるコードを作成したいと考えています。画像のバージョン。これを行う方法？

たとえば、t1.jpg をクリックすると、中央のボックスに big1.jpg 画像が表示されます。動的に。ページの読み込み中にすべての画像を読み込みたくありません。その割には性能がいいはずです。

誰でも私にアドバイスをもらえますか？ありがとう。

4

5 に答える 5

6

これは非常に単純なアプローチです - Darkbox Galleryの簡略化されたバージョンです:

基本的に、大きな画像srcをdata-pop属性に保存します。そのような要素がクリック
されると、ポップアップが呼び出されます。 CSS は非常に簡単で、jQuery でさえそれほど複雑ではないはずです - ポップアップの背景画像が CSS3 であるかどうかを定義するために現在のウィンドウ サイズを計算する部分を除いて、または-小さい画像には"auto"が使用されます (したがって、 't スケール):data-pop
containauto

/* POP BOX */
;(function() {

  var $pop = $("#pop");

  $(document).on("click", "[data-pop]", function() {

    var popSrc= $(this).data("pop"),
        docW= Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
        docH= Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

    $pop.addClass("visible loading").css({backgroundImage:"none"});

    $("<img/>").on("load", function() {
      var bigger = (this.width > docW || this.height > docH)
      $pop.removeClass("loading").css({
        backgroundSize: bigger ? "contain" : "auto",
        backgroundImage: "url(" + this.src + ")"
      });
    }).attr("src", popSrc);

  });

  $("#popClose").on("click", function() {
    $pop.removeClass("visible loading");
  });

}());
/* 
POP BOX 
*/
#pop {
  position: fixed;
  z-index: 999999;
  color: #fff;
  background: rgba(0, 0, 0, 0.6) none no-repeat 50% 50%;
  box-shadow: 0 0 0 24px rgba(0, 0, 0, 0.6);
  left: 24px;
  top: 24px;
  right: 24px;
  bottom: 24px;
  transition: 0.3s;
  visibility: hidden;
  opacity: 0;
}

#pop.loading:after {
  content: "Loading...";
  position: absolute;
  top: 50%;
  left: 44%;
}

#pop.visible {
  visibility: visible;
  opacity: 1;
}

#popClose {
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 2em;
}
<!-- POP BOX -->
<div id="pop"><a id="popClose">&times;</a></div>

<!-- USE EXAMPLE -->
<img src="http://placehold.it/50x50/0bf" data-pop="http://placehold.it/860x590/0bf" alt="" />
<img src="http://placehold.it/50x50/f0b" data-pop="http://placehold.it/590x860/f0b" alt="" />



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

于 2012-11-27T00:04:07.143 に答える
1

これを行うのに役立つ jQuery ライトボックス スクリプトがいくつかあります。

ここにいくつかの最高のリストがあります: http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts

于 2012-11-26T23:41:14.910 に答える
1

フェイスボックスは良い選択だと思います。このページに必要な機能の例があります。

于 2012-11-26T23:44:57.940 に答える
1

jquery ライトボックスのような？

http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts

画像のサムネイルをクリックすると、画像がモーダルで読み込まれます。

于 2012-11-26T23:41:40.913 に答える
1

ライトボックス。そのためのjQueryプラグインがあります。公式サイトの「使用方法」タブをチェックしてください: http://leandrovieira.com/projects/jquery/lightbox/

于 2012-11-26T23:42:35.690 に答える