Is there a best way to implement allowing a user to select a thumbnail on a webpage and it open up in a lightbox type of window?

I need to have a way to show the picture with some head and footer content for the picture.

Has anyone done this before?

Terry

The way I see it, and I'm new to this cms so forgive me if I'm wrong, is that you should put the javascript code for the lightbox in mysite/javascript and then implement it in your template for your image gallery. I could be wrong off course but it seems to be the logical way of implementing this.

Rockarena,

You nailed perfectly. That's exactly what I did and it worked 100%.

Thanks,

Terry

Anybody tried this in SilverStripe 3? I'm updating a site that has separate images in the sidebar of my pages. In the old static HTML version I was able to click on a single image and open a full-screen lightbox and scroll through the other images. My SS version of the site chokes here -- as the links are hard-coded HTML everything is there -- apart from the lightbox! When I view pages source lightbox.js isn't even loaded.

I've tried

<% require javascript(mysite/javascript/lightbox.js) %>

on Page.ss and

<% require javascript(cms/javascript/lightbox.js) %>

to no avail...

If anybody has this kind of thing working feedback would be appreciated...

Hi arthurdent,

I think the most important part to understand is that Silverstripe in any version, will let you write whatever HTML you want in your template files.
So you could just add a static link to your javascript files in the head of your template file.
That is way i generally do it.

But there is some other methods of adding css and javascript: http://doc.silverstripe.org/framework/en/reference/requirements
In general, add you files to: themes/my_theme/css or javascript folder, now just link the file from your template, either with
<% require javascript(themes/my_theme/javascript/lightbox.js) %> (keep all needed files for a theme/design in your theme folder - makes moving easier and potentially upgrading and so on)

Always remember to add ?flush=1 to you URL when you have changed/added templates.

Hi Nobrainer Web, thanks for your feedback. I did actually put in a static link to the .js files that I have used on the live site. When I look at the source code I can see the link is working this time. However the lightbox still isn't working. Is it possible that there is a conflict with another .js file within SilverStripe that is stopping it? Is there a way of testing this?

Should add, while I can do HTML and CSS (and a bit of .JS) I'm a designer, not a programmer! So I do sometimes struggle with the very technical stuff!

Thanks again

arthurdent, do you have firebug for firefox? If not, install it and check the console to see if there are any javascript errors (Chrome also has a build in console that will report any js errors). If there are any errors let us know what they are.

Another thing to remember, lightbox.js probably requires jQuery. It is important that you also load jQuery and make sure that it is loaded before lightbox.js. I usually include my javascript files in my controllers init function like so

class Page_Controller extends ContentController {
public function init(){
Requirements::javascript(THIRDPARTY_DIR.'/jquery/jquery.min.js'); //include jquery bundled with ss
Requirements::javascript('themes/'. SSViewer::current_theme() .'/javascript/lightbox.js'); //link to js file in current theme folder
}

Thanks for the feedback and complete instructions IOTI, very helpful! Applied your code below to Page.php. Unfortunately I haven't cracked it yet -- was running Firebug already and can see jQuery and Javascript are locked and loaded, CSS is loaded, Lightbox feature unfortunately is not yet running. Wonder if I'm missing something else?