Question

我正在使用HTML / CSS / Javascript等创建自己的投资组合。

我想要做的是有一个按钮/链接，当用户点击该链接时，会出现一个灯箱。

使用灯箱，我希望有一个下一个和后一个按钮，以便用户可以浏览灯箱内的内容。也许大约5.

我想要类似的东西：http://www.designcouch.com/demos/responsive-css3-lightbox.html# 您单击一个按钮，然后单击下一步。

我不想要这样的东西，你可以在旁边和后面点击，但它在页面上显示3个按钮。我想要一个按钮/链接/图片，灯箱可以反复导航：http://css-plus.com/examples/2011/02/css3-lightbox/

我不太确定我是否有道理。我不介意任何编程语言。一个链接或代码可以帮助我！

谢谢

Answer 1

<强> jsBin demo

你可以用一种非常简单的方式来做到这一点：

<img alt="" src="images/thumb.jpg" data-gallery='[
    "images/1.jpg",
    "images/2.jpg",
    "images/3.jpg"
]'>

点击缩略图，点击即可：

打开我们的自适应图库叠加层（将background-size设置为CSS中的cover）
JSON.parse缩略图data属性以获取图像数组
计算图像数量
如果有超过1张图片＆gt;＆gt;显示上一个/下一个span按钮
将一些click()功能分配给我们的SPAN按钮＆gt;＆gt;改变背景图片。
如果在其外部点击图库，则隐藏图库。

让我们先做一些造型：

#gal{
  display: none; /* jQ will make visible */
  position: fixed;
  z-index: 99999;
  top:0; left:0; right:0; bottom:0;
  margin: 50px;
  background: no-repeat #444 none 50% / cover;
  box-shadow: 0 5px 10px -3px rgba(0,0,0,0.9),  0 0 0 5000px rgba(0,0,0,0.6);
}
#gal:after{
  pointer-events: none;
  content : "×";
  position: absolute;
  right: -30px;
  top: -40px;
  color: #fff;
  font-size: 3em;
}
#gal > span{
  display: none; /* jQ will make visible if >1 image*/
  cursor: pointer;
  background: rgba(255,255,255,0.7);
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  margin-top: -25px;
}
#gal > span:nth-child(1){ left:0; }
#gal > span:nth-child(2){ right:0; }

...最后应用我们的jQuery库逻辑：

var $call = $("[data-gallery]"),
    $gal = $('<div/>',{id:"gal", html:"<span/><span/>"}),
    $btn = $gal.find("span"), img, n, c, hov=0;

$('body').prepend($gal);

// SHOW GALLERY || CHANGE IMAGE
function galleryAnim() {
  $gal.stop().slideDown(300).css({backgroundImage: "url("+img[c]+")"});
}

// THUMBNAIL CLICK
$call.click(function() {
  img = JSON.parse(this.dataset.gallery); // Creates an Array of images
  n = img.length; // Get total images
  c = 0;          // Reset Counter
  $btn[n>1?"show":"hide"](); // show||hide prev/next btns
  galleryAnim();
});

// PREV NEXT BUTTONS
$btn.click(function() { 
  c = ($(this).index()>0 ? ++c : --c)<0 ? n-1 : c%n; // Loop Counter
  galleryAnim();
});

// HIDE GALLERY IF EXOCLICK
$gal.hover(function() { hov ^= 1; });
$(document).mousedown(function() {
  if (!hov) $gal.slideUp(300);
});

如果您不想在点击＆＃34;上一个/下一个＆＃34;后等待加载每个新图片，要预先加载所有图片，只需在n = img.length;之后添加代码：

for(var i=0; i<n; i++){
  var _temp = new Image();
  _temp.src = img[i];
}

如何通过一个按钮/链接创建带有下一个和后一个按钮的灯箱？

1 个答案: