Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #5321

    Hey guys,

    Is it very complicated to add a download image button to the lightbox?

    I’ve got it working so that you can view all the different sized images on the page (similar to how flickr works) however there is no way to download them!

    you can see an example here


    A crapload of people for more than a year have been asking the guy who develops the lightbox (prettyphoto) to provide a simple way to have a download link in the lightbox. I spent countless hours trying to do so and had to use serious hacks to work around which is really stupid when all you need is a simple link to the asset. The only thing I could do was to pass the url of the image to another page.

    For your page you should be able to duplicate the place where it links to the lightbox in full size and remove the rel=prettyphoto or whatever the rel is so that it simply links to the image instead of launching the lightbox.

    Does that make sense?

    ie the button you have that says ORIGINAL, duplicate the code that generates that and remove the rel= and that should work

    EDIT: oh wait I think the theme rewrites the links hmmm


    I didn’t look into it in detail and maybe I’m missing something but it seems pretty easy to implement a download link. Prettyphoto uses this code:

    <img id="fullResImage" src="{path}" />

    to generate the main/fullwidth image. I assume that you can use the parameter everywhere in the code – i.e. it should be possible to replace:

    <a class="pp_close" href="#">Close</a>


    <a class="pp_download" href="{path}">Download</a>
    <a class="pp_close" href="#">Close</a>

    Maybe styling, etc. is required but the code itself should work….


    You mean in the jquery.prettyPhoto.js ?


    Yes of course :)


    Nahh tried that and the url becomes /folder/{path}

    the {path} is not being rewritten with the image location. I looked for a solution for weeks and gave up last may

    If you can make it work you will make a lot of people on the prettyphoto forums happy. I have no idea why the author after 8 months of being requested to add the option to have a download link still hasn t come through.


    Ok, I looked into it and the problem is that the parser function doesn’t use the markup itself but only small snippets. The easiest way is to replace:

    image_markup: '<img id="fullResImage" src="{path}" />',


    image_markup: '<img id="fullResImage" src="{path}" /><a class="pp_download" href="{path}">Download</a>',

    Another way is to use the jquery append functions: , and/or the html function: to inject the download link somewhere. You can write your code after following line:

    $pp_pic_holder.find('#pp_full_res')[0].innerHTML = settings.image_markup.replace(/{path}/g,pp_images[set_position]);

    and you can use this variable:


    to get the image url. I’m not sure what’s the best methode because you can rearrange and style the download link with html classes and css too.



    that did it thank you so much I have been banging my head on the desk and it was so simple :)


    Glad that I could help you :)



    Thanks for this solution!

    First I thought prepend method works best for me, since you can add html element where you want without replacing existed content like html does, it cuts out all content from block which is applied to.

    Only one small problem with prepend, when you browse more than one image in prettyphoto gallery, it prepend urls to existed ones, so after switching some images you have mix of urls :)

    So it’s better to use html:

    First insert:

    <div class="pp_download_place"></div>


    <a class="pp_close" href="#">Close</a>

    And then as you described with html method:

    $pp_pic_holder.find('.pp_details .pp_download_place').html('<a class="pp_download" href="'+pp_images[set_position]+'"></a>');





    Thanks for the hint :)

    Best regards,


Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Download links inside the lightbox’ is closed to new replies.