Pretty Photo gallery free download

About Pretty Image Gallery

The pretty Photo gallery is a powerful jQuery Lightbox which fulfills most needs, especially the one bundled in JIG. The plugin comes with a customized model which has really good social sharing choices and good deeplinking.

A lot of persons are familiar with its layout because it’s used on many websites throughout the online. This tutorial we will learn how to implement the jQuery pretty photo gallery lightbox plugin on your website.

Most of the HTML themes are using a pretty photo gallery and portfolio page. the jQuery pretty photo lightbox plugin has been tested and is known to work in the following browsers.

• Firefox 3.0+
• Google Chrome 10.0+
• Internet Explorer 6.0+
• Safari 3.1.1+
• Opera 9+”

Basically, for using a Pretty Photo gallery that you must add some scripts to your website or weblog just like the jQuery library, pretty Photo gallery JS (JavaScript), and the pretty Photo gallery CSS within the head or footer of the web page(s). It appears to be like like this:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

Javascript and css files

1. bootstrap.min.css
2. bootstrap.min.js
3. jquery.min.js
4. prettyPhoto.css
5. jquery.prettyPhoto.js

Building the javascript script for image gallery

Then you possibly can initialize the javascript function, use pretty Photo Gallery by using the following JS code (you must put it before the closing of the body tag):

$(document).ready(function () {
    $("area[rel^='prettyPhoto']").prettyPhoto();

    $(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({ animation_speed: "normal", theme: "light_square", slideshow: 3000, autoplay_slideshow: true });
    $(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({ animation_speed: "fast", slideshow: 10000, hideflash: true });
});

Building the HTML code for the photo gallery

With this method require your theme already integrated pretty Photo (or different lightbox library). What we have to do this’s including the class (class=”prettyPhoto” or class=”lightbox”) and the attributes (data-rel=”prettyPhoto” or rel=”lightbox”) to each picture inside your publish.

<div class="row gallery">
    <div class="col-md-3 pd">
        <a href="images/fullscreen/1.JPG" rel="prettyPhoto[gallery1]" title="You can add caption to pictures. You can add caption to pictures. You can add caption to pictures.">
            <img src="images/thumbnails/1.jpg" class="img-thumb" alt="Red round shape" />
        </a>
    </div>
    <div class="col-md-3 pd">
        <a href="images/fullscreen/2.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/2.jpg" class="img-thumb" alt="Nice building" /></a>
    </div>
    <div class="col-md-3 pd">
        <a href="images/fullscreen/3.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/3.jpg" class="img-thumb" alt="Fire!" /></a>
    </div>
    <div class="col-md-3 pd">
        <a href="images/fullscreen/2.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/2.jpg" class="img-thumb" alt="Rock climbing" /></a>
    </div>
    <div class="col-md-3 pd">
        <a href="images/fullscreen/3.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/3.jpg" class="img-thumb" alt="Fly kite, fly!" /></a>
    </div>
    <div class="col-md-3 pd">
        <a href="images/fullscreen/1.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/1.jpg" class="img-thumb" alt="Nice building" /></a>
    </div>
    <div class="col-md-3 pd">
        <a href="images/fullscreen/2.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/2.jpg" class="img-thumb" alt="Rock climbing" /></a>
    </div>
    <div class="col-md-3 pd">
        <a href="images/fullscreen/3.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/3.jpg" class="img-thumb" alt="Fly kite, fly!" /></a>
    </div>
</div>

Add the below CSS in your style.css file to design the Photo Gallery

div.pp_pic_holder a:focus {
	outline: none;
}
div.pp_overlay {
	background: #000;
	display: none;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 9500;
}
div.pp_pic_holder {
	display: none;
	position: absolute;
	width: 100px;
	z-index: 10000;
}
.pp_top {
	height: 20px;
	position: relative;
}
* html .pp_top {
	padding: 0 20px;
}
.pp_top .pp_left {
	height: 20px;
	left: 0;
	position: absolute;
	width: 20px;
}
.pp_top .pp_middle {
	height: 20px;
	left: 20px;
	position: absolute;
	right: 20px;
}
* html .pp_top .pp_middle {
	left: 0;
	position: static;
}
.pp_top .pp_right {
	height: 20px;
	left: auto;
	position: absolute;
	right: 0;
	top: 0;
	width: 20px;
}
.pp_content {
	height: 40px;
	min-width: 40px;
}
* html .pp_content {
	width: 40px;
}
.pp_fade {
	display: none;
}
.pp_content_container {
	position: relative;
	text-align: left;
	width: 100%;
}
.pp_content_container .pp_left {
	padding-left: 20px;
}
.pp_content_container .pp_right {
	padding-right: 20px;
}
.pp_content_container .pp_details {
	float: left;
	margin: 10px 0 2px 0;
}
.pp_description {
	display: none;
	margin: 0;
}
.pp_social {
	float: left;
	margin: 0;
}
.pp_social .facebook {
	float: left;
	margin-left: 5px;
	width: 55px;
	overflow: hidden;
}
.pp_social .twitter {
	float: left;
}
.pp_nav {
	clear: right;
	float: left;
	margin: 3px 10px 0 0;
}
.pp_nav p {
	float: left;
	margin: 2px 4px;
	white-space: nowrap;
}
.pp_nav .pp_play,  .pp_nav .pp_pause {
	float: left;
	margin-right: 4px;
	text-indent: -10000px;
}
a.pp_arrow_previous,  a.pp_arrow_next {
	display: block;
	float: left;
	height: 15px;
	margin-top: 3px;
	overflow: hidden;
	text-indent: -10000px;
	width: 14px;
}
.pp_hoverContainer {
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 2000;
}
.pp_gallery {
	display: none;
	left: 50%;
	margin-top: -50px;
	position: absolute;
	z-index: 10000;
}
.pp_gallery div {
	float: left;
	overflow: hidden;
	position: relative;
}
.pp_gallery ul {
	float: left;
	height: 35px;
	margin: 0 0 0 5px;
	padding: 0;
	position: relative;
	white-space: nowrap;
}
.pp_gallery ul a {
	border: 1px #000 solid;
	border: 1px rgba(0,0,0,0.5) solid;
	display: block;
	float: left;
	height: 33px;
	overflow: hidden;
}
.pp_gallery ul a:hover,  .pp_gallery li.selected a {
	border-color: #fff;
}
.pp_gallery ul a img {
	border: 0;
}
.pp_gallery li {
	display: block;
	float: left;
	margin: 0 5px 0 0;
	padding: 0;
}
.pp_gallery li.default a {
	background: url(../images/prettyPhoto/facebook/default_thumbnail.gif) 0 0 no-repeat;
	display: block;
	height: 33px;
	width: 50px;
}
.pp_gallery li.default a img {
	display: none;
}
.pp_gallery .pp_arrow_previous,  .pp_gallery .pp_arrow_next {
	margin-top: 7px !important;
}
a.pp_next {
	background: url(../images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat;
	display: block;
	float: right;
	height: 100%;
	text-indent: -10000px;
	width: 49%;
}
a.pp_previous {
	background: url(../images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat;
	display: block;
	float: left;
	height: 100%;
	text-indent: -10000px;
	width: 49%;
}
a.pp_expand,  a.pp_contract {
	cursor: pointer;
	display: none;
	height: 20px;
	position: absolute;
	right: 30px;
	text-indent: -10000px;
	top: 10px;
	width: 20px;
	z-index: 20000;
}
a.pp_close {
	position: absolute;
	right: 0;
	top: 0;
	display: block;
	line-height: 22px;
	text-indent: -10000px;
}
.pp_bottom {
	height: 20px;
	position: relative;
}
* html .pp_bottom {
	padding: 0 20px;
}
.pp_bottom .pp_left {
	height: 20px;
	left: 0;
	position: absolute;
	width: 20px;
}
.pp_bottom .pp_middle {
	height: 20px;
	left: 20px;
	position: absolute;
	right: 20px;
}
* html .pp_bottom .pp_middle {
	left: 0;
	position: static;
}
.pp_bottom .pp_right {
	height: 20px;
	left: auto;
	position: absolute;
	right: 0;
	top: 0;
	width: 20px;
}
.pp_loaderIcon {
	display: block;
	height: 24px;
	left: 50%;
	margin: -12px 0 0 -12px;
	position: absolute;
	top: 50%;
	width: 24px;
}
#pp_full_res {
	line-height: 1 !important;
}
#pp_full_res .pp_inline {
	text-align: left;
}
#pp_full_res .pp_inline p {
	margin: 0 0 15px 0;
}
div.ppt {
	color: #fff;
	display: none;
	font-size: 17px;
	margin: 0 0 5px 15px;
	z-index: 9999;
}
.gallery li {
	display: inline;
}
.img-thumb {
	width: 100%;
}
.pd {
	padding: 2px;
}

Conclusion

This awesome pretty photo gallery jQuery plugin is developed by pretty photo. For extra Advanced Usages, please verify the demo page or go to the official web site.

Check out the full source code for the photo gallery