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
, Google Chrome
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.
- 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
1. Download ppGallery. Once downloaded, you'll need to unzip the file and upload the ppgallery
folder to your server.
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!
Controls the background fade level. This should be a number from 0 - 1 (0 = 0% opacity, 1 = 100% opacity). The default is 0.5
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.
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.
Adjust the gallery's thumbnail size. The default size is 60 pixels wide.
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
Control the slideshow time interval. Defaults at 3 seconds. Use an interger 1,2,3, etc.
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 »
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
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
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.
Nov 11, 2010 10:31 pm
Nov 15, 2010 5:12 pm
Very smooth, I like it. You did a nice job.
Nov 24, 2010 12:03 am
i've got a problem: I can click play and it works but i can't stop it. Do you know why?
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.
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?
Nov 27, 2010 9:26 am
*** UPDATE: The Slideshow play button bug has been fixed. Nov 28th 2010 ***
Dec 02, 2010 6:16 am
Jphamac: All features are Ok now! Very good work..
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.
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.
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!
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.
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!
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!
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.
Jan 02, 2011 1:13 pm
Alain - that is a feature we are working on for a future release.
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.
Jan 07, 2011 11:57 am
Kelasc - It is not possible yet but there is a wordpress plugin version in the works.
Feb 02, 2011 3:02 pm
very nice add-on. I liked it, I'll try to download
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).
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.
Feb 23, 2011 4:34 pm
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.
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.
Feb 24, 2011 10:04 am
That's great thanks.
You can also get me at firstname.lastname@example.org if you need to.
Thanks a lot
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.
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.
Feb 28, 2011 8:46 am
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?
Mar 04, 2011 5:43 pm
Sorry, I didn't see Alain's messege... Anyway, any news about that?
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
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....
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?
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.
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.
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...
Jul 10, 2011 9:03 pm
Matteo - we're working on that for the next version. Thanks for stopping by.
Jul 13, 2011 5:03 am
i have the same problem as Wojtek for vertical pics. May i have the same code please?
Jul 13, 2011 7:08 am
Federico - Use the contact page and send me your email address.
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 :)
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!
Jul 27, 2011 10:54 am
Is there anyway to have video added to my gallery and plays automatically when i click from the thumbnail ?
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 ?
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
Oct 05, 2011 9:26 pm
How nice gallery! Thankyou :)
Oct 10, 2011 10:49 am
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.
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
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.
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
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...
Apr 25, 2012 7:24 am
auto insurance quotes 045429 low cost life insurance 9565 maryland health insurance plan wvdnlx
May 25, 2012 5:44 pm
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!
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.
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
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.
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?
Aug 18, 2012 11:06 am
Changing the window location to b, from g did the trick.
window.location.hash = b;
Aug 18, 2012 11:32 am
Sorry for that misinformation above. Just use the id='gallery' wherever you want to return from the gallery.
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".
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!
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.
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)
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.
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
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.
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... :-/
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.
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.
Oct 23, 2012 4:14 pm
.live event does not seem to be any help either
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?
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
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
Dec 16, 2012 3:20 am
Feb 11, 2013 11:50 am
Thank for the great plugin. I like it. I also have question though.
seem doesn't work and break the plugin. I did modify index.html download with this parameter. It breaks the gallery.
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!
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]
May 14, 2013 12:32 am
hi! so cool!
Is the AutoPlay of the image possible?
May 22, 2013 3:59 pm
Paul; I'm getting the same error "Syntax error, unrecognized expression"; have you found a solution for this?
Leave Your Comment: