not a support questionHey 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 http://www.pixelcove.co.uk/4colourprogress/pixels/picture/99/
Monsoon
Member
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:
{pp_social} \
<a class="pp_close" href="#">Close</a> \with:
{pp_social} \
<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....
Monsoon
Member
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}" />',with:
image_markup: '<img id="fullResImage" src="{path}" /><a class="pp_download" href="{path}">Download</a>',Another way is to use the jquery append functions: http://api.jquery.com/append/ , http://api.jquery.com/prepend/ and/or the html function: http://api.jquery.com/html/ 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:
pp_images[set_position]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.
Dude,
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> \
Before:
<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>');
BR,
Aleksandr
You must log in to post.
Please start by registering an account for this forum here
Create a new thread and tell me what problems you are encountering and what you want to know.
There is no step 3 :)
We try to answer all questions within a day, monday-friday.
