Question

我正在使用Featherlight.js试图获得灯箱效果。单击图像时灯箱应打开，但灯箱的目标内容是视频，而不是单击的图像。（基本上，您单击占位符图像并弹出YouTube视频。）但是，在单击任何内容之前，YouTube图像在图像下方的页面上显示为可见。除了在灯箱的上下文中，如何使视频不可见？

@media all {
	.featherlight {
		display: none;

		/* dimensions: spanning the background from edge to edge */
		position:fixed;
		top: 0; right: 0; bottom: 0; left: 0;
		z-index: 2147483647; /* z-index needs to be >= elements on the site. */

		/* position: centering content */
		text-align: center;

		/* insures that the ::before pseudo element doesn't force wrap with fixed width content; */
		white-space: nowrap;

		/* styling */
		cursor: pointer;
		background: #333;
		/* IE8 "hack" for nested featherlights */
		background: rgba(0, 0, 0, 0);
	}

	/* support for nested featherlights. Does not work in IE8 (use JS to fix) */
	.featherlight:last-of-type {
		background: rgba(0, 0, 0, 0.8);
	}

	.featherlight:before {
		/* position: trick to center content vertically */
		content: '';
		display: inline-block;
		height: 100%;
		vertical-align: middle;
		margin-right: -0.25em;
	}

	.featherlight .featherlight-content {
		/* make content container for positioned elements (close button) */
		position: relative;

		/* position: centering vertical and horizontal */
		text-align: left;
		vertical-align: middle;
		display: inline-block;

		/* dimensions: cut off images */
		overflow: auto;
		padding: 25px 25px 0;
		border-bottom: 25px solid transparent;

		/* dimensions: handling small or empty content */
		min-width:  30%;

		/* dimensions: handling large content */
		margin-left: 5%;
		margin-right: 5%;
		max-height: 95%;

		/* styling */
		background: #fff;
		cursor: auto;

		/* reset white-space wrapping */
		white-space: normal;
	}

	/* contains the content */
	.featherlight .featherlight-inner {
		/* make sure its visible */
		display: block;
	}

	.featherlight .featherlight-close-icon {
		/* position: centering vertical and horizontal */
		position: absolute;
		z-index: 9999;
		top: 0;
		right: 0;

		/* dimensions: 25px x 25px */
		line-height: 25px;
		width: 25px;

		/* styling */
		cursor: pointer;
		text-align: center;
		font-family: Arial, sans-serif;
		background: #fff; /* Set the background in case it overlaps the content */
		background: rgba(255, 255, 255, 0.3);
		color: #000;
	}


	.featherlight .featherlight-image {
		/* styling */
		width: 100%;
	}


	.featherlight-iframe .featherlight-content {
		/* removed the border for image croping since iframe is edge to edge */
		border-bottom: 0;
		padding: 0;
	}

	.featherlight iframe {
		/* styling */
		border: none;
	}
}

/* handling phones and small screens */
@media only screen and (max-width: 1024px) {
	.featherlight .featherlight-content {
		/* dimensions: maximize lightbox with for small screens */
		margin-left: 10px;
		margin-right: 10px;
		max-height: 98%;

		padding: 10px 10px 0;
		border-bottom: 10px solid transparent;
	}
}

<a class="VideoLink" href="#" data-featherlight="#mylightbox">
    <img class="PopoutClickImage" src="Images/Dyson Extracted/V Click Video.png"/>
</a>
<div id="mylightbox">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/IUnEEi4tM0U?list=PL4VODwvGuSpSPwDCceh4sL9qIX-WF3oiD&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

Answer 1

也遇到了这个问题，我找到的唯一解决方案如下：

#popup_code {
  display:none;
}
.featherlight .featherlight-inner {
  display: block !important;
}

popup_code是您在灯箱中展示的内容的ID。 display：none属性将确保始终隐藏原始内容。在dragonlight的内部元素上显示：block将确保它一旦打开就会在灯箱中显示内容的副本。

这个解决方案并不理想，因为我必须“重要”这个属性。虽然它有效。希望有人会提出更好的方法。

Answer 2

featherlight文档正在使用一个类，其中包含display：none在其灯箱目标上。所以，如果你还没有，那就上课.hide {display：none}并将其添加到#mylightbox。

Answer 3

然后你还必须在featherlight.css中用display：block！important标记.featherlight-inner，否则内容仍会被隐藏。不是最好的插件...

/* contains the content */
.featherlight .featherlight-inner {
    /* make sure its visible */
    display: block !important;
    text-align: center;
}

羽毛灯箱目标始终可见

3 个答案: