為移動觸摸設備添加圖像滑動支持到Shadowbox.js

Question

我在各種網站上使用Shadowbox.js（基於網絡的瀏覽器，如lightbox ），到目前為止效果很好。 唯一的問題是對移動設備的不良支持。

通過滑動當前圖像無法更改galery中的圖像，因此用戶必須使用viewer-viewport底部的非常小的導航按鈕。 （鍵盤導航也可以，但不能在移動設備上）

這不僅僅是這些導航按鈕的難以使用。 導航按鈕上的每次點擊都會觸發一個縮放功能，其中包含聚焦區域的詳細視圖 - 需要第二次點擊以確認切換到下一個或上一個圖像。

如果有可能使galery像默認的android galery查看器或類似的移動應用程序一樣，那將是很棒的。

我正在使用shadowbox的jquery版本。

Answer 1

有一個示例腳本如何改進Shadowbox.js：

首先，您需要使用Shadowbox.js的jQuery版本。 此外，還需要jQuery UI和jQuery UI Touch Punch插件（大小：584字節）。 沒有Punch-plugin，jQuery UI不支持觸摸事件。

1. 如果尚未完成，請添加所需的庫：

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script> 

2. 現在我們來看看Shadowbox.js所需的default- <script> -area：

 <link rel="stylesheet" type="text/css" href="plugins/shadowbox-3.0.3/shadowbox.css"> <script type="text/javascript" src="plugins/shadowbox-3.0.3/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init( { onOpen: function() { }, players: ['html','img', 'iframe' ,'inline'] } ); </script> 

這是初始化Shadowbox.js查看器的最小javascript調用。 onOpen是其中一個事件，它允許在特定點運行代碼。 在我們的例子中，需要使用一個事件，在加載放大的圖像后觸發該事件。 我們使用事件onFinish並運行自定義jQuery UI代碼，以使查看器的圖像視口可拖動到x軸。

因此，用戶可以將圖像從左向右拖動，反之亦然：

<script type="text/javascript">
        Shadowbox.init( 
        {
           /* Add call to hook into the event */
           onFinish : function () 
           { 
                /* Make the image viewport draggable */
                $( "img#sb-player" ).draggable({ axis: "x" });
           }, 
           onOpen: function() 
           { 
           }, 
           players: ['html','img', 'iframe' ,'inline']   } );
</script>

但是用戶無法在galery中滑動，因為沒有函數調用轉到下一個或上一個圖像。 所以我們必須添加它們。 這需要代碼開頭的變量來保存圖像的當前位置而不拖動。 然后，當用戶停止拖動圖像以在拖動后獲取圖像位置以計算開始和結束位置之間的距離時，我們必須添加事件。 我們可以使用計算出的值來獲取滑動手勢的方向（左或右）。

   <script type="text/javascript">
            Shadowbox.init( 
            {
               /* Add call to hook into the event */
               onFinish : function () 
               { 
                    /* Make the image viewport draggable */
                    $( "img#sb-player" ).draggable({ axis: "x" });

                    /* Save the current position of the image in a global variable */
                    leftrightDirection = $( "img#sb-player" ).offset().left;  

                    /** Execute the calculation of the direction and call the next/prev functions **/
                    $( "img#sb-player" ).draggable({ stop: function( event, ui ) 
                    {  

                        var leftrightDirectionCalculated = leftrightDirection - $( "img#sb-player" ).offset().left;

                        if (   Math.abs( leftrightDirectionCalculated ) > 30  )
                        {

                            if ( leftrightDirectionCalculated < 0 )
                            {
                                /* Go to the previous image */
                                Shadowbox.previous()
                            }
                            else
                            {
                                /* Go to the next image */
                                Shadowbox.next();
                            }

                        }

                     }});


               }, 
               onOpen: function() 
               { 
               }, 
               players: ['html','img', 'iframe' ,'inline']   } );
    </script>

我們差不多完成了。 到目前為止，這是有效的，但問題是Shadowbox galeries只有一個單一的圖像。 在這種情況下，圖像不得拖動。

另一個問題是畫廊的第一張和最后一張圖片。 例如，如果第一個圖像是可見的，則可以向右拖動 - 即使沒有先前的圖像（因為它是第一個圖像！）。 這就是原因，我們必須檢查當前圖像是第一個還是最后一個圖像，並拒絕向左或向右拖動圖像。

在每個被調用的拖動事件（對於圖像移動的每個像素），我們必須計算距離並檢查，如果允許移動圖像。 如果沒有，我們只設置起始位置。 因此，例如第一個圖像只能在一個方向上移動。

            if (  Shadowbox.hasNext() == false )
            {
                if(ui.position.left < startPosition)
                {
                    ui.position.left = startPosition;
                }
                else if(ui.position.left > 250)
                {
                    ui.position.left = 250;
                }
                    startPosition = ui.position.left;
            }

            if (  Shadowbox.current == 0 )
            {
                if(ui.position.left > startPosition)
                {
                    ui.position.left = startPosition;
                }
                else if(ui.position.left < -250)
                {
                    ui.position.left = -250;
                }
                    startPosition = ui.position.left;
            }

現在我們完成了。 修改當前的Shadowbox安裝非常容易。 代碼不是最好的，但它可能是進一步改進的良好基礎（例如關閉放大的查看器的手勢）。

完整的腳本：

Shadowbox.init（{onFinish：function（）{

    if ( Shadowbox.hasNext() == false &&  Shadowbox.current == 0 )
    {
        // If there is only one image at the galery - just do nothing!
    }
    else
    {

       /* Save the current image position */
       leftrightDirection = $( "img#sb-player" ).offset().left;  

       /* Make the image draggable, but only in x-direction */
       $( "img#sb-player" ).draggable({ axis: "x" });


       /* After dragging go to previous / next image in the galery */
       $( "img#sb-player" ).draggable({ stop: function( event, ui ) 
        {  

            var leftrightDirectionCalculated = leftrightDirection - $( "img#sb-player" ).offset().left;

            if (   Math.abs( leftrightDirectionCalculated ) > 30  )
            {

                if ( leftrightDirectionCalculated < 0 )
                {
                    Shadowbox.previous()
                }
                else
                {
                    Shadowbox.next();
                }

            }

         }});

        $( "img#sb-player" ).draggable({ start: function( event, ui ) 
        {  
            startPosition = ui.position.left;

         }});


      /* Improve behaviour for the first or last image */
      $( "img#sb-player" ).draggable({ drag: function( event, ui ) 
        {  



            if (  Shadowbox.hasNext() == false )
            {
                if(ui.position.left < startPosition)
                {
                    ui.position.left = startPosition;
                }
                else if(ui.position.left > 250)
                {
                    ui.position.left = 250;
                }
                    startPosition = ui.position.left;
            }

            if (  Shadowbox.current == 0 )
            {
                if(ui.position.left > startPosition)
                {
                    ui.position.left = startPosition;
                }
                else if(ui.position.left < -250)
                {
                    ui.position.left = -250;
                }
                    startPosition = ui.position.left;
            }

         }});    

         } // Ende Fallunterscheidung zwischen Galerie und 1-Bild-Lightbox







                                }, onOpen: function() { }, players: ['html','img', 'iframe' ,'inline']  , resizeDuration: 0 } );