使用jQuery和VisualLightBox创建照片库

Creating photo gallery using jQuery and VisualLightBox

使用jQuery和VisualLightBox创建照片库

Today I will tell you about one useful JQuery plugin – VisualLightBox. This plugin can help you to create good-looking galleries. And this is very easy to implement. Here is a sample:

今天，我将向您介绍一个有用的JQuery插件-VisualLightBox。 该插件可以帮助您创建美观的画廊。 这很容易实现。 这是一个示例：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

Here are source code (index.html) of our gallery.

这是我们画廊的源代码(index.html)。

<div id="vlightbox">
    <a id="firstImage" title="image 1" href="images/pic1.jpg" class="vlightbox"><img alt="image 1" src="images/pic1.jpg" /></a>
    <a title="image 2" href="images/pic2.jpg" class="vlightbox"><img alt="image 2" src="images/pic2.jpg" /></a>
    <a title="image 3" href="images/pic3.jpg" class="vlightbox"><img alt="image 3" src="images/pic3.jpg" /></a>
    <a title="image 4" href="images/pic4.jpg" class="vlightbox"><img alt="image 4" src="images/pic4.jpg" /></a>
    <a title="image 5" href="images/pic5.jpg" class="vlightbox vlightbox_hidden"><img alt="image 5" src="images/pic5.jpg" /></a>
</div>
<script type="text/javascript">
    var $VisualLightBoxParams$ = {autoPlay:true,borderSize:21,enableSlideshow:true,overlayOpacity:0.4,startZoom:true};
</script>
<script type="text/javascript" src="visuallightbox.js"></script>

<div id="vlightbox">
    <a id="firstImage" title="image 1" href="images/pic1.jpg" class="vlightbox"><img alt="image 1" src="images/pic1.jpg" /></a>
    <a title="image 2" href="images/pic2.jpg" class="vlightbox"><img alt="image 2" src="images/pic2.jpg" /></a>
    <a title="image 3" href="images/pic3.jpg" class="vlightbox"><img alt="image 3" src="images/pic3.jpg" /></a>
    <a title="image 4" href="images/pic4.jpg" class="vlightbox"><img alt="image 4" src="images/pic4.jpg" /></a>
    <a title="image 5" href="images/pic5.jpg" class="vlightbox vlightbox_hidden"><img alt="image 5" src="images/pic5.jpg" /></a>
</div>
<script type="text/javascript">
    var $VisualLightBoxParams$ = {autoPlay:true,borderSize:21,enableSlideshow:true,overlayOpacity:0.4,startZoom:true};
</script>
<script type="text/javascript" src="visuallightbox.js"></script>

Here are few notes when we filling array of objects: a. All our images which we going to show in gallery I put in ‘images’ folder. And set names of image as ‘pic1.jpg’, ‘pic2.jpg’ .. ‘pic5.jpg’. You can call your own images as you wish. b. ID of first A tag will ‘firstImage’. c. If we going to hide all following images at page we can set additional class for A tag – ‘vlightbox_hidden’. d. After array of objects I put some JS code. This is just initialization of VisualLightBox library. You can play with params as you wish. This is not so difficult.

当我们填充对象数组时，这里有一些注意事项： 我们要在图库中显示的所有图像都放在“图像”文件夹中。 并将图像名称设置为“ pic1.jpg”，“ pic2.jpg” ..“ pic5.jpg”。 您可以根据需要调用自己的图像。 b。 第一个标签的ID为“ firstImage”。 C。 如果我们要在页面上隐藏所有后续图像，则可以为A标签设置其他类-'vlightbox_hidden'。 d。 在对象数组之后，我放入了一些JS代码。 这只是VisualLightBox库的初始化。 您可以根据需要玩params。 这不是那么困难。

步骤2. CSS (Step 2. CSS)

Here are used CSS styles.

这是使用CSS样式。

visuallightbox.css – I decided to not include this file in post itself (this file not so small, and commonly – it contain styles just for gallery). It always available as a download package

visuallightbox.css –我决定在帖子本身中不包含此文件(此文件不是那么小，通常–它仅包含图库样式)。 它始终可以作为下载包获得

vlightbox.css (vlightbox.css)

#vlightbox { width:680px;height:355px; }
#vlightbox span{ display:block; }
#vlightbox a{ display:block; float:left;width:310px; height:155px; margin:3px 1px; padding:6px; border:solid 1px #b8b8b8;
background-color:#f4f5f5;opacity:0.87; }
#vlightbox a img{ display:block; border:none; margin:0px; }
#vlightbox a:hover{ opacity:1; }
#vlightbox a.vlightbox_hidden{ display:none; }
#vlightbox a img { border:medium none; margin:0 auto;width:310px; height:155px; }

#vlightbox { width:680px;height:355px; }
#vlightbox span{ display:block; }
#vlightbox a{ display:block; float:left;width:310px; height:155px; margin:3px 1px; padding:6px; border:solid 1px #b8b8b8;
background-color:#f4f5f5;opacity:0.87; }
#vlightbox a img{ display:block; border:none; margin:0px; }
#vlightbox a:hover{ opacity:1; }
#vlightbox a.vlightbox_hidden{ display:none; }
#vlightbox a img { border:medium none; margin:0 auto;width:310px; height:155px; }

步骤3. jQuery (Step 3. JQuery)

Current sample contain jquery.js library and visuallightbox.js. I don`t included source codes of these libraries in post. It always available as a download package

当前示例包含jquery.js库和visuallightbox.js。 我没有在帖子中包含这些库的源代码。 它始终可以作为下载包获得

步骤4.图片 (Step 4. Images)

Also we need several images for our project:

另外，我们的项目需要一些图像：

结论 (Conclusion)

Today I told you how to display sets of images as gallery using jQuery and VisualLightBox plugin at your own website. Hope all my code easy to understand and comfortable to use. You can use this material to create own scripts into your startups. Good luck!

今天，我告诉您如何在自己的网站上使用jQuery和VisualLightBox插件将图像集显示为画廊。 希望我所有的代码都易于理解和使用。 您可以使用此材料在创业公司中创建自己的脚本。 祝好运！

翻译自: https://www.script-tutorials.com/creating-photo-gallery-using-jquery-and-visuallightbox/