JavaScript is turned off in your web browser. Turn it on to take full advantage of this site, then refresh the page.

ppGallery - Lightbox Gallery

v1.4 - Released Dec. 15, 2010



Showcase your gallery in style with ppGallery, an advanced lightbox photo gallery plugin built with the jQuery Framework. It is lightweight, unobtrusive and installs with ease. It has been tested on the latest versions of IE7, IE8, Safari, Firefox, Google Chrome, Camino and Opera.

ppGallery will take your images and create an elegant photo gallery widget. With some simple copy and paste, you'll install ppGallery in no time! Scroll down for features, install directions and different options to customize your new gallery.




 


features
- Fast & easy setup. Ready right out of the box.
- Fully customizable with css
- Slide show play/pause feature
- Built in preloading feature allows for quick browsing and no waiting between images.
- URL hashing allows the ability to directly link to a specific image
- Lite, snappy but elegant and smooth feel
- Image count and number identification so you know where you are in the gallery
- Thumbnail preview feature allows for convenient navigation through the gallery
- Easy surfing: Navigate through the photos using the spacebar or your left and right arrow keys


how to use
1. Download ppGallery. Once downloaded, you'll need to unzip the file and upload the ppgallery folder to your server.

2. Create a new html page or apply to an existing one. First we'll need to connect the javascript libraries and css styles. Paste the following between your 'head' tags. You can use the 'index.html' file in the download as a model.


3) Create your html code. Here's a sample to model after. Paste this between your 'body' tags.
*Note that it must be an 'unordered list (ul)'


Thats it! If you have any problems installing or have any questions, use the help forum or the comment box at the bottom of this page. Feel free to say hi to us in the forum! We're people too you know!





You have options!

Now that you've got your plugin working, it's time to jazz it up. Here are some options to control the look. More options coming very soon!

Available options, shown below with their default values:

screenFade: 0.8,
screenColor: 'black',
showTitle: 1,
thumbWidth: 60
maxWidth: '',
slideShowDelay: '3',
showHiddenGalleryButton: '',
autoOpen: 0
Example use of options:


View DEMO with some different options »
View DEMO with no thumbnails »
screenFade
Controls the background fade level. This should be a number from 0 - 1 (0 = 0% opacity, 1 = 100% opacity). The default is 0.5
screenColor
Specify the backdrop color. If left blank, it will default to black (#000000). You can use the color HEX code (ex: #000066) or for basic colors, you can use the actual words like 'blue', 'green', 'red', 'yellow', 'brown', etc.
showTitle
This options toggles the showing of titles. The default is 1 (1= yes, 0= no). To include titles with your image, use the 'title' tag within the link.
Example below:
thumbWidth
Adjust the gallery's thumbnail size. The default size is 60 pixels wide.
maxWidth
Control width (pixel) of the large image as well as the thumbnail box. This is useful for when the images are too big to fit in the browser screen. Leave this blank for no restrictions
slideShowDelay
Control the slideshow time interval. Defaults at 3 seconds. Use an interger 1,2,3, etc.
showHiddenGalleryButton
This option does 2 things. First it hides the gallery so you don't see the thumbnails. Next it will make a button out of the provide id. Clicking this button will execute the gallery. Don't forget to create your button and assign the id. VIEW DEMO with this option »
autoOpen
When this options is on, the gallery will automatically execute when the webpage finishes loading. default's to 0 (1= on, 0= off)




Help us help you...

Let us know what features you'd like to see. We are constantly improving ppGallery. Please visit often for new updates and plugins as we are always improving! To keep up with the latest and greatest, sign up to receive emails on new updates/upgrades.

Future plans for this plugin:

- add the ability to navigate through the gallery using the mouse wheel
- add an option to show the gallery on the actual page instead of using the lightbox
- add option to show the gallery's title at the top of the gallery
features

How to upgrade to a newer version?

If you're upgrading from 1.2 to 1.3, you'll need to add a few newlines to your header tags (step 1 above). Plus there are a few more files to upload in the 'css' folder. If you get confused, the easiest thing to do is use the 'index.html' file in the zip download as your example.

RELEASE 1.4
12.15.2010
+ added 'Auto Open' option; automatically execute the gallery when the webpage loads.
+ Added the ability to execute a hidden gallery with a single button rather then the usual thumbnails
+ other small random bug fixes


RELEASE 1.3
11.28.2010
+ implemented slick scrollbar/slider for thumbnail window.
+ fixed slideshow 'play' button bug.
+ other small random bug fixes


RELEASE 1.2
11.24.2010
+ added the ability to navigate through the gallery using arrow keys and spacebar
+ small random bug fixes


RELEASE 1.1
11.18.2010
+ first version




features
Let us know what you think about ppGallery. What can we improve on?
If you have suggestions for features, voice it here as well.

If you like the plugin, drop us a line below. We'd love to see it in action so feel free to include a link.


Poster:
Jason Pham
View Site »
Nov 11, 2010 10:31 pm
Sweet gallery!
Poster:
ISKAP
Nov 15, 2010 5:12 pm
Very smooth, I like it. You did a nice job.
Poster:
JPS
Nov 24, 2010 12:03 am
Hy, i've got a problem: I can click play and it works but i can't stop it. Do you know why?
Poster:
Jphamac
View Site »
Nov 24, 2010 12:26 am
JPS - can you post a link to your site or use the contact us page to send it to me privately? I'll check it out and see if I can help.
Poster:
Dey
Nov 27, 2010 9:20 am
JPS: I have the same problem. Jphamac : Thank you for this job. It is very nice. But the problem is seing in your demo. When we click on "Play" all is ok but when we click on "Stop" once or several times, delay will accelerate . What do you think about?
Poster:
Jphamac
Nov 27, 2010 9:26 am
*** UPDATE: The Slideshow play button bug has been fixed. Nov 28th 2010 ***
Poster:
Dey
Dec 02, 2010 6:16 am
Jphamac: All features are Ok now! Very good work.. Thank you!
Poster:
valiz8
Dec 15, 2010 3:39 pm
It`s a very cool script. I just have one question, how can i make a single link which opens a gallery / array of images? For example i have 1 thumbnail and when a user clicks it i want it to open multiple pictures in the ppgallery. Thank you!
Poster:
Jphamac
Dec 15, 2010 9:23 pm
valiz8 - Download the new version "v1.4". It has that feature. It's called 'showHiddenGalleryButton'. There's a demo if you scroll up to the options.
Poster:
Stan
View Site »
Dec 15, 2010 10:39 pm
This is one of the nicest looking scripts I've used. Now here comes the but...in IE7, the initial slideshow opens up way wide on my monitor (1920 x 1080) and only orients correctly (centered) when you move the window wider/narrower or if you Close and restart the slideshow. Works fine in FF not IE. Any clues? Love it otherwise!
Poster:
Jphamac
Dec 15, 2010 10:46 pm
Stan - We'll look into it. We're testing on IE7 and IE8 and are not seeing that. I checked out your site. Looks great. I noticed that you're running v1.3. I just posted v1.4 while earlier. There are a few extra options and a few less bugs. Just switch out the ppgallery.js file. Thanks for dropping by and reporting the bug.
Poster:
Stan
View Site »
Dec 16, 2010 12:54 pm
Wow, thanks for the quick response. Loaded in v1.4 js and unfortunately no change. Don't know if it has to do with having 27 thumbnails or not (which I need to add more). Can you tell me how to control the fadeout/fadein time interval when switching images in Play mode for both thumbnails and large image? With more accessible settings to control - this would be a super gallery!
Poster:
Jphamac
Dec 16, 2010 2:24 pm
Stan - Do you mean the time interval between slides or do you mean the time interval of how long it takes to fade in and out? Feel free to use the contact form to reach me. It would be easier then going back and forth on this comment feature. On the other subject, it shouldn't matter how many thumbnails you have. We're still not able to duplicate the bug here on IE7. Any chance you can post a screen shot on your server and send us a link? THANKS!
Poster:
Alain
Dec 27, 2010 11:08 pm
I really like it... However, I was hopping to be able to put multiple galleries on the same page with multiple buttons(Thumnails) each opening its own set of images... It does not work as although it opens the gallery for every button, it gets confused on the images to display. Thanks
Poster:
Jphamac
Jan 02, 2011 1:13 pm
Alain - that is a feature we are working on for a future release.
Poster:
Kelasc
View Site »
Jan 05, 2011 3:23 am
Excuse me because i'm a beginner with this. Is possible to insert ppgallery in a blog with blogger? It would be great!, thank you.
Poster:
Jphamac
Jan 07, 2011 11:57 am
Kelasc - It is not possible yet but there is a wordpress plugin version in the works.
Poster:
ahmet27
View Site »
Feb 02, 2011 3:02 pm
very nice add-on. I liked it, I'll try to download
Poster:
Tiago Tomasi
View Site »
Feb 15, 2011 4:51 am
Muito bom! Vou fazer os testes. Além dos recursos de mostrar título da galeria e mostrar a galeria na página real em vez de usar a mesa de luz. Seria muito bom ter a opção para fechar com a tecla ESC e opções para compartilhar a foto(Indique um amigo e redes sociais).
Poster:
Jphamac
Feb 15, 2011 9:39 am
Tiago Tomasi -Thats a great idea. I may add that to the next version. Thanks for dropping by. Isso é uma grande idéia. Posso acrescentar que para a próxima versão. Obrigado pela visita.
Poster:
mimmotron
Feb 23, 2011 4:34 pm
Thank's
Poster:
Dave
View Site »
Feb 24, 2011 9:57 am
The script is stopping me having spaces in the inputs on my contact form. Page is here http://tulipblinds.co.uk/ Any help would be great.
Poster:
Jphamac
Feb 24, 2011 10:01 am
Dave - Thank you for reporting the bug. We will look into this and apply the fix to the next version. If the fix is easy, I will reply back here and give you instructions on how to fix it.
Poster:
Dave
View Site »
Feb 24, 2011 10:04 am
That's great thanks. You can also get me at dave@hiddendepth.ie if you need to. Thanks a lot
Poster:
Marco Isotti
View Site »
Feb 28, 2011 8:00 am
Excellent Plug-in thanks, I wanted to know if you can use multiple sets of gallery, because as I do (renaming every gallery with different ID), the operation is faulty.
Poster:
Jphamac
Feb 28, 2011 8:03 am
Marco Isotti - We are working on that feature for the next version. Currently you can only have one gallery per page. Thanks for visiting and downloading.
Poster:
Marco Isotti
View Site »
Feb 28, 2011 8:46 am
Thank's
Poster:
Rob
Mar 04, 2011 5:38 pm
Hi, is it possible to have 2 or more different galleries on the same page using the "button" to open them? Thank you!
Poster:
Rob
Mar 04, 2011 5:43 pm
Sorry, I didn't see Alain's messege... Anyway, any news about that? Thanks again!
Poster:
Ryan
Apr 11, 2011 12:33 am
Hiho and good morning:) this plugin is really cool, but i'm getting some errors with IE... Meldung: 'left' is null or not an object Zeile: 36 Zeichen: 500 Code: 0 URI: http://pathtomelocalwebsite/ppgallery/js/ppgallery.js Any ideas?
Poster:
Ryan
Apr 11, 2011 1:59 am
Ok, i found the problem. you can't use relative paths, you need an absolute path from the server domain....
Poster:
Wojtek
Jun 27, 2011 12:41 am
I have several photos that vertically don't fit my screen. Is there any way to add some scrollbar? thanks
Poster:
Jphamac
Jul 06, 2011 10:40 am
Wojtek - send me your email and I'll give you some code to make it scrollable. Use the contact page to reach me.
Poster:
Jphamac
Jul 06, 2011 10:41 am
Rob - We're working on that and will release it with the next version. I've been so busy, haven't had time to dedicate to this gallery but will be soon.
Poster:
Matteo
Jul 08, 2011 6:23 am
Hi to everyone! This plugin is wonderful! I'd love to know if there's a way to have the gallery "directly" on the page and not with the lightbox effect... Thanks!
Poster:
Jphamac
Jul 10, 2011 9:03 pm
Matteo - we're working on that for the next version. Thanks for stopping by.
Poster:
Federico
Jul 13, 2011 5:03 am
i have the same problem as Wojtek for vertical pics. May i have the same code please?
Poster:
Jphamac
Jul 13, 2011 7:08 am
Federico - Use the contact page and send me your email address.
Poster:
Carol
Jul 22, 2011 8:43 am
Hi, I really love this gallery! I'm a bit of a novice, so I'm having trouble figuring out "showHiddenGallerybutton". I have managed to hide the thumbnails, but can't get the button to appear and open the gallery. I would greatly appreciate your help! Thank you :)
Poster:
Jphamac
Jul 22, 2011 8:50 am
Carol - use the contact form to send me a link to your test gallery. I'll see if I can find the problem. Thanks for dropping by!
Poster:
developergirl
Jul 27, 2011 10:54 am
Hi There, Is there anyway to have video added to my gallery and plays automatically when i click from the thumbnail ?
Poster:
jim
Aug 08, 2011 5:19 am
Hi my site is 800px width and when i insert your gallery, it floats out of my website content looks like gallery is positionned smth if it would be like ( padding-left:-100px;) how can i fix it to have in my web content ?
Poster:
Gianluca
Sep 30, 2011 1:39 am
it's possibile open the gallery (instead of the button through) by clicking on a photo? sorry for my english
Poster:
natsu
Oct 05, 2011 9:26 pm
How nice gallery! Thankyou :)
Poster:
Nello Squillante
Oct 10, 2011 10:49 am
Salve, Il mio problema è che inserendo immagini grandi larghe 900px quest'ultime non sono centrate nella pagina o meglio il telaio della gallery non si allarga e centra in base all'immagine stessa. Ti ringrazio.
Poster:
Daniele
Nov 11, 2011 11:18 am
The script doesn\'t work inside of my page. When I click on an image is opened in another window
Poster:
Rail
View Site »
Feb 22, 2012 9:37 am
Something iinreestntg I heard today on Dan Patrick. Mark Cuban was on and said he doesnt believe there is any kind of conspiracy to get Lakers and Celtics in Finals.
Poster:
Wayne Chong
View Site »
Mar 06, 2012 8:40 pm
Thank for sharing this wonderful plugin. That's really a nice & interesting gallery. As my testing, it's work for Google Chrome, Mozilla Firefox as well as Opera. Just only the IE, i'm getting some errors within...: "Message: 'left' is null or not an object Line: 36 Char: 500 Code: 0 URI: http://www.spsetia.com.my/bukit-indah-johor/scripts/js_jquery/ppgallery.js"... I think this problem it's same with the previous poster, Ryan...And i don't get any idea to fix it. Please Help me...
Poster:
Staysha
View Site »
Apr 25, 2012 7:24 am
auto insurance quotes 045429 low cost life insurance 9565 maryland health insurance plan wvdnlx
Poster:
Vanessa King
May 25, 2012 5:44 pm
Hi, It's almost perfect—as soon as I get paid, I'm submitting a donation (where's your "Donate" button?!), but I have one quick item I'd love to see added: A maxHeight would be fantastic! I am creating a gallery for a friend and most of his images are vertically (portrait) oriented. He wants them as large as possible, but I am concerned about having to set up the lowest common denominator. Aside from that—so elegant, thanks!
Poster:
Vanessa King
May 25, 2012 5:49 pm
Sorry, amend my previous maxHeight suggestion. A "FitWindow" option would be ideal so the image can be as large as the user's window will allow. Thanks!
Poster:
Will
Jun 14, 2012 10:32 am
This is nice, but trying to make the width of the black region in which the photo appears to become wider. the height adjusts nicely. But i want to have the width either adjust or simply to remain much wider then it is thanks
Poster:
sam
Aug 18, 2012 8:42 am
first, fifth and sixth images too large to display on my screen, and i cant scroll down to view the hidden parts.
Poster:
Jeff
View Site »
Aug 18, 2012 11:02 am
When I close the gallery, I don't return to the top of the page. How do I change this? Thanks, Jeff
Poster:
Jeff
View Site »
Aug 18, 2012 11:06 am
Changing the window location to b, from g did the trick. window.location.hash = b; Thanks, Jeff
Poster:
Jeff
View Site »
Aug 18, 2012 11:32 am
Sorry for that misinformation above. Just use the id='gallery' wherever you want to return from the gallery. -Jeff
Poster:
Jeff
Aug 18, 2012 12:04 pm
I wanted to return to the top of my page after closing the gallery. Change the page name from gallery to something else, "page" in this example. Then you will return to the location where you put the id equal to "page". $(document).ready(function() { $('#page').ppGallery({ -Jeff
Poster:
Mons
Aug 27, 2012 4:35 am
Hi, Great Script, Heres a problem I am facing, If two images in the gallery have same name, the slide show acts weird, it gets stuck the first image with the common name.. Does any body know how to solve this? Thanks in Advance!
Poster:
Rick
Sep 12, 2012 8:17 am
Is there any way to have the page open with the gallery already in place? I love the look and function of the gallery, but it adds an extra click to get into it.
Poster:
Jahaziel
View Site »
Sep 27, 2012 3:46 pm
Hi, the gallery looks so great. thanks.. i\'m almost new on jquery, and i have a problem with the galley, when i add the button (lense) with all gallery, js and css. for some reason looks like replace the order to the menu and for the banner.. http://www.labdirac.mx/html/web-main.html (without the gallery) http://www.labdirac.mx/ppGallery/html/web-main.html (with the gallery) Thanks!!
Poster:
dev
Sep 29, 2012 2:26 am
problem with jquery .7 .8 add quotes around the ppgallery.js search for a[ there's only 1 and change a[href="+b+"] to a[href='"+b+"'] save and run.
Poster:
Ayyash
Oct 03, 2012 10:22 pm
Any chance of getting the uncompressed version of the code? there a lot of changes i'd like to add to my local version
Poster:
Gent
View Site »
Oct 08, 2012 4:24 am
This is perfect. I really like this gallery a lot. I want very badly to use it in a webpage I'm building. The whole content of the webpage is in flash and I want to put the gallery at the bottom just like this (take a look at my page http://www.mm-fashion.net). The problem is that with Internet Explorer flash refuses to stay at the back and the slideshow shows behind the flash. I'm leaving the page http://www.mm-fashion.net like that so that you might see it and give me any advice. I'm not good at programing so maybe I've done something wrong and it's not the fault of the script. Thank you in advance.
Poster:
Mike
Oct 08, 2012 6:54 am
To clarify what "dev" said above, if you need to update ppgallery to work with more recent versions of jQuery change line 222 to add quotes around the url: a('a[href="' + b + '"]').addClass("activepp"); Has anyone found a way to activate the gallery without adding pages to history? I'm using the hidden gallery button, but the hash functionality adds extra pages for every image that is loaded. When the user closes the gallery the back button is useless... :-/
Poster:
Angela Schumacher
Oct 18, 2012 2:12 pm
Would be cool if this would support Pagination. I have so many thumbnails that I don't want them all on one page.
Poster:
Mark
Oct 23, 2012 4:10 pm
I can not seem to get this to work by dynamically loading the data. any advise would be nice. $.post('images.php', function(output){ for(i=0; i
Poster:
Mark
Oct 23, 2012 4:14 pm
.live event does not seem to be any help either $.post('images.php', function(output){ for(i=0; i
Poster:
elena
Oct 30, 2012 4:34 am
Thank you, the gallery is great. Is there a way to have different showHiddenGalleryButtons that link to different galleries in the same page?
Poster:
Claire
Dec 05, 2012 6:45 am
I am doing the gallery with the hiiden thumbnails, but as soon as i add more than 10 images it stops working
Poster:
christian
View Site »
Dec 07, 2012 12:47 pm
hello, congratulations for the nice work, I wanted to ask if it worked with Internet Explorer 7 and 8. Thanks
Poster:
deepak
Dec 16, 2012 3:20 am
cfsf
Poster:
Truyenle
Feb 11, 2013 11:50 am
Thank for the great plugin. I like it. I also have question though. autoOpen: 1 seem doesn't work and break the plugin. I did modify index.html download with this parameter. It breaks the gallery.
Poster:
Angela K Schumacher
Feb 18, 2013 2:36 pm
HI. I am having trouble getting the gallery to work with the HTML5 doctype. When using the HTML5 doctype, the lightbox does not center correctly on smaller monitors or on smartphones. It tends to jump over to the left. Then it gets stuck half way off screen. Any ideas? Thank you so much. Beautiful plugin!
Poster:
Paul
Feb 21, 2013 5:48 am
Hi. Looks like a nice plugin but it doesn't work with jquery 1.9.1. It breaks with this error in Firefox: Error: Syntax error, unrecognized expression: a[href=http://ppplugins.com/demo/ppgallery/images/l_06.jpg]
Poster:
missie
May 14, 2013 12:32 am
hi! so cool! Is the AutoPlay of the image possible?
Poster:
Chris
May 22, 2013 3:59 pm
Paul; I'm getting the same error "Syntax error, unrecognized expression"; have you found a solution for this?
Poster:
Jess
Sep 06, 2013 6:55 pm
Hello, So I downloaded the plugin and everything is awesome, however, the only thing im having trouble with is making the gallery scroll down when im looking at a image so i can see it in its entirety. Right now I click on an image and it only lets me look at a part of it, it wont allow me to scroll down and see it. PLEASE HELP!!!
Poster:
Jess
Sep 06, 2013 7:04 pm
Is there any way to add some scrollbar? thanks
Poster:
Elven YAGAMI
Sep 09, 2013 4:48 am
Hello, My web site include jquery-1.8.0.min.js, how can work with multiple jquery?
Poster:
Vincent Lo Palo
View Site »
Sep 10, 2013 4:52 am
Hello Elven, to solve jquery conflict, check this discussion in StackOverFlow : http://stackoverflow.com/questions/4844347/use-two-jquery-version-in-one-page I hope that this help you!
Poster:
SHANKAR
Oct 08, 2013 11:24 pm
GOOD
Poster:
Chandan Singh
View Site »
Dec 20, 2013 3:56 am
dsf sdf
Poster:
Maria
Feb 21, 2014 2:50 pm
Hello! It's a very nice gallery! I would like to ask if it permissible to edit and use it on my website that i will upload on the internet. Thanks in advance
Poster:
JEsus
Mar 13, 2014 6:50 pm
How can I change an old ppGallery for this one. The thumbalis inside de lightbox are overflowed in the old one http://mariabarba.com/portfolio/life-various-2/#prettyPhoto[gallery1]/10/ Your help will be very apreciated. Thanks in advance.
Poster:
kudrna
View Site »
Mar 28, 2014 11:27 pm
děkuji
Poster:
ozzy osborne
Aug 04, 2014 1:23 am
ya



Leave Your Comment:
Security Code:
Enter Security Code: Your code entry is case sensitive. Please enter it exactly as it appears.


Your Name:*

Your website url:

Your comments/questions:*

Please keep your comments relevant.
Inappropriate or promotional comments will be removed.
SUBMIT »