Question

我想知道facebook如何控制其新幻灯片/ pircture viewer黑盒子，同时通过jquery或任何技术使用箭头键导航图像。

Answer 1

您可以为幻灯片显示创建div，如下所示：

<div id="slideshow">
   <a id="previousPicture" class="nextprev" href="javascript:void(0)"> Previous </a>
   <img id="picture" src="photo3.jpg" data-currentPhotoIndex="3" />
   <a id="nextPicture" class="nextprev" href="javascript:void(0)"> Next </a>
</div>

显示下一个/上一个按钮的Javascript：

$(document).ready(function(){
  openSliderWithBlackBox(); //We'll explain this function later
  //Bind the next/prev buttons click event
  $(".nextprev").click(function(){
      //Get the current photo index
      var photoIndex = parseInt($("#picture").attr("data-currentPhotoIndex"), 10);
      if(this.id == "prevPicture")
          photoIndex--;
      else
          photoIndex++;
      //Now we get the new photo from the server
      $.ajax({
         url: "loadPicutre.php",
         data: {photoIndex: photoIndex },
         success: function(newImgSrc){  //newImgSrc will contain, for example "photo4.jpg"
             $("#picture").attr("src", newImgSrc); //Change the current photo src
             $("#picture").attr("data-currentPhotoIndex", photoIndex); //Update current photo index
         }
      });
  });
});

服务器端（假设php）：

loadPicture.php
<?php
   $photoIndex = $_GET['photoIndex'];
   $newImgSrc = getPicture($photoIndex); //Here you get the corresponding picture src
   echo $newImgSrc; //Example: "photo4.jpg"
?>

使用上面的所有代码，你可以根据你做下一个或上一个来获取照片。

现在，我们如何用黑匣子展示它？您可以使用jquery blockUI plugin，因此我们的openSliderWithBlackBox js函数将如下所示：

function openSliderWithBlackBox(){
    $.blockUI({ message: $('#slideshow')}); //This opens the slideshow with black background
}

您还可以进行图像预加载，动画等，但我给了您主要提示。希望这可以帮助。干杯

在导航时facebook控制元素如何保持打开状态

1 个答案: