css和jquery_带有CSS和jQuery的超级简单灯箱

最新推荐文章于 2021-04-13 14:40:50 发布

daique1908

最新推荐文章于 2021-04-13 14:40:50 发布

阅读量263

点赞数

文章标签： html css js javascript java ViewUI

css和jquery

本教程将向您展示如何创建一个用于处理图像的超简单灯箱，而不是使用具有您永远不会使用的功能的plugin肿插件。非常适合图像库，作品集等！

步骤1：标记

打开您喜欢的文本编辑器（我使用Coda），让我们从我们HTML标记开始。

注意：如果您没有提供正确的DOCTYPE，并且页面以怪癖模式呈现，则灯箱将无法在Internet Explorer中正确显示。

<!DOCTYPE html> 
<html>
	<head>
		<title>Simple Lightbox</title>
	</head>
<body>

<div id="wrapper">
	<h1>Super Simple Lightbox</h1>
	<p>Our super simple lightbox demo. Here are the image links:
		<ul>
			<li>
				<a href="https://farm7.static.flickr.com/6130/5935338876_47b61c93a5.jpg" class="lightbox_trigger">
				Picture 1
				</a>
			</li>
			<li>
				<a href="https://farm7.static.flickr.com/6020/5924329054_4bdc419c3a_o.jpg" class="lightbox_trigger">
				Picture 2
				</a>
			</li>
			<li>
				<a href="https://farm7.static.flickr.com/6020/5931933181_ddb737e528.jpg" class="lightbox_trigger">
				Picture 3
				</a>
			</li>	
		</ul>
	 </p>
</div> <!-- #/wrapper -->
</body>
</html>

注意：我们在每个要在灯箱中显示图像的链接上使用了lightbox_trigger类。当我们要定位将要编写的脚本中的那些元素时，这将很有用。

步骤2：CSS

让我们在页面上应用一些基本CSS样式。对于此基本示例，我们将所有CSS放在<head>部分的<style></style>标记中。

body {
	margin:0; 
	padding:0; 
	background:#efefef;
	text-align:center; /* used to center div in IE */
}
#wrapper {
	width:600px; 
	margin:0 auto; /*centers the div horizontally in all browsers (except IE)*/
	background:#fff; 
	text-align:left; /*resets text alignment from body tag */
	border:1px solid #ccc;
	border-top:none; 
	padding:25px; 
	/*Let's add some CSS3 styles, these will degrade gracefully in older browser and IE*/
	border-radius:0 0 5px 5px;
	-moz-border-radius:0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px; 
	box-shadow:0 0 5px #ccc;
	-moz-box-shadow:0 0 5px #ccc;
	-webkit-box-shadow:0 0 5px #ccc;
}

现在，我们有一个简单但优雅的页面，可以在其中测试灯箱窗口。

步骤3：关于Internet Explorer中CSS的说明

我们使用margin: 0 auto; 使我们的#wrapper div在页面上水平居中。这对所有浏览器都适用，除了...鼓卷...您猜对了，Internet Explorer。为了解决这个问题，我们使用了text-align:center; 在将子div（在我们的示例中为#wrapper div）在页面上水平居中的body标签上。

但是，使用text-align:center; 正文标签上的也会使子div中的所有文本居中对齐。为了解决这个问题，我们重置text-align:left; 在#wrapper div中将所有其他子内容恢复为左对齐。如果您有兴趣了解有关此特定IE问题的更多信息，请查看communitymx.com 。

第4步：灯箱HTML

这就是我们的灯箱HTML标记的外观。但是，请勿将其插入HTML标记中。我们将使用jQuery动态地做到这一点。了解灯箱HTML标记后，我们便可以相应地使用CSS对其进行样式设置。

<div id="lightbox">
	<p>Click to close</p>
	<div id="content">
		<img src="#" />
	</div>
</div>

注意： image src没有值，因为它取决于用户单击哪个链接。因此，稍后我们将使用javascript动态插入值。

第5步：Lightbox CSS黑色叠加

让我们继续，为我们的灯箱插入CSS。通过现在执行此操作，我们的页面元素将在以后动态插入HTML时正确显示。

首先，我们有#lightbox div作为黑色叠加层。无论屏幕分辨率如何，我们都希望它填充用户的整个视口。

#lightbox {
	position:fixed; /* keeps the lightbox window in the current viewport */
	top:0; 
	left:0; 
	width:100%; 
	height:100%; 
	background:url(overlay.png) repeat; 
	text-align:center;
}

CSS非常简单。以下是一些要点：

position:fixed使我们的覆盖图正确显示在当前视口中，无论用户在屏幕上的位置（页面的顶部还是底部）。这是使用正确的DOCTYPE的地方。如果IE由于DOCTYPE错误（或根本没有）而以怪异模式运行，则我们的覆盖图将无法正确显示。
width:100%; height:100%; 这使我们的#lightbox div（用作黑色叠加层）可以覆盖整个视口，无论最终用户的屏幕分辨率如何。
background:url(overlay.png) repeat; 我们本可以使用RGBa颜色来使背景色略透明。这将需要类似background: rgba(0,0,0,.7); 。但是，由于此属性是相当新的属性，因此背景颜色透明度在IE中将不起作用（除非您应用了某些技巧）。因此，我们不用在CSS3和IE中使用hack，而只是在Photoshop中创建黑色背景的1x1像素PNG，并将透明度设置为大约75％。

第6步：Lightbox CSS用户说明

为了确保我们的用户不会感到困惑，我们将在灯箱叠加层中添加一些文字，说明他们可以单击任意位置以使灯箱窗口消失。

#lightbox p {
	text-align:right; 
	color:#fff; 
	margin-right:20px; 
	font-size:12px; 
}

第7步：灯箱CSS图像

现在，我们要为将出现在灯箱中的图像设置样式。我只是要给它一些CSS3效果。这些显然不会出现在IE和较旧的浏览器中，但仍会正常降级。如果需要，可以在此处添加其他效果，例如图像周围的白色边框。

#lightbox img {
	box-shadow:0 0 25px #111;
	-webkit-box-shadow:0 0 25px #111;
	-moz-box-shadow:0 0 25px #111;
	max-width:940px;
}

注意：添加max-width将缩小我们可能链接到的所有高分辨率图像。这有助于确保所有图像都适合视口。

如果将灯箱HTML插入文档中，这就是页面的外观（我们将使用javascript来做到这一点）：

步骤8：确定逻辑

如果用户单击图像的链接，我们希望将图像显示在灯箱中。为此，我们首先要确定功能背后的逻辑：

用户单击类lightbox_trigger链接
- 阻止浏览器默认跟踪链接
- 查看lightbox div是否已在文档中
  - 如果存在：
    - 查找content div中的现有img标签。
    - 单击任何链接的href值替换图像的src值。
  - 如果不存在：
    - 将灯箱标记插入页面，并将图片的src值设置为单击任何链接的href值
允许任何点击灯箱（显示时）使其消失

步骤9：包含jQuery的Javascript

现在我们有了HTML标记，CSS样式和javascript逻辑，是时候深入研究代码并使我们的功能正常工作了。

首先，我们包括jQuery库。我喜欢使用jQuery的托管版本将其添加在结束body标签之前。

<script src="https://code.jquery.com/jquery-1.6.2.min.js"></script>

步骤10：Javascript自定义脚本

让我们将代码包装在script标签和jQuery的文档中。

我们将在包含jQuery库之后立即包含自定义脚本。我们在函数参数中使用美元符号“ $”来设置jQuery函数，这样就不必每次都想使用jQuery功能时都写“ jQuery”。相反，我们可以简单地使用“ $”。

<script>
jQuery(document).ready(function($) {
	
	// Our script will go here

});
</script>

步骤11：JavaScript `lightbox_trigger`函数

如前面在步骤1中所述，对于将使用灯箱的每个链接图像，我们为其分配了一个lightbox_trigger类。在我们的脚本中，我们创建一个函数，该函数将在每次单击与lightbox_trigger类的链接时触发。

$('.lightbox_trigger').click(function(e) {
	
	// Code that makes the lightbox appear

});

步骤12：函数内部JavaScript

首先，我们要阻止默认操作。这样可以防止浏览器在新页面中打开链接的图像。（要了解为什么我们使用preventDefault() 请单击此处

e.preventDefault();

接下来，我们将从点击的链接中获取将显示在灯箱中的图像的href

var image_href = $(this).attr("href");

这是我们预先确定的逻辑真正起作用的地方。因为我们是动态插入灯箱HTML，所以我们首先要查看它是否已存在于文档中。因此，我们将运行一个if / else语句。

如果

如果lightbox div存在，我们将替换content div中的img标签。我们还将确保将image标记的src值设置为与单击任何链接的href匹配。

if ($('#lightbox').length > 0) { // #lightbox exists
	
	//insert img tag with clicked link's href as src value
	$('#content').html('<img src="' + image_href + '" />');
   	
	//show lightbox window - you can use a transition here if you want, i.e. .show('fast')
	$('#lightbox').show();
}

其他

如果在文档中找不到我们的lightbox div，则将其创建并插入。这只会在第一次点击灯箱链接时运行。

else { //#lightbox does not exist 
	
	//create HTML markup for lightbox window
	var lightbox = 
	'<div id="lightbox">' +
		'<p>Click to close</p>' +
		'<div id="content">' + //insert clicked link's href into img src
			'<img src="' + image_href +'" />' +
		'</div>' +	
	'</div>';
		
	//insert lightbox HTML into page
	$('body').append(lightbox);
}

第13步：JavaScript隐藏灯箱窗口

最后，我们希望在用户单击灯箱窗口时将其隐藏。因为div lightbox是在DOM构建完成之后（页面已加载）插入的，所以我们必须告诉jQuery我们正在页面中放置一个新的div，并注意是否有新元素被点击。我们通过使用.live（）而不是.click（）来完成此操作

$('#lightbox').live('click', function() {
	$('#lightbox').hide();
});

步骤14：Javascript最终代码

现在，我们已经检查了灯箱脚本，下面是整个过程：

<script>
jQuery(document).ready(function($) {
	
	$('.lightbox_trigger').click(function(e) {
		
		//prevent default action (hyperlink)
		e.preventDefault();
		
		//Get clicked link href
		var image_href = $(this).attr("href");
		
		/* 	
		If the lightbox window HTML already exists in document, 
		change the img src to to match the href of whatever link was clicked
		
		If the lightbox window HTML doesn't exists, create it and insert it.
		(This will only happen the first time around)
		*/
		
		if ($('#lightbox').length > 0) { // #lightbox exists
			
			//place href as img src value
			$('#content').html('<img src="' + image_href + '" />');
		   	
			//show lightbox window - you could use .show('fast') for a transition
			$('#lightbox').show();
		}
		
		else { //#lightbox does not exist - create and insert (runs 1st time only)
			
			//create HTML markup for lightbox window
			var lightbox = 
			'<div id="lightbox">' +
				'<p>Click to close</p>' +
				'<div id="content">' + //insert clicked link's href into img src
					'<img src="' + image_href +'" />' +
				'</div>' +	
			'</div>';
				
			//insert lightbox HTML into page
			$('body').append(lightbox);
		}
		
	});
	
	//Click anywhere on the page to get rid of lightbox window
	$('#lightbox').live('click', function() { //must use live, as the lightbox element is inserted into the DOM
		$('#lightbox').hide();
	});

});
</script>

最终产品

而已！现在，您有了用于显示图像的轻型灯箱解决方案。希望您喜欢本教程并学到新知识！谢谢阅读。

高级选项

本教程教了您自己动手做的方法，但是，如果您喜欢现成的解决方案，Envato Market有很多可用的灯箱插件。以下是一些最受欢迎的选择：

1. WordPress的Lightbox Evolution

Lightbox Evolution是一种用于以浮动在网页上方的“灯箱”样式显示图像，html内容，地图和视频的工具。使用Lightbox Evolution，网站作者可以在所有主要浏览器中展示各种各样的媒体，而无需使用户离开链接页面。还有一个jQuery版本。

2. PopupPress-带有滑块和Lightbox的WP弹出窗口

PopupPress是一个Wordpress插件，可让您轻松创建优雅的重叠窗口。该插件旨在以最快，最简单的方式在WordPress的任何页面上将任何类型的内容插入到弹出窗口中。它还具有用于弹出窗口视图数量的简单系统统计信息。

翻译自: https://webdesign.tutsplus.com/articles/super-simple-lightbox-with-css-and-jquery--webdesign-3528

css和jquery

daique1908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css和jquery_带有CSS和jQuery的超级简单灯箱

本教程将向您展示如何创建一个用于处理图像的超简单灯箱，而不是使用具有您永远不会使用的功能的blo肿的插件。非常适合图像库，作品集等！步骤1：标记打开您喜欢的文本编辑器（我使用Coda），然后从我们HTML标记开始。注意：如果您没有提供正确的DOCTYPE，并且页面以怪癖模式呈现，则灯箱将无法在Internet Explorer中正确显示。 <!DOCTYPE html&...
复制链接

扫一扫