javascript - 弹出视频不会显示在 3D 图片库中
问题描述
伙计们！
我可能很愚蠢，但我无法让视频弹出框正常工作。好吧，让我们从头开始。我有 3D 风格的图像轮播画廊，里面有按钮和标题。我已经编辑了这个（重要的）-“按钮”数十次以使其工作，但仍然没有结果。感觉就像当前的 3D CSS、JQuery、Javascript 和 HTML 图像滑块库不能与视频弹出框一起使用。我不确定，但感觉就像。工作弹出视频示例（演示）在这里，我希望它结合我的 3D 轮播（滑块）图像库来完成。当我将几个脚本行从工作示例放到图库页面时，我没有得到脚本行的响应。就像 3D 画廊阻止了弹出视频框并且它不显示。
我的目标：我想在 3D 图片库滑块上弹出视频框。问题：弹出框没有响应（不工作），它没有显示在 3D 画廊滑块上，单击按钮（观看电影）后。
这是 3D 轮播图像库和工作弹出视频框的完整代码。为了让您更轻松，我放置了此脚本示例的所有源链接，因此您可以使用此脚本创建自己的 index.html 文件。
<html>
<head>
<meta charset="UTF-8">
<title>3D Smooth Carousel - Slider</title>
<link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js">
</script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel="stylesheet" href="https://kinobalss.lv/3d/css/style.css">
<style type="text/css">
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.popuptext {
display: none;
}
.mfp-hide {
display: none !important;
}
.button {
padding: 20px 40px;
border-color: #f3f3f3;
font-size: 17px;
font-size: 1.7rem;
font-family: "museo-sans", Arial, Verdana;
font-weight: 500;
margin-top: 40px;
display: inline-block;
}
.button {
border: 2px solid #fcf;
color: #000;
text-transform: uppercase;
transition: all 0.15s ease-in-out;
}
.button .fa {
margin-left: 20px;
}
.button:hover {
background-color: #07d;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: none;
}
.content {
text-align: center;
}
</style>
<script type="text/javascript">//<![CDATA[
window.onload=function(){
$('#videoLink')
.magnificPopup({
type:'inline',
midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
})
}
//]]></script>
</head>
<body>
<div class="slider-container" id="slider">
<div class="slider-content">
<div class="slider-single">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img1.png" alt="1" />
<a class="slider-single-download" href="#videoStory" id="videoLink">Watch movie <i class="fa fa-play-circle" aria-hidden="true"></i></a>
<div id="videoStory" class="mfp-hide" style="max-width: 75%; margin: 0 auto;"><iframe width="853" height="480" src="https://www.kinobalss.lv/media/tvantena.mp4" frameborder="0" allowfullscreen=""></iframe>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>311,247</p>
</a>
</div>
<!--- Down below is only other 3D carousel image slider script lines. Those are not immportant. I`m working on this the first image from slider gallery, sample Above. Rest of these lines are because of full page script. //-->
<div class="slider-single">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img2.png" alt="2" />
<a class="slider-single-download" href="javascript:void(0);">Skatīties filmu <i class="fa fa-play-circle"></i></a>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>1,247</p>
</a>
</div>
<div class="slider-single">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img3.png" alt="3" />
<a class="slider-single-download" href="javascript:void(0);">Skatīties filmu <i class="fa fa-download"></i></a>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>1,247</p>
</a>
</div>
<div class="slider-single">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img1.png" alt="4" />
<a class="slider-single-download" href="javascript:void(0);">Skatīties filmu <i class="fa fa-download"></i></a>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>1,247</p>
</a>
</div>
<div class="slider-single">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img2.png" alt="5" />
<a class="slider-single-download" href="javascript:void(0);">Skatīties filmu <i class="fa fa-download"></i></a>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>1,247</p>
</a>
</div>
<div class="slider-single">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img3.png" alt="6" />
<a class="slider-single-download" href="javascript:void(0);">Skatīties filmu <i class="fa fa-download"></i></a>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>1,247</p>
</a>
</div>
</div>
<a class="slider-left" href="javascript:void(0);"><i class="fa fa-arrow-left"></i></a>
<a class="slider-right" href="javascript:void(0);"><i class="fa fa-arrow-right"></i></a>
</div>
<script src="https://kinobalss.lv/3d/js/index.js"></script>
</body>
</html>解决方案
推荐阅读
- javascript - 基于反应框架的网站是否在客户端的浏览器中隐藏代码？
- python - 如何使用 pydev 将 Eclipse 中的包展平？
- python - 如何组织应该在多行上的 cmd 参数？
- sorting - Api-平台儿童订单
- node.js - 如何使用 apollo 服务器从服务器设置响应标头？
- vert.x - Single 的 Vert-x RxJava Map 实现与 HttpResponse::body 参数不匹配
- r - 比较向量的名称并选择常见的并将值相加
- javascript - 通过递归检查每个字符串编号
- java - Java 正则表达式查找或替换第一次出现而不丢失尾部文本
- sql - 我想通过 cdValuse 选择相同的 Table 相同的列来分隔 Desc_Main 和 Desc_sup