Pretty Photo gallery free download

About Pretty Image Gallery

Table of Contents

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

bootstrap.min.css
bootstrap.min.js
jquery.min.js
prettyPhoto.css
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 });
});

$(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>

</a>

</div>

</div>

</div>

</div>

</div>

</div>

</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;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

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

Live Demo

Download

December 13, 2022

HTMLCSS

Owl Carousel Product Slider in HTML5

Know Details

jQuery Carousel Slider With Accordion Style Transitions

June 6, 2022

HTMLCSS

jQuery Carousel Slider With Accordion Style Transitions

Know Details

Testimonials HTML Template Free Download

January 15, 2022

HTMLCSS

Testimonials HTML Template Free Download

Know Details

Bootstrap Table with Pagination and Search

January 9, 2022

HTMLCSS

Bootstrap Table with Pagination and Search

Know Details

Attractive Responsive Testimonials Carousel

December 8, 2021

HTMLCSS

Attractive Responsive Testimonials Carousel

Know Details

How To Make Responsive Testimonial Slider

December 7, 2021

HTMLCSS

How To Make Responsive Testimonial Slider

Know Details

Pretty Photo gallery free download

About Pretty Image Gallery

Building the javascript script for image gallery

Building the HTML code for the photo gallery

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

Conclusion

Check out the full source code for the photo gallery

Related Post

Owl Carousel Product Slider in HTML5

jQuery Carousel Slider With Accordion Style Transitions

Testimonials HTML Template Free Download

Bootstrap Table with Pagination and Search

Attractive Responsive Testimonials Carousel

How To Make Responsive Testimonial Slider

Leave a Reply Cancel reply

Search

Donate

Adobe Photoshop

API Integrations

Bootstrap 5.0 Tutorials

Database Query

Email Templates

Flask and MongoDB

Google Cloud

HTML and CSS

Javascript

PHP

Search Engine Optimization

Templates

Wordpress Theme

Advertisement

Quick Links

Important Links

Share on

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

About Pretty Image Gallery

Building the javascript script for image gallery

Building the HTML code for the photo gallery

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

Conclusion

Check out the full source code for the photo gallery

Share this:

Related Post

Owl Carousel Product Slider in HTML5

jQuery Carousel Slider With Accordion Style Transitions

Testimonials HTML Template Free Download

Bootstrap Table with Pagination and Search

Attractive Responsive Testimonials Carousel

How To Make Responsive Testimonial Slider

Leave a Reply Cancel reply

Search

Donate

Categories

Adobe Photoshop

API Integrations

Bootstrap 5.0 Tutorials

Database Query

Email Templates

Flask and MongoDB

Google Cloud

HTML and CSS

Javascript

PHP

Search Engine Optimization

Templates

Wordpress Theme

Advertisement