PrettyPhoto enhancements, fixes & development
  • Hi,
    Can anyone suggest me how to make the fix sized image in the modal pop-up.
    I have different image with different size, when i click the thumbnails in the modal pop-up, image will display with it's original size, this I don't want.
    I need, image should display in fixed size.

    Next requireent is, when I click the image in the overlay, then it should display image with original size.
    In summary, I want to pop-up the image, then want to zoom by clicking poped-up image.
    Please let me know is this possible using pretty image plug in, how can customize this to achieve the above requirement.
    I tried by modifying the width and height attributes but no luck!

    I modifies the image markup, like
    image_markup: 'image'

    but this has no effect, image simply displays with it's original size.

    Please let me know if anybody have any inputs.

  • sorry there i no image in the above comment I just want to show the script:
    This is what (updated script) i wanted to show

    "image_markup: &lt img id="fullResImage" src="{path}" width="350" height="250" /\>"
  • Just wanted to add my thanks to Vladimir for all of the awesome work.
  • Hey, I have the little problem, that the 'like'-Button do not work properly. when i'm clicking the button, its changing to grey with the count 1, but after a second it changes back to the simple like button, and nothing has been posted on Facebook...
    Any Idea?
  • s0n4, are you testing it online or from a local file?
    to combat this problem i also "liked" something else on another side, then it seemed to reset my ability to do so from my site
  • i've tested it online, but i will try to like something else and like a picture on my site again^^ maybe it will work
  • I have added save button to my code.
    Take a note - it works only in "default" theme. You'll need to change sprite & css for other themes.
  • Vlad, the facebook like doesn't seem to be working for a number of us. Any ideas?
    I also have this problem in which when I click "next" on the gallery view it closes down the lightbox then re-opens it and shows the next picture.
  • here is my work in progress:
  • hi I am trying to add a linkable button to my prettyphoto.js Does anyone have an example of how to do so? I want to make a button that is used to purchase a photo. So the button when clicked will navigate to a url i designate.

  • so iv been reading this thread over and over. making sure i have not missed out using wp-prettyphoto (wp-prettyphoto 1.6.2 modified for WP 3.1.1)
    I have copied the Vladimirs .js file and css but i still cant get the twitter and facebook button link to share individual images. is there a way to customize the actual link? if so what file is the script in?

    what im getting now is this

    for the facebook link

    when i want it to go here

    and for the twitter link is going here

    when i want it to go here

    can any one help. it would be greatly appreciated.
  • The facebook button does not work for me either.
  • i cant get it to work. ill just go back to using fancybox. at least that works everytime
  • so i found this link that tell you how to customize the tweet button. i figure you would have to alter this piece code in the wp-prettyphoto/js/jquery.prettyPhoto.js file

    function _changeTwitter() {
    if (settings.twitter) {
    var link = _getCurrentPictureLink();
    $('.pp_social .twitter').html('');

    but im not sure what to alter. if an of you know how to do this to make it share the pictue url instead of the full gallery, it would be greatly appreciated.

    also if there is a way to customize the title of the tweet that would be nice. :)
  • hello friends so i have gotten as far as adding my own text and my twitter tag.

    $('.pp_social .twitter').html('

    the main thing i want to get done is so it will pull the url for the photo. what i have noticed is when you click the image and it opens in the lightbox, the url in the main browser changes. this is the url that we need the tweet button to call. from what i have seen im thinking that the code should start out like this


    now what has to go after the = in this code i do not know.

    if any one knows how to call the current url using &url=
    please lend a hand here

    i thought it owuld have looked something like this


    but that didn't work.
    i am doing all this with no knowledge of code and scripts what so ever so if any one with the knowledge can help please do.
  • so i found this piece of code. it seems to grab the current browser url. if i can find where to place it in the twitter button code i think it would work

    so i need to place this code

    document.write (document.location.href);

    inside this code

    $('.pp_social .twitter').html('
  • ok guys i have figure it out to get the twitter share to share a single image and open that image link in pretty box

    you have to add these codes to the wp-prettyphoto/js/jquery.prettyPhoto.js

    and data-url=" '+link+' "

    this is how the code will look

    function _changeTwitter() {
    if (settings.twitter) {
    var link = (document.URL);
    $('.pp_social .twitter').html('');
  • Hello , Is there a way to add facebook comments too?
  • Hello, i try VLadimir CODE for Facebook Like to ONE Photo, its work but dont sent like to FACEBOOK WALL. Pls can you some one help me?

    If i use original code, facebook like works and show on WALL but only full GALLERY not single photo.

    where is test page

    Pls someone help me .)
  • hey Centy, for the facebook button you need to generate the button on here

    once you have finished that, in the part of the code where is says "&href" you need to add = '+link+' it will then look like this
    &href= '+link+'

    the full code in the js file will look like this

    function _changeFacebook() {
    if (settings.facebook) {
    var link = _getCurrentPictureLink();
    $('.pp_social .facebook').html('');

    hope this helps
  • I dont know :D Pls Can you change Prettyphoto.js and send to me? Thank you

    Where is CODE :)
  • hey centy let me know if this works for you
  • This dont work, if i replace original code, images on page are visible.
  • oh well. lets hope some one can help. i still feel like the facebook and twitter button should be changed to an addthis or sharethis button though. this would be much easier because then you would only have one piece of code to work with. lets hope some one can help soon
  • Hi Vladimir

    Your individual image Facebook like tweaks to the PrettyPhoto js code have been exactly what I have been looking for - thanks!

    I have incorporated these into my site (running on Joomla) and all is good - except for one problem - the images fail to load in the overlay gallery.

    e.g. ->

    Do you have any ideas what could be causing this?

    Cheers for all your hard work :-)


  • hi does any one know how to change the image on vlads facebook like button to the traditional one?

    social_tools: '
    ', /* html or false to disable */

    Above is Vlads line of code. Hi code works awesome for liking individual photos and not just the whole gallery! Just need to make the like button in US format.

    FIXED by adding this thanks all!

  • Hi twitter button working great and link on wall is directly to overlay gallery.
    How do the same with facebook link ? I have the same problem like 'rjmnz' link is to photo and can't open in overlay gallery
  • @tylkospokojnie this is something i've been trying to get help with since august. no one seem to know how to fix it.
  • Hi Vladimir ,
    This is what I"m looking for,thanks!
    But your demo site not working on Chrome got error "image cannot be loaded...",working fine on Firefox.
  • Hello! There was discussion about how to save images, I have oposite question. How to disable "save as" and download images ? (or right-click in general) Thank you !
  • Hello,

    For anyone interested, we solved the initial concern of this thread by integrating a Javascript Lazyload into PrettyPhoto. Essentially, when you go to a page now, Lazyload only loads the images that are displayed on the page. As you scroll down, it loads more. That way, if you have 250 images, the user isn't left waiting for all of them to load if you click on one. I've also integrated a download button into pretty photo by modifying the style sheet and JS. There were a bunch of code changes that I made, so I'd just suggest that you grab all of my source code (which is based on PP 3.14):

    Enjoy. Hope that helps a few people out.

    Ray Majoran
    Twitter: @RayMajoran
  • Hi everybody,
    I've uploaded the .js file that Vladimir posted here (I know, it's been a while now) and it's not working for me. I get the pop-up but in its bottom i can't get the thumbnails loaded. If i could post a screenshot of what i get i would, but there's no option.

    Has everybody got it working?
    Vladimir, i just need the pop-up and all the thumbnails, even if we've got more than 20-30. How can i fix it? (I don't need the facebook or twitter buttons at the moment, so it should be easier to find the error, shouldn't it?).

    Thanks in advance and sorry for the inconvenience.
  • Hi !!!

    My site reference :

    Problem : This is to load the bigger images one by one and not all together on clicking the thumbnail.You can take a look at the site, reference given above.

    The problem is, I cannot use Drachmad code because my markup is different due to customization.

    Here is the markup : ( Please view the source on the website, if the markup doesnot display )


    I have used a blank image that is clickable in the src. Hence i cannot use the code given by dRachmad.

    My site is slower to access hence i want to make the images load one by one and not all together.


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