Lightbox JS help

[carioca]

Hi,
I have come across the following link and would like to install this option on my server. I must say I'm a total nut in programming, so after 3 hours trial, I gave up and signed up on the forum...
The blog I'm talking about is here: http://pixelcandy.tomyeah.com/index.php?x=browse

The owner of it has a description how to install lightbox, but it doesn't seem to work with me since I do not understand where exactly the modifications have to go.
Please look at:
www.tomyeah.com

I have been experimenting with the last version of PP 1.5 (did a clean install), and could only get to the point of showing the browser with images. Clicking on the images would not succeed, no bigger image would pop up.
Could someone please give detailed instructions how to integrate lightbox js into PP (for dummies like me), posting the modifications as ready written scripts to be inserted in the detailed files and folders.

Thanks for any help,

Sidney

[Connie]

it would be a good idea if somebody could prepare a template for that and post it here in the forum or upload it...

would be good for everybody ;=)

[codepoit]

I'll attempt to explain, but the original author did a pretty good job of breaking it down...

To start, download the Lightbox Script (http://www.huddletogether.com/projects/lightbox2/#download), and unzip the contents to your computer.

Open your FTP program (or whatever you use to upload files to your pixelpost site). Upload the "css" and "js" directories for lightbox to the root directory of your site. This means, where ever you have all of your pixelpost folders...and where you see your pixelpost "index.php" file. Upload those two directories to this root location.

Take your existing index.php for pixelpost and open it in notepad to edit it's contents. The easiest way to do what needs to be done is to perform a search in that file for "$thumb_output". The line you want to change should be the SECOND result found by that search. It is the line that starts like this: $thumb_output .= Take special note of the . before the equal sign. That is the line you want to edit. The entire original code for this line is: $thumb_output .= "<a href=\"$showprefix$id\"><img src=\"$thumbnail\" alt=\"$title\" title=\"$title\" class=\"thumbnails\" /></a>"; Highlight that entire line and replace it with the following: $thumb_output .= "<a href='images/$name' rel='lightbox[views]' title='$title'><img src='$thumbnail' alt='$title' title='$title' class='thumbnails' /></a>";

Upload your edited index.php to the root directory of pixelpost on your server.

Now, open your browse_template.html file in notepad and add the following lines: <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script> Add these lines directly under the existing stylesheet lines in that file. Upload your edited browse_template.html to the same location where you found it...this will be located somewhere like /templates/simple (depending on which template you are using).

If you still need help, you are going to need to post a link to your site and provide some more information about your pixelpost environment...

[carioca]

Hi codepoit,

thanks to your detailed description the whole thing works now!!

S.

[carioca]

I'm customizing lightbox / PP rightnow, in PP there is an option of inserting an image title as well as description.
My lightbox view shows the title, but not the description.
How could this be modified and in which script?

Thanks again!

S.

[tomyeah]

i thought my guide is very simple. i just told the people what file to edit and how to do it. i even update the blog post from time to time when i change something on my pixelpost ... :)

so if there are any questions, just ask me here or on my blog ( if its a serious question )

regards, tom.

[filteredlife]

I've installed lightbox and have it working nicely on my browse page, but does anybody know how I would go about using lighbox on the image_template page as my main navigation?


Thanks in advance

filteredlife
http://filteredlife.lastpromise.com

[GeoS]

It wont be so easy. You need to create some addon or use i.e. AJAX to grab the data.

[tomyeah]

the other way around seems difficult too ...

id like to go from my browse page (with lightbox) back to the image_template by a little link inside the lightbox, so far i only have a link to the image itself.

regards,tom.

[paolo]

Hi Ragazzi..
I'm crazy fot this blog: m o o d a h o l i c (http://moodaholic.com/) someone knows how crate a effect like that in the "homepage" of a pixelpost blog? So.. how can I dissolve immage when i'm serfing "previous" and "next" image.. I tried using lightbox css but w/o results..

Paolo (Italia)

[Dennis]

Paolo, Lightbox is only for full size images. If you want a fade in script I suggest
http://clagnut.com/sandbox/imagefades.php/

HTH

[christian]

I'll attempt to explain, but the original author did a pretty good job of breaking it down...

To start, download the Lightbox Script (http://www.huddletogether.com/projects/lightbox2/#download), and unzip the contents to your computer.

Open your FTP program (or whatever you use to upload files to your pixelpost site). Upload the "css" and "js" directories for lightbox to the root directory of your site. This means, where ever you have all of your pixelpost folders...and where you see your pixelpost "index.php" file. Upload those two directories to this root location.

Take your existing index.php for pixelpost and open it in notepad to edit it's contents. The easiest way to do what needs to be done is to perform a search in that file for "$thumb_output". The line you want to change should be the SECOND result found by that search. It is the line that starts like this: $thumb_output .= Take special note of the . before the equal sign. That is the line you want to edit. The entire original code for this line is: $thumb_output .= "<a href=\"$showprefix$id\"><img src=\"$thumbnail\" alt=\"$title\" title=\"$title\" class=\"thumbnails\" /></a>"; Highlight that entire line and replace it with the following: $thumb_output .= "<a href='images/$name' rel='lightbox[views]' title='$title'><img src='$thumbnail' alt='$title' title='$title' class='thumbnails' /></a>";

Upload your edited index.php to the root directory of pixelpost on your server.

Now, open your browse_template.html file in notepad and add the following lines: <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script> Add these lines directly under the existing stylesheet lines in that file. Upload your edited browse_template.html to the same location where you found it...this will be located somewhere like /templates/simple (depending on which template you are using).

If you still need help, you are going to need to post a link to your site and provide some more information about your pixelpost environment...



I would like to know how to install lightbox with Pixelpost 1.6.. Because I do not find "$thumb_output" n the file Index.php.

[Dkozikowski]

I would like to know how to install lightbox with Pixelpost 1.6.. Because I do not find "$thumb_output" n the file Index.php.

You will find $thumb_output within the funcions_browse.php file located in your includes folder.

[christian]

HI,

Thank you, I have to install it and that functions very well.

http://www.fildimages.net

[firequall]

I'm having a little trouble with this script. Instead of wanting thumbnails to pop up as whole images, I want to include text links that will pop up the image. I've installed Lightbox according to their installation guide but whenever I post the link to the photo, the text shows up without a link.

Here's my site: http://www.bystander.ca

[ampix]

Hi!

I've been trying to install lightbox on my Pixelpost 1.6 and it doesn't work at all. I followed all the instructions listed in this tread and... nothing. Can somebody help?

[christian]

Hi!

I've been trying to install lightbox on my Pixelpost 1.6 and it doesn't work at all. I followed all the instructions listed in this tread and... nothing. Can somebody help?

Hi,

I use in the browsne template the tag <THUMBNAILS> and not <THUMBNAILS_WHOLE_PAGED> .

[ampix]

Hi Christian!

I corrected the TAG... and now, when I click on the thumbnail, the image opens in another windows. So I don't see the effect of Lightbox where the background become grayed out.

Any Idea? anybody?