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!
  • can anyone help with enlarging the border around the image? i'm running out of ideas.
  • 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 {}
  • @dRachmad

    thanks for your advice.
    i was out of town for a week and i'm taking a look at this now.
    should i disregard your first post and make the changes you advised in the second post?

    i don't have a problem opening and editing the .js if i have clear directions...

    thanks again
  • Hi,
    $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto({
    ...
    horizontal_padding: 100, // default 20
    Than see the second post
  • hi-
    i understand the part in yellow and i added that to my document...but i'm not seeing where in the prettyphoto.js file that i make the change or add what you described in the second post.
  • 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,
    I am sorry, I did not check you have the old prettyphoto (3.0.1), my suggestion is for ver. 3.1.1/2. Is it possible for you to upgrade to 3.1.2 because I am not sure what happen for the previous version. I can guide you if we have the same version.
  • 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 {
    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
    ...
    May be you must change the width too, test it your self, I have reset mine :-)
    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.
  • wow that's great. i've made the changes and i think this will due just fine for what i was trying to accomplish for this particular artist.

    i appreciate the help and feedback!

    thank you!
  • 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?
  • i had to remove the code for the theme in the js initialization in order for it to function at all. not sure what was wrong. but now i lost all the customization you explained to me because only safari seems to be ok with it.
  • 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!

Login with Facebook Sign In with Google Sign In with OpenID Sign In with Twitter