Inline content resizing and scrollable
  • Hello,

    I've used the inline content field to serve up large amounts of content which does not work very well with the standard setup, so I've had to make some changes to the setup of prettyphoto to allow the window to fit in the box. I've detailed them here as I think they're useful to the wider community. All line numbers assume using the uncompressed version. I would prefer that this be added as an option in future releases though. Basically, we allow a resize to be done on inline content, but make sure that when we resize the inline content, we only change the height and not the width. This assumes you set a sensible default width.

    PRETTYPHOTO.JS Changes:
    - line 360: doresize = false; // Make sure the dimensions are not resized.
    + line 360: doresize = true; // Reset the dimensions

    + Line 513-515:
    // make the inner box height fixed to allow the toolbar to stay at top
    var toolbar_height = 47;
    $pp_pic_holder.find('#pp_full_res').height(pp_dimensions['contentHeight']-toolbar_height);



    REMOVE: Lines 580-596

    REPLACE WITH:
    if( ((pp_containerWidth > windowWidth) || (pp_containerHeight > windowHeight)) && doresize && settings.allow_resize && !percentBased) {
    resized = true, fitting = false;

    while (!fitting){
    if((pp_containerWidth > windowWidth)){
    imageWidth = (windowWidth - 200);
    // alter the height but not if inline content as it does not make sense; you don't know what the content is
    if(local_type !='inline'){
    imageHeight = (height/width) * imageWidth;
    }
    }else if((pp_containerHeight > windowHeight)){
    imageHeight = (windowHeight - 200);
    // alter the width but not if inline content as it does not make sense; you don't know what the content is
    if(local_type !='inline'){
    imageWidth = (width/height) * imageHeight;
    }
    }else{
    fitting = true;
    };

    pp_containerHeight = imageHeight, pp_containerWidth = imageWidth;
    };

    END REPLACEMENT

    Prettyphoto.css
    #pp_full_res{overflow:auto;}


    Working example:
    http://glam.co.uk/hub/future-fashion/ (and click on a 'box')

    Notes:
    prettyphoto 3.1.4 uncompressed
    '+' means additions
    '-' means removed
  • Essentially, I hope this helps someone out as it took me a while.
  • Hey! Thank for posting this, i have been having alot of trouble implementing this on my site, can you send me the revised JS file?
  • Sorry for not replying earlier, Easter and other commitments
    see http://glam.co.uk/wp-content/themes/glameu/scripts/prettyphoto-clean.js

    This does assume you set a sensible width as the modifications deliberately don't alter the width

    the version there contains modifications I made to have sharethis buttons initialised on each ajax load and google analytics (might be better to use the callback function, but not had time)

    All modifications are clearly stated (line numbers will change because of this). I've listed the line numbers below from the file that I have uploaded (not the same as the source file originally shipped) and what the changes do, but not the actual code in this post as it might get too long and prove difficult to track

    387-400: google analytics pageview and sharethis
    542-548: allow a toolbar to be at the top and fixed position, and alter the content height to be correct; should probably be a setting, but this is dependent on the content you inject. set this to 0 if you are not using the toolbar

    [resizing]
    618-621: get the type of content we're serving
    630-635: ajax and inline no longer resize height to be less than container
    639-645: ajax and inline no longer resize width to be less than specified width


    Prettyphoto call we use (note overrides social buttons to use sharethis) is found on the url above; it does not paste into this forum well

  • Hi stepheng, can you help me with adding sharethis, I tried with your modifications and I got lost, made real mess with the page lol, now pphoto went berserk lol, sharethis shows up when you navigate directly to photo link for examp. to
    http://djordjestijepovic.com/media/photos/gallery/atomic-sunset/#prettyPhoto[1]/0/
    but when clicking prev next it disapears, the page is at
    http://djordjestijepovic.com/media/photos/gallery/atomic-sunset/
    I know 'am doing something terribly wrong lol but just cant figure out what, hope you can help

    Thanks!

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