prettyPhoto border on popup
-
i tried digging through the forums but came up empty on how to change this.
what i'm trying to do is have my photos popup and the white border that surrounds the entire box become much larger. i tried changing some things in the css but ended up breaking it, so i had to reload the original.
the idea is that the piece of art that pops up has a huge "white canvas" instead of looking like it's got a frame.
any idea on how i could achieve this?
this is the URL if you want to take a look.
http://www.patrickberran.com/gallery.html
thank you! -
Hi,
While waiting for an expert, you can try:
It only apply to the horizontal margin.
Change in the initialization:
pp_settings = jQuery.extend({
...
horizontal_padding: 100 }) the default is 20
Change in the prettyphoto.css:
.pp_content_container .pp_left { padding-left: 100px; } the default is 20
I still failed to automated this! (Automation see next post)
It seem this is an unfinished feature of PP
This is only valid for an unbordered lightbox pp-theme (light_rounded / light_square / dark_square) like yours. For others, there should be a manipulation of the images. -
Hi,
If you are confident editing the prettyphoto.js:$.prettyPhoto.open = ...
...
// Display the current position
...
// Horisontal padding (this is added)
$pp_pic_holder.find(".pp_content_container").find(".pp_left").css("padding-left", settings.horizontal_padding);
// Set the description
But in the prettyphoto.css:.pp_content_container .pp_left {} -
Hi,
The key is look at the prettyphoto.open =
Go down until you see "// Display the current position"
before the "// Set the description", add the added line "$pp_pic_holder..."
BTW, are you editing the js directly on the file? If yes, may be you should download the uncompressed version. If you have an interface to it go ahead.
If you just want a fixed margin, it is easier to change in the prettyphoto.css:.pp_content_container .pp_left { padding-left: 100px; } the default is 20The second post is just to automated it so that you just have to change in the initialization only if you want to change the margin. -
hi-
ive got both the compressed and the uncompressed from the site. i'm not really familiar with the difference between the 2 other than one is smaller and the compressed seems like the lines of code run together.
i don't mind a fixed margin - but the issue when i tried what you suggested is that i get spacing only on the left?
i tried adding this to the css but it didn't seem to take it
.pp_content_container .pp_right { padding-right: 100px; }
take a look and see what i mean by it pushing my image to the right.
http://www.patrickberran.com/gallery.html
i was hoping for a fixed margin on all sides just to cover up as much of the screen as possible.
thanks again for your time.
-
hi-
sure i can upgrade the pretty photo files. i think i have these from a gallery template i was trying to use.
will upgrading to the latest version fix the padding with the method you suggested?
EDIT:
excellent - i updated my prettyphoto and i see what your code was doing. i added the change in the js initialize and the css (changed to 200).
looks close to what i was trying to accomplish by taking up most of the screen.
http://www.patrickberran.com/gallery.html#!prettyPhoto[portfolio]/2/
is it possible to do the same thing with a vertical margin so there is more white on the top and bottom? -
It seem you don't need the title, set in the initialization the show_title: false
For the top, I give you the easiest but not flexible. In css:.pp_top {May be you must change the width too, test it your self, I have reset mine :-)
height: 50px; \\ default 20
...
.pp_top .pp_left {
height: 50px; \\ default 20
...
.pp_top .pp_middle {
height: 50px; \\ default 20
...
.pp_top .pp_right {
height: 50px; \\ default 20
...
If you satisfied with the result I stop here. For the bottom part, if you want just a simple solution too, modify the pp_bottom as above. But the height will be unstable depends on length of the description. For a short description as yours I think it is enough.
Another solution will involved how you want to display the description, navigating and close button. -
oh no - looks like i spoke too soon.
although it appears to be working fine with safari on a mac....
if i try to click on the images in firefox on either a mac or a pc, or IE on a pc it's freezing and telling me there is a js error that's causing it to run slow. i didn't change anything in the js? -
Hi,
I use FF 4.0, so it should works.
Try the left and right margin first. And test for all browsers.
Usually the bottom if you push to the limit it seem like it is loading forever. It is due the calculation for the description and the social tools. The protection on over the limit still has some bug.
There is a temporary solution but involving editing the js.
BTW, what do you mean by "remove the code for the theme in the js initialization", the show_title and horizontal_padding?
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
