这是我想用于画廊的 html，以便在弹出时显示框架内的视频：
<ul id="gallery-v">
<li> <a class='video' href='video from youtube'><img src='img/2.png' alt=''></a></li>
<li> <a class='video' href='video from youtube'><img src='img/1.png' alt=''></a></li>
</ul>
我想适应 html 以创建与图像相同的画廊：
$(window).load(function () {
// Gallery
if (jQuery("#gallery-v").length) {
// Fancybox
jQuery("#gallery-v li a").fancybox({
"titleShow": false,
"transitionIn": "elasti",
"transitionOut": "elastic",
"closeBtn": true
});
var totalImages = jQuery("#gallery-v > li").length,
imageWidth = jQuery("#gallery-v > li:first").outerWidth(true),
totalWidth = imageWidth * totalImages,
visibleImages = Math.round(jQuery("#gallery-video").width() / imageWidth),
visibleWidth = visibleImages * imageWidth,
stopPosition = (visibleWidth - totalWidth);
jQuery("#gallery-v").width(totalWidth);
jQuery("#gallery-prev-v").click(function () {
if (jQuery("#gallery-v").position().left < 0 && !jQuery("#gallery-v").is(":animated")) {
jQuery("#gallery-v").animate({
left: "+=" + imageWidth + "px"
});
}
return false;
});
jQuery("#gallery-next-v").click(function () {
if (jQuery("#gallery-v").position().left > stopPosition && !jQuery("#gallery-v").is(":animated")) {
jQuery("#gallery-v").animate({
left: "-=" + imageWidth + "px"
});
}
});
$("a.video").click(function () {
$.fancybox({
iframe: {
preload: false
}
maxWidth: 800,
maxHeight: 600,
fitToView: false,
width: "70%",
height: "70%",
autoSize: false,
closeClick: false,
openEffect: "elastic",
closeEffect: "none"
});
});
return false;
}
});