Question

所以我有来自http://kenwheeler.github.io/slick/的旋转木马。我决定使用我的旋转木马，一旦你点击图像，就会出现一个视频。好吧，我希望这个视频加载到一个模态图像 - 具有关闭功能。 div id ....的第一行代码是点击视频时出现的图像。下面的其余部分我只是复制并粘贴第一部分。（重复相同的图像/视频四次 - 直到我决定切换出来）

 <section class="center slider">
 <div id="video" style="display:none;"><iframe width="560" height="315" src="https://www.youtube.com/embed/36_e3qbYhEs" frameborder="0"></iframe></div>
  <a href="javascript:document.getElementById('video').style.display = 'block'; document.getElementById('videopic').style.display = 'none'; void(0);">
  <img id="videopic" src="images/350x300.png" alt="Video Picture" /></a>



<div>
  <img src="http://placehold.it/350x300?text=2">
</div>
<div>
  <img src="http://placehold.it/350x300?text=3">
</div>
<div>
  <img src="http://placehold.it/350x300?text=4">
</div>
</section>

我的JS和CSS都运行良好我只是可以植入一个功能，你点击图像＆＃34;图像（视频）＆＃34;将在新窗口中打开。抱歉我的措辞。我是初学者，随时随地学习。我知道我想要它做什么，但无法弄清楚如何。

如果我需要提供更多信息，请告诉我。

Answer 1

我认为您正在寻找的术语可能会帮助您使用Google搜索功能，您希望视频在灯箱中打开。

具体地说明如何在您的特定环境中执行此操作对于此站点而言过于宽泛，即使您提供了更多代码供您查看。但通常你可以实现这一点的方法是在单击幻灯片图像时使用JavaScript在一个或多个元素上切换类，并添加该类将触发视频显示，而单击退出按钮将删除该类事情又恢复了原貌。

这是一个非常基本的例子，但你基本上可以采用这个概念，并使其简单或复杂。例如，您可以在页面的do-catch或html标记上切换类，然后根据是否应用该类来调整页面上一堆内容的CSS。

如果您正在使用jQuery，那么专门为此目的设计的插件会自动为您提供大量设置，例如自动调整大小并使灯箱在视口中完美居中，并处理移动功能等等。 Fancybox和Colorbox是几个例子。

body

var lightboxImg = document.getElementsByTagName('img')[0];

lightboxImg.addEventListener('click', function(){
	this.parentNode.classList.toggle('lightbox');
});
document.getElementById('exit').addEventListener('click', function(){
	lightboxImg.parentNode.classList.toggle('lightbox');
});

/* relevant stuff */
#iframe {
	display: none;
	position: absolute;
	top: -100px;
	left: -100px;
}
#exit {
	position: absolute;
	top: 10px;
	right: -290px;
	padding: 5px;
	background-color: white;
}
section div.lightbox #iframe {
	display: block;
}
img:hover, #exit:hover {
  cursor: pointer;
}


/* just for display purposes */
html, body {
	height: 100%;
}
section {
	width: 400px;
	height: 300px;
	background-color: gold;
	position: relative;
	left: calc(50% - 200px);
	top: calc(50% - 150px);
}
section div {
	position: relative;
	top: 50px;
	left: 50px;
	width: 300px;
	height: 200px;
}

无法使用Modal与carousel-video源码一起使用

1 个答案: