Add Lightbox 2.0 Support to your P|P Setup
My design firm uses PP for our project management and I decided it was important to allow quick image previews. So I integrated Lightbox 2.0 into the system. It's a very easy install. This integration provides a pop-up preview of any image you attach to a project or message.
To do this for yourself you need to first download Lightbox 2.0 from:
http://www.huddletogether.com/projects/lightbox2/
Then upload the folders "css", "js", and "images" your server.
We have PP installed on a sub domain so I just threw them into the root directory. If this is not the case for you, I recommend that you upload them to a directory labeled "lightbox".
Next you need to edit "/application/views/files/list_attached_files.php"
Go to line 16 and add: rel="lightbox[default]" to the < a > tag:
< a href="<?php echo $attached_file->getDownloadUrl() ?>" rel="lightbox[default]">
Finally, open up "/application/layouts/project_website.php"
Then add these 4 lines of code just after the tag (3rd line).
< link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />
< script type="text/javascript" src="/js/prototype.js">< /script>
< script type="text/javascript" src="/js/scriptaculous.js?load=effects"></ script>
< script type="text/javascript" src="/js/lightbox.js">< /script>
!!! make sure you change the file location in each line above if you did not upload Lightbox folders to your root directory !!!
Good luck!
Nate
PS. I don't know what this will do to non-image files. All the files I have attached are images so I cannot test this. If this does cause problems with the downloading files, all you need to do is right click the link and download the target.
Could you provide a patch file for this and attach it to a feature request issue? I think we could add some more logic to it so that it only applies to image files. Also since it is an open source solution, we can consider adding it for the next version of PP.
See http://projectpier.org/patch for more info if you're unfamiliar with patch files.
I'd be happy to help and and put that together, but I can't understand the documentation on patches. I don't have a clue about how I am supposed to create patch or even install one of the existing patches.
Is it done with a piece of software? All the links in the body of that article are broken.
I apologize for some of the confusion. I'm still writing up more details which is why some of the links are just place holders. You will need to have checked out the most recent version of the code with a subversion client (software). Then you will basically compare that version with the modified version you have created and store those differences in a special text file. This is done with a subversion command to create the file. You might want to read more details about subversion.
I have changed the files "index.php" and "file_details.php" in the /application/views/files/ folder to have the lighbox effect when clicking the thumbnails.
I changed the code where the thumbnail is located with the following:
<?php $extension = substr(clean($file->getFilename()), -3, 3); ?><?php $light = ($extension == "jpg" || $extension == "png" || $extension == "gif")?true:false; ?>
<div id="fileIcon"><?php if ($light) { ?><a href="<?php echo $file->getDownloadUrl() ?>" rel="lightbox"><?php } ?><img src="<?php echo $file->getTypeIconUrl() ?>" alt="<?php echo $file->getFilename() ?>" /><?php if ($light) { ?></a><?php } ?></div>
Note that the thumbs for a none image file is not affected.
omg, how did i miss this thread???
I'm gonna try it out asap :D
I've succeeded in getting the lightbox to show when i click on the file, but still get a download dialogue instead of viewing the file. is there something that's forcing the download?
no one hass run into this?
Are you using lightbox 2.0 or another moodal?
I test in Shadowbox but the download dialog window apperared. With lightbox it's working.
so the problem lies with shadowbox and not the rest. I'll try with lightbox then. thank you very much!
Kemie
Hey guys,
This sounds really cool. I would love to implement it but I'm having some difficulties. I tried the first method above but where do I paste the four lines?
"Then add these 4 lines of code just after the tag (3rd line)." Which tag is this referring to? I tried just dropping these lines into the head and they just showed up as rendered text on my page.
I also tried the other method someone posted for the index.php page but I'm lost on that one.
If anybody can help please I would appreciate it.
Thanks.
i think it's meant to be just after the < body > tag
Sorry for the delay, I've just read the comment.
I replaced the 40th line in application/views/files/index.php:
<div class="fileIcon"><img src="<?php echo $file->getTypeIconUrl() ?>" alt="<?php echo $file->getFilename() ?>" /></div>With this:
<?php $extension = substr(clean($file->getFilename()), -3, 3); ?><?php $light = ($extension == "jpg" || $extension == "png" || $extension == "gif")?true:false; ?>
<div class="fileIcon"><?php if ($light) { ?><a href="<?php echo $file->getDownloadUrl() ?>" rel="lightbox"><?php } ?><img src="<?php echo $file->getTypeIconUrl() ?>" alt="<?php echo $file->getFilename() ?>" /><?php if ($light) { ?></a><?php } ?></div>
If you still have problems I could send you the file, leave an email please.
Good luck.
There was an error in code…
Line below was missing from list of javascript refs:
<script type="text/javascript" src="lightbox/js/builder.js"></script>I installed this using Pipino's method, but ran into a hitch. When loading a page in IE it would tell me there is an error in my code and the lightbox black would fill the top half of the screen while the "comment box" is underneath and the little "loading" gif is right at the bottom.
Anybody else run into this?
There should be a 'more details' button on the error dialogue. What does it say when you click it?
Well, I deleted the files, restored my backup files and redid the whole thing. It works fine now. What do you know. I must have missed something on the last install. Thanks for the help.