需要JSSOR滑塊落在特定圖像上，具體取決於頁面

Question

對JavaScript很新穎，我正在使用滑塊，需要根據查看器來自哪個頁面從特定圖像開始。

我已經與JSSOR直接工作了一段時間，但已經到了無法讓它工作的地步。

有幾點我可以關閉捕獲文檔引用或設置圖像索引。

您是否需要爲滑塊中的每個圖像分配索引以使其工作，還是自動從上到下索引？

下面是在滑塊第一圖像的代碼 - 沒有分配的

<div data-p="208.625"> 
    <img data-u="image" src="images/Seat_Gray_1.jpg" title="Gray seat option 1" alt="Gray seat, first option"/> 
    <img data-u="thumb" src="images/Seat_Gray_1.jpg" width="150px"/> 
</div> 

這裏指數是與企圖攻佔引用頁，並根據所頁來自它的站點設置第一圖像的代碼來自：

下面是它開始與原來的滑塊代碼：

jssor_1_slider_init = function() { 

     var jssor_1_options = { 
      $ArrowNavigatorOptions: { 
      $Class: $JssorArrowNavigator$ 
      }, 
      $ThumbnailNavigatorOptions: { 
      $Class: $JssorThumbnailNavigator$, 
      $Cols: 6, 
      $SpacingX: 8, 
      $SpacingY: 15, 
      $Align: 395 
      } 
     }; 

     var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options); 

現在，插入新的代碼來獲取引用URL來決定startIndex應該在哪裏。圖像頁面起作用，但始終從第一張幻燈片開始（幻燈片0）。

是否在正確的位置添加新代碼？

jssor_1_slider_init = function() { 

/************************ Jump Test start ********************/ 
     var startIndex = 0; 

     var incomingPage = document.referrer; 

     if (incomingPage == "http://www.example.com/black_seats.php") { 
      startIndex: 4; 

     } else if (incomingPage == "http://www.example.com/red_products.php") { 
      startIndex: 8; 

     } else if (incomingPage == "http://www.example.com/green_products.php") { 
      startIndex: 14; 

     } else { 
      startIndex: 0; 
     } 

/************************ Jump Test end - start of original script ********************/ 

     var jssor_1_options = { 
      $ArrowNavigatorOptions: { 
      $Class: $JssorArrowNavigator$ 
      }, 
      $ThumbnailNavigatorOptions: { 
      $Class: $JssorThumbnailNavigator$, 
      $Cols: 6, 
      $SpacingX: 8, 
      $SpacingY: 15, 
      $Align: 395 
      } 
     }; 

/************************ Jump Test add start index ********************/ 

     var jssor_slider_options = { 
      $StartIndex: startIndex 
    }; 

/************************ Final line of original code ********************/ 

     var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options); 

任何幫助將不勝感激。

謝謝！

Answer 1

終於搞定了！意識到我需要從單個頁面上的多個圖像着陸在不同的圖像上，我開始考慮從PHP端發送和捕獲變量。我加入了可變字符串每個圖像鏈接：

<a href="seats.php?incomingCategory=blackSeat01"> 
    <img src="images/BlackSeat01_thumb.jpg" ... 
    </a> 

然後着陸圖像滑塊頁面上添加此PHP代碼滑塊初始化之前捕獲傳入變量：

<?php 
    $incomingCategory = $_GET['incomingCategory']; 
    ?> 

一旦被髮送，在滑塊功能，添加以下if/else語句來呼應輸入字符串變量，並指示滑塊移動到正確的幻燈片：

var startIndex = 0; 

    //put php variable to a javascript variable 
    var incomingPage = <?php echo json_encode($incomingCategory, JSON_HEX_TAG); ?>; 

     if (incomingPage == "graySeat01") { 
      startIndex = 0; 

     } 

     else if (incomingPage == "blackSeat01") { 
      startIndex = 3; 

     } 

     else if (incomingPage == "blackSeat02") { 
      startIndex = 4; 

     } 

     else if (incomingPage == "blueSeat01") { 
      startIndex = 8; 

     } 

     else if (incomingPage == "blueSeat02") { 
      startIndex = 9; 

     } 

     else { 
      startIndex = 0; 
     } 

現在，它的工作每一次都很完美。我在早期就遇到了問題，因爲我使用單個=將變量設置爲字符串。字符串被捕獲，但它並沒有改變幻燈片。將其更改爲==和瞧！

謝謝@jssor的幫助 - 乾杯！

Answer 2

//specifies startIndex according to page comes from 
var startIndex = 0; 

var jssor_1_options = { 
    $StartIndex: startIndex, 
    $ArrowNavigatorOptions: { 
    $Class: $JssorArrowNavigator$ 
    }, 
    $ThumbnailNavigatorOptions: { 
    $Class: $JssorThumbnailNavigator$, 
    $Cols: 6, 
    $SpacingX: 8, 
    $SpacingY: 15, 
    $Align: 395 
    } 
};