https://idea-hack.com/blog/29470/
10 instant codes for using  lightbox with ‘VenoBox ‘

10 instant codes for using lightbox with ‘VenoBox ‘

We provide 10 instant code collection for lightbox which is easily realized with ‘VenoBox’.

“VenoBox” that makes it easy to use lightbox for template developers.

VenoBox makes it easy to introduce lightbox to your site.

However, if you do not know how to use it is surprisingly difficult to implement. So I created instant code collection that so that you can introduce it easily.

VenoBox | Just another responsive jQuery Lightbox plugin

Parametor

OptionDescriptionDefault
arrowsColorGallery navigation arrows color'#B6B6B6'
autoplayAutomatic play for videosfalse
bgcolorBackground color of the item (also affects border color, if has a border)'#ffffff'
borderBorder thickness of the modal window'0px'
closeBackgroundClose button background color'#161617'
closeColorClose button text color'#d2d2d2'
framewidthYou can set a static window width, otherwise the plugin will keep the responsive size settings of .venoframe class''
frameheightYou can set a static window height, otherwise the plugin will keep the responsive size settings of .venoframe class''
infinigallInfinite gallery, jumps from last to first item and vice versafalse
numeratioShow navigation number and total items in current galleryfalse
numerationBackgroundGallery numeration background color'#161617'
numerationColorGallery numeration text color'#d2d2d2'
numerationPositionGallery numeration position, available: 'top' or 'bottom''top'
overlayCloseSet false to disable the overlay click-close and keep enabled only the [×] close buttontrue
overlayColorOverlay background color'rgba(255,255,255,0.85)'
titleattrSpecific attribute to display a title (e.g. ‘data-title’)'title'
titleBackgroundTitle background color'#161617'
titleColorTitle text color'#d2d2d2'
titlePositionTitle position, available: 'top' or 'bottom''top'
spinColorPreloader color'#d2d2d2'
spinnerPreloader type'double-bounce'

Data Attributes

If you want to use this library for not image but another content type, this library requires you to set which content type will you use for this.

  • data-vbtype=”iframe”
  • data-vbtype=”inline”
  • data-vbtype=”ajax”
  • data-vbtype=”video”
  • data-vbtype=”video”

Introduction

These are assets in demos in this post.

CSS

html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/venobox/1.8.5/venobox.min.css">

Javascript

html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/venobox/1.8.5/venobox.min.js"></script>

Code collection

1: Leave the default setting

html
<header>
	<nav>
		<h1 class="text-center py-4">VenoBox</h1>
	</nav>
</header>
<main>
	<div class="container">
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
		</p>
		<ul class="d-flex flex-wrap justify-content-center flex-column flex-md-row list-gallery">
    <li class="p-2"><a href="https://wplabo.idea-hack.com/aries-demo/wp-content/uploads/sites/2/2019/06/1e09a122-18e0-3965-b1bc-2bddb8b5565c.jpg" class="venobox" data-gall="gallery" title=""><img class="w-100 h-auto" src="https://wplabo.idea-hack.com/aries-demo/wp-content/uploads/sites/2/2019/06/1e09a122-18e0-3965-b1bc-2bddb8b5565c.jpg" alt=""></a></li>
    <li class="p-2"><a href="https://wplabo.idea-hack.com/aries-demo/wp-content/uploads/sites/2/2019/06/49474b6d-eb0a-3538-83d7-2e2b08e776de.jpg" class="venobox" data-gall="gallery" title=""><img class="w-100 h-auto" src="https://wplabo.idea-hack.com/aries-demo/wp-content/uploads/sites/2/2019/06/49474b6d-eb0a-3538-83d7-2e2b08e776de.jpg" alt=""></a></li>
    <li class="p-2"><a href="https://wplabo.idea-hack.com/aries-demo/wp-content/uploads/sites/2/2019/06/9ed0a690-cac9-3626-b4db-482449aa542f.jpg" class="venobox" data-gall="gallery" title=""><img class="w-100 h-auto" src="https://wplabo.idea-hack.com/aries-demo/wp-content/uploads/sites/2/2019/06/9ed0a690-cac9-3626-b4db-482449aa542f.jpg" alt=""></a></li>
    <li class="p-2"><a href="https://wplabo.idea-hack.com/aries-demo/wp-content/uploads/sites/2/2019/06/8effb6b2-ad06-3a77-90a3-9eadf8fb26f1.jpg" class="venobox" data-gall="gallery" title=""><img class="w-100 h-auto" src="https://wplabo.idea-hack.com/aries-demo/wp-content/uploads/sites/2/2019/06/8effb6b2-ad06-3a77-90a3-9eadf8fb26f1.jpg" alt=""></a></li>
</ul>
	</div>
</main>
css
body {
  color: #484848;
  font-family: 'Quicksand', sans-serif;
}

ul {
  margin: 0;
  padding: 0;
}

ul.list-gallery {
  list-style-type: none;
}

@media screen and (min-width: 768px) {
  ul.list-gallery li {
    width: 25%;
    height: auto;
  }
}
JQuery
jQuery(function($){
	$('.venobox').venobox();
});

VenoBox Ex2: Add Inifinite loop

html
<header>
	<nav>
		<h1 class="text-center py-4">VenoBox</h1>
	</nav>
</header>
<main>
	<div class="container">
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
		</p>
		<ul class="d-flex flex-wrap justify-content-center flex-column flex-md-row list-gallery">
    <li class="p-2"><a href="https://wplabo.idea-hack.com/aries-demo/wp-content/uploads/sites/2/2019/06/1e09a122-18e0-3965-b1bc-2bddb8b5565c.jpg" class="venobox" data-gall="gallery" title=""><img class="w-100 h-auto" src="https://wplabo.idea-hack.com/aries-demo/wp-content/uploads/sites/2/2019/06/1e09a122-18e0-3965-b1bc-2bddb8b5565c.jpg" alt=""></a></li>
    <li class="p-2"><a href="https://wplabo.idea-hack.com/aries-demo/wp-content/uploads/sites/2/2019/06/49474b6d-eb0a-3538-83d7-2e2b08e776de.jpg" class="venobox" data-gall="gallery" title=""><img class="w-100 h-auto" src="https://wplabo.idea-hack.com/aries-demo/wp-content/uploads/sites/2/2019/06/49474b6d-eb0a-3538-83d7-2e2b08e776de.jpg" alt=""></a></li>
    <li class="p-2"><a href="https://wplabo.idea-hack.com/aries-demo/wp-content/uploads/sites/2/2019/06/9ed0a690-cac9-3626-b4db-482449aa542f.jpg" class="venobox" data-gall="gallery" title=""><img class="w-100 h-auto" src="https://wplabo.idea-hack.com/aries-demo/wp-content/uploads/sites/2/2019/06/9ed0a690-cac9-3626-b4db-482449aa542f.jpg" alt=""></a></li>
    <li class="p-2"><a href="https://wplabo.idea-hack.com/aries-demo/wp-content/uploads/sites/2/2019/06/8effb6b2-ad06-3a77-90a3-9eadf8fb26f1.jpg" class="venobox" data-gall="gallery" title=""><img class="w-100 h-auto" src="https://wplabo.idea-hack.com/aries-demo/wp-content/uploads/sites/2/2019/06/8effb6b2-ad06-3a77-90a3-9eadf8fb26f1.jpg" alt=""></a></li>
</ul>
	</div>
</main>
css
body {
  color: #484848;
  font-family: 'Quicksand', sans-serif;
}

ul {
  margin: 0;
  padding: 0;
}

ul.list-gallery {
  list-style-type: none;
}

@media screen and (min-width: 768px) {
  ul.list-gallery li {
    width: 25%;
    height: auto;
  }
}
JQuery
jQuery(function($){
	$('.venobox').venobox({
		infinigall: true,
	});
});

VenoBox Ex3: Add Navigation

html
<header>
	<nav>
		<h1 class="text-center py-4">VenoBox</h1>
	</nav>
</header>
<main>
	<div class="container">
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
		</p>
		<ul class="d-flex flex-wrap justify-content-center flex-column flex-md-row list-gallery">
    <li class="p-2"><a href="https://wplabo.idea-hack.com/aries-demo/wp-content/uploads/sites/2/2019/06/1e09a122-18e0-3965-b1bc-2bddb8b5565c.jpg" class="venobox" data-gall="gallery" title=""><img class="w-100 h-auto" src="https://wplabo.idea-hack.com/aries-demo/wp-content/uploads/sites/2/2019/06/1e09a122-18e0-3965-b1bc-2bddb8b5565c.jpg" alt=""></a></li>
    <li class="p-2"><a href="https://wplabo.idea-hack.com/aries-demo/wp-content/uploads/sites/2/2019/06/49474b6d-eb0a-3538-83d7-2e2b08e776de.jpg" class="venobox" data-gall="gallery" title=""><img class="w-100 h-auto" src="https://wplabo.idea-hack.com/aries-demo/wp-content/uploads/sites/2/2019/06/49474b6d-eb0a-3538-83d7-2e2b08e776de.jpg" alt=""></a></li>
    <li class="p-2"><a href="https://wplabo.idea-hack.com/aries-demo/wp-content/uploads/sites/2/2019/06/9ed0a690-cac9-3626-b4db-482449aa542f.jpg" class="venobox" data-gall="gallery" title=""><img class="w-100 h-auto" src="https://wplabo.idea-hack.com/aries-demo/wp-content/uploads/sites/2/2019/06/9ed0a690-cac9-3626-b4db-482449aa542f.jpg" alt=""></a></li>
    <li class="p-2"><a href="https://wplabo.idea-hack.com/aries-demo/wp-content/uploads/sites/2/2019/06/8effb6b2-ad06-3a77-90a3-9eadf8fb26f1.jpg" class="venobox" data-gall="gallery" title=""><img class="w-100 h-auto" src="https://wplabo.idea-hack.com/aries-demo/wp-content/uploads/sites/2/2019/06/8effb6b2-ad06-3a77-90a3-9eadf8fb26f1.jpg" alt=""></a></li>
</ul>
	</div>
</main>
css
body {
  color: #484848;
  font-family: 'Quicksand', sans-serif;
}

ul {
  margin: 0;
  padding: 0;
}

ul.list-gallery {
  list-style-type: none;
}

@media screen and (min-width: 768px) {
  ul.list-gallery li {
    width: 25%;
    height: auto;
  }
}
JQuery
jQuery(function($){
	$('.venobox').venobox({
		infinigall: true,
		numeratio: true,
	});
});

VenoBox Ex4: Add framewidth & frame height