需要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 
    } 
};