changes to prettyphoto lightbox « Support Forum | Kriesi.at

Support Forum » Angular

changes to prettyphoto lightbox

6 posts from 3 voices

Started 2 months ago by allegrabillings
Latest reply from Nick
This topic is closed
This topic is not resolved

Tags:

allegrabillings
Member

Hello, I have a few questions about the pretty photo light box. I want to make two changes to it but I don't know how.
I was going to attach images for reference but it I don't see how that is possible.

basically when you view an image on a computer browser in the lightbox, if there is multiple images in the post or a slideshow then when you hover your mouse over the left or right side of the image displayed then the previous and next arrows appear for more navigation. This is great. What I don't think is great however is that if there is only a single image and you view in the lightbox this navigation still shows up. This makes the user think there are more images then there are and when clicked the screen just reloads the same photo. Most lightboxes I have used know when a single image is loaded and they don't display the arrow navigation to avoid confusion. Is there a way to change this in the lightbox code. Well I am sure there is I just don't know who to do it myself. I want the arrows to appear on multi image slideshows but not appear if it si only a single image.

Posted 2 months ago #
Nick
Moderator

Hi,

Please use imgur.com (or one of similiar services) to take snapshots , add arrows and labels to image then just paste the url here to the image.

I understand what you mean. Normally the arrows go away when there is only one image. Could you post a link to the page with the arrow problem (you can mask the url via http://www.goo.gl)

Thanks,

Nick

Posted 2 months ago #
allegrabillings
Member

http://i.imgur.com/VL0OUrU.png

This is a screen shot of a single image in a post. when you open it in the lightbox it allows for the left and right arrow navigation, but it just reloads the image if you click. On single image posts or pages, the lightbox should disable the arrow nav.

The site I am working on right now is local but you could view any unmodified angular site. For example here is a post on the angular demo site. if you click on the featured photo it will open in the lightbox and the nav shows up even though it is one image. I would love to know the code that would disable the arrow nav only when you open a single photo. But still have it work any time you open a multi image slideshow ect.

http://www.kriesi.at/themes/angular/2011/01/28/another-title-for-our-pretty-cool-blog/#!prettyPhoto

Posted 2 months ago #
Devin
Moderator

Hi allegrabillings,

As far as I know its on purpose to try and wrap photos into a single group for easy back/forwards navigation.

I'll tag Kriesi on this one as I'm not really sure what would be the effect or how to remove the auto group that gets attached to the lightbox link.

Regards,

Devin

Posted 2 months ago #
allegrabillings
Member

Great I will wait for more info. I get the concept as it does work nice were if you have multiple photos in a blog post for example that aren't' in a slideshow they still end up in the lightbox together which is nice. But I still believe a single image shouldn't have the nav. As a photographer that looks at a ton of photo dominating websites there are a lot of times were a single image might be happening and the behavior is pretty standard around the web where single image lightboxes not having the nav arrows and multi group having it, so you just expect there to be more images if the arrows appear and it wastes time and clicks for the user. Especially if your site is full of images and this happens repeatedly.

I know you can look at the bottom of the lightbox and see a 1-# of course and the single don't have that so you know if there is more images or not, but I can't expect my user to pay that much attention to detail of course. I like the most user friendly site possible, as should everyone.

Thank again for looking into this.

Posted 2 months ago #
Nick
Moderator
Hi,

For now what you can do to quickly remedy the situation is to recreate the css below for every page that contains a gallery with 1 image. Add the code to your quick css or to /css/custom.css;

Just make sure that page-is-2 in the code below is substituted for the code of the page on your site. You can view source, find the <body tag and look at the classes within for one that has an ID number and substitute that class for the page-id-2 in this example. As I said, this is a temporary solution.
```
#top.page-id-2 .pp_previous, #top.page-id-2 .pp_next {
display: none;
}
```
Thanks,

Nick
Posted 2 months ago #