Jump to:

1856 Posts in 1610 Topics by 562 members

Blog Module

SilverStripe Forums » Blog Module » Lightbox Image Popup?

Discuss the Blog Module.

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

Page: 1
Go to End
Author Topic: 2773 Views
  • Pix
    Community Member
    145 Posts

    Lightbox Image Popup? Link to this post

    Is there a way to embed an image in a blog post with a lightbox popup, or even a small gallery of images? A single image would be just fine, thanks for any help or direction!

  • Pix
    Community Member
    145 Posts

    Re: Lightbox Image Popup? Link to this post

    Hi, can anyone give me any information or pointers on this question? Thanks

  • Invader_Zim
    Community Member
    141 Posts

    Re: Lightbox Image Popup? Link to this post

    I think there are a lot of different ways to accomplish this.
    I like to use jquery and fancybox for this example

    1. Download Fancybox, unpack it and place it in your SS-installation
    (e.g. /mysite/javascript/jquery/plugins/fancybox)

    Edit the init() method of your BlogEntry_Controller in BlogEntry.php:

    public function init() {

    //loads jQuery

    //loads fancybox script and css

    //loads your custom js file


    Create a custom javascript file to setup your fancybox

    (function($) {

    $(document).ready(function() {

    // fancybox setup
    transitionIn : 'elastic',
    transitionOut : 'elastic',
    overlayShow : false



    Create a new blog entry in your backend, insert a thumbnail image from your assets and link it to the bigger version of it.
    Open up the html-source-editor and assign the class lightbox to the thumbnail's <a> tag

    Save, publish and (hopefully) enjoy your lightbox

    Note: It's not the best solution to edit BlogEntry.php directly (like i did in this example).
    It would be better to extend the class with a "decorator" to keep an easy way for updates.
    See here on SSBits.com


  • Pix
    Community Member
    145 Posts

    Re: Lightbox Image Popup? Link to this post

    Wow Christian. Thanks for this incredibly in depth reply, that's awesome and even more than I was hoping for. I REALLY appreciate the help.

Page: 1
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.