0

imgリンクを使用してPhotoSwipeギャラリーを開く解決策を探しています。ギャラリーのアイコンが付いた IMG があります。そして、ユーザーがそれをクリックすると、ギャラリーが開きます。

どうすればそれを処理できるか誰かに考えがありますか?

私はこれを見つけました。しかし、これはロード時にギャラリーを開きます。

<script type="text/javascript">
        (function(window, PhotoSwipe){

            document.addEventListener('DOMContentLoaded', function(){

                var
                    options = {
                        preventHide: true
                    },
                    instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );

                    instance.show(0);

            }, false);


        }(window, window.Code.PhotoSwipe));

</script>

よろしくお願いします

4

2 に答える 2

1

私は photoSwipe を使い始めたばかりなので、これがうまくいくとは確信していませんがinstance.show(0)、クリックイベントを呼び出すだけでよいようです。

ページにこの要素があると仮定すると、次の<a id="launch-gallery" href="#">Click to launch gallery</a>jQuery クリック イベントを追加して、ギャラリーを起動できます。

$('#launch-gallery').click(function(evt){
  evt.preventDefault(); // prevent regular click action
  instance.show(0);     // Make sure 'instance' variable is available to this function
});

jQuery を使用していない場合は、ネイティブ JavaScript で同じことを行うことができます (ただし、もう少し冗長です)。

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

于 2013-03-20T23:25:52.453 に答える
1

php (ajax) を使用して画像の場所とサイズを提供しているため、json データを自分で定義する必要があることに注意してください。これは私がJqueryで行った方法です:

$('.element').off(); //in case it's a dynamically changing element
$('.element').on("click tap", function () {
var dataForPhpScript = $(this).parents('.gallery').attr("data-attr"); //data for php script

    $.getJSON('urlToPHPFunction?dataID=' + dataForPhpScript, function (json) {
      openPhotoSwipe(json);
    });
  });

そして、ここにフォトスワイプオープニング機能があります：

function openPhotoSwipe(jsonData) {
  var pswpElement = document.querySelectorAll('.pswp')[0];

  // define options (if needed)
  var options = {
    // history & focus options are disabled on CodePen
    history: false,
    focus: false,

    showAnimationDuration: 0,
    hideAnimationDuration: 0

  };

  var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, jsonData, options);
  gallery.init();
}

jsonData は次のように見えることに注意してください。

 [
{
    src: 'https://placekitten.com/600/400',
    w: 600,
    h: 400
},
{
    src: 'https://placekitten.com/1200/900',


       w: 1200,
        h: 900
    }
];

この回答が遅れていることは承知していますが、これはまったく別のもの（ただし、写真のスワイプに関連する）をグーグルで検索しているときにトップになったので、おそらくこれが役立つと思いました!

于 2016-04-08T03:28:03.747 に答える