Add A Lightbox Feature To All Photo's In Photo Section. Full Tutorial Inside!

[Anthony]

There was a discussion about adding a light box feature to photos on a Ning site and I replied saying that I thought it was possible. I began looking into it and it decided it was going to be complicated, so I started this discussion as a project for all of us to work on. Nobody jumped in to help yet, so I set out to do it within the next couple of days. I succeeded in making this work much sooner than that.

The Engine In Overdrive:

I had a general idea of how this could work. What I needed first, was a lightbox plugin that would work with my idea. I found Fancybox.

Now that I found Fancybox, I needed to find something in the HTML on the photo page that I could add an ID to, so my trigger would work when you clicked on the "View Full Size" link under the photo. After a few minutes, I found something I could use.

Now I to put together the jQuery script that would add the ID to the class for my trigger.

**GREAT NEWS!** I now have a live working lightbox plugin for the photo section of my Ning Powered Website. View the live demo. Click on the "View Full Size" link under the photo.

I have tested this in IE, FF, Chrome, Safari and Opera. Everything thing worked just fine. All browsers were the most recent versions. I did not test older version of browsers.



**Now the Tutorial**

The only complicated part of it all, is downloading all of the images to your Ning Powered Website that need to go in the CSS file. The rest is super easy!


So lets get started!

First you need to download the Fancybox Plugin. You will see the download button on the top right hand side of that page.

Second Step:

You need to unzip the Fancybox plugin.

Third Step:

After you unzip the Fancybox Plugin, you will see several folders. Open the one that says Fancybox. You need to look for this file jquery.fancybox-1.3.4.css

Open that file in in a text editor. We need to create absolute paths to all of the images in that file. An absolute path, is the full URL to an image on your website. Right now, the CSS file has relative paths.

The first relative path you are going to change is the one that looks like this:

background-image: url('fancybox.png');

You will need to upload that image to your Ning network through a text box. (All of the images are in the same place that you found the CSS file.) You can do this by editing any text box and clicking on the image upload icon. After choosing the photo to upload, highlight the URL to the image and copy it. **DO NOT** click save. You will be going back to upload many more images.

Go back to the CSS file and paste the absolute URL so that it now looks something like this:

background-image: url('http://ningnetwork.ning.com/fancybox.png');

You will have to to this several times through out CSS file. You will also have to do it more than once for the same image. The image fancybox.png shows up several times because it is a sprite image.

No stress, just take your time and you will be finished in no time. After you are finished, save the CSS file. **DO NOT** change the name of the file. Save it as the same name.

Fourth Step:

Copy the code below and paste it into your Custom Code box at the very top of any other code that is in there.

<link rel="stylesheet" href="/jquery.fancybox1.3.4.css" type="text/css" media="screen" />

Now go back and edit a text box and upload the CSS file that you modified. You do this by clicking on the "paper clip". Copy that URL and paste it in place of /jquery.fancybox1.3.4.css.

It should now look like this in you Custom Code box:

<link rel="stylesheet" href="http://yourning.ning.com/jquery.fancybox1.3.4.css" type="text/css" media="screen" />

Fifth Step:

Copy the code below and paste it below the code you pasted from above.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

It should now look like this in your Custom Code box:

<link rel="stylesheet" href="/jquery.fancybox1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

Sixth Step:

Copy the code below and paste it below the code you pasted from above.

<script type="text/javascript" src="/jquery.fancybox1.3.4.pack.js"></script>

Now go back and edit a text box and upload the jquery.fancybox1.3.4.pack.js. You do this by clicking on the "paper clip". Copy that URL and paste it in place of /jquery.fancybox1.3.4.pack.js.

It should now look like this in your Custom Code box:

<link rel="stylesheet" href="/jquery.fancybox1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.fancybox1.3.4.pack.js"></script>

Seventh Step:

Copy the code below and paste it below the code you pasted from above.

<script>
$(document).ready(function() {

/* This is basic - uses default settings */

$("a#single_image").fancybox();

/* Using custom settings */

$("a#inline").fancybox({
'hideOnContentClick': true
});

/* Apply fancybox to multiple items */

$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});

});
</script>

It should now look like this in your Custom Code box:

<link rel="stylesheet" href="/jquery.fancybox1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.fancybox1.3.4.pack.js"></script>

<script>
$(document).ready(function() {

/* This is basic - uses default settings */

$("a#single_image").fancybox();

/* Using custom settings */

$("a#inline").fancybox({
'hideOnContentClick': true
});

/* Apply fancybox to multiple items */

$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});

});
</script>

Eighth Step:

Copy the code below and paste it below the code you pasted from above.

<script>
$('.xg_sprite-view-fullsize').attr('id', 'single_image');
</script>

It should now look like this in your Custom Code box:

<link rel="stylesheet" href="/jquery.fancybox1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.fancybox1.3.4.pack.js"></script>

<script>
$(document).ready(function() {

/* This is basic - uses default settings */

$("a#single_image").fancybox();

/* Using custom settings */

$("a#inline").fancybox({
'hideOnContentClick': true
});

/* Apply fancybox to multiple items */

$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});

});
</script>

<script>
$('.xg_sprite-view-fullsize').attr('id', 'single_image');
</script>

Final Step:

All the necessary code is now in your Custom Code box. Click save! Now navigate to a photo in your photo section and click on the "View Full Size" link under the photo.

You should now have lightbox for your photos!

Last Words:

All Java Script is loading at the end of the page load. Your entire page has to load before any Custom Code box code is loaded. If the site is still loading or has hung up for some reason, the lightbox will not be working. Ning is very fast, so unless you have a lot of script in your Custom Code box, this will work just fine.

If this does not go off without a hitch, please don't get upset. I may have left something out. Reply below if you need help.

Don't forget to share with us all how you used this tip and any modifications you may have made to make it work on your Ning powered website.

**Please remember that this jQuery Plugin is copyright by a Third Party. Sharing this code with others and not giving credit back to the creator of Fancybox and myself for coding it to work with a Ning powered website, is a no no and will hurt my feelings. Enjoy!

[Tatay Ash]

Thank you very much for the tip, Anthony. Very kind of you.

I followed every step, but the lightbox is just not displaying. The photo displays in the old-fashioned way. Below are the scripts as inserted into my Custom Code.

<!-- begin lightbox -->
<link rel="stylesheet" href="http://api.ning.com:80/files/uwsGnSfcmd26XJnPTeKWfQW6iIh07PdaPq7LoKcgJTo-FBBv8bYR50BROrWqvYtLkUHpQRZRLflITaot0dTlcI1IJsjAQaUy/jquery.fancybox1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://api.ning.com:80/files/FIZvHI40H20vlE9yTIzf-a1iVrV0hDGF3AfiCk5GjCB5sACIK2DDYEMKP5ZlI1GXTr79QM0zvaR8kg3dzKV7wEKq910RhK4D/jquery.fancybox1.3.4.pack.js"></script>
<script>
$(document).ready(function() {

/* This is basic - uses default settings */

$("a#single_image").fancybox();

/* Using custom settings */

$("a#inline").fancybox({
'hideOnContentClick': true
});

/* Apply fancybox to multiple items */

$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});

});
</script>

<script>
$('.xg_sprite-view-fullsize').attr('id', 'single_image');
</script>
<!-- end lightbox -->

Could you help me figure out why is this not working for me? My Chrome version is latest.

[Tatay Ash]

Oh, found a way for it to work. Guess how I did it... I placed the entire lightbox code, from beginning to end, to the very bottom of the Custom Code, and it is now displaying well.

Again, thanks a lot for the tip, Anthony. You rock!

[Anthony]

Thank you and anytime!

[Riccardo Rossini]

GREAT!!! You are the best Anthony! Just one thing, but it's not important, you loose zoom in. When I have one minute I'll try it

[SweetPotato]

From just checking it out on your site it looks fantastic.  Not got many photos on my network but I can see this being a massive plus for those that do.

Awesome job.

[Riccardo Rossini]

I solved the problem with this tip

http://creators.ning.com/forum/topics/browser-tip-better-full-size-...

But it works only with Chrome and Firefox and I think that is alway better if a function is into the site itself as in Anthony method.

Sorry Anthony? What do you mean when you say : The only complicated part of it all, is downloading all of the images to your Ning Powered Website that need to go in the CSS file. It's not automatic? Do I have to charge all pictures of my site?

[Anthony]

Hello Riccardo,

First I will address the zoom part. I am not 100% sure of what you are saying about that. I uploaded a screen shot of my website to my photo section. Here is the link. When you click on the "View Full Size" link under the photo, it is pretty close to full size.

About the pictures in the Style Sheet:

The window around your photo after you click the "View Full Size" link under the photo uses graphics and CSS for visual effects. Many of the graphics are for more advanced features of the plugin that will not be used. However, if we do not upload them, the Style Sheet will still call to an image that does not exist.

There are also bug fixes in the Style Sheet that targets older versions of the IE browser. The images in the may be needed in place of CSS that does not work in that browser.

Instead of modifying the Style Sheet to remove the functionality we do not need, I chose to upload all the images. This way, there are no errors during the whole process. Everything appears to be speedy on my site where I am using all the images in the Style Sheet.

I may revisit the Style Sheet in the future and make some changes. When I do, I will share the new Style Sheet in this discussion. For now, my focus next is a new Tutorial for a Pop Up Footer that I found here and answering any questions that come up in this discussion. For the Pop Up Footer, you can already see it live on my site by clicking the arrow on the bottom right hand corner.

Hope I answered your question correctly. If not, let me know. I will do my very best to help you through everything. 

[Anthony]

@Riccardo

I have upadted this Tutorial with a photo above. It may point you in the right direction. I will share it in this reply, below.

 

[Anthony]

Thank you

[Anthony]

The above reply was directed at SweetPotato but got lost in the other replies.

[Riccardo Rossini]

Yes, the best tip i've seen till now

[Anthony]

Thank you. I am very happy to hear that.