Jump to:

23480 Posts in 18951 Topics by 2878 members

General Questions

SilverStripe Forums » General Questions » Best Way to implement a lightbox feature

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

Page: 1 2
Go to End
Author Topic: 2456 Views
  • TerryMiddleton
    Avatar
    Community Member
    108 Posts

    Best Way to implement a lightbox feature Link to this post

    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

  • rockarena
    Avatar
    Community Member
    13 Posts

    Re: Best Way to implement a lightbox feature Link to this post

    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.

  • TerryMiddleton
    Avatar
    Community Member
    108 Posts

    Re: Best Way to implement a lightbox feature Link to this post

    Rockarena,

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

    Thanks,

    Terry

  • arthurdent
    Avatar
    Community Member
    163 Posts

    Re: Best Way to implement a lightbox feature Link to this post

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

  • Nobrainer Web
    Avatar
    Community Member
    134 Posts

    Re: Best Way to implement a lightbox feature Link to this post

    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.

  • arthurdent
    Avatar
    Community Member
    163 Posts

    Re: Best Way to implement a lightbox feature Link to this post

    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

  • IOTI
    Avatar
    Community Member
    189 Posts

    Re: Best Way to implement a lightbox feature Link to this post

    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
    }

  • arthurdent
    Avatar
    Community Member
    163 Posts

    Re: Best Way to implement a lightbox feature Link to this post

    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?

    2456 Views
Page: 1 2
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.