Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Best Way to implement a lightbox feature


Go to End
Reply


10 Posts   2672 Views

Avatar
TerryMiddleton

Community Member, 108 Posts

2 May 2009 at 4:18am

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

Avatar
rockarena

Community Member, 13 Posts

2 May 2009 at 8:49am

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.

Avatar
TerryMiddleton

Community Member, 108 Posts

3 May 2009 at 3:33pm

Rockarena,

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

Thanks,

Terry

Avatar
arthurdent

Community Member, 180 Posts

29 June 2013 at 4:28pm

Edited: 29/06/2013 4:29pm

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...

Avatar
Nobrainer Web

Community Member, 137 Posts

29 June 2013 at 5:59pm

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.

Avatar
arthurdent

Community Member, 180 Posts

29 June 2013 at 8:25pm

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

Avatar
copernican

Community Member, 189 Posts

3 July 2013 at 12:38am

Edited: 03/07/2013 12:38am

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
}

Avatar
arthurdent

Community Member, 180 Posts

6 July 2013 at 4:05pm

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?

Go to Top