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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Blog Module /

Discuss the Blog Module.

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

Lightbox Image Popup?


Go to End


4 Posts   3899 Views

Avatar
Pix

Community Member, 158 Posts

1 June 2011 at 8:20am

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!

Avatar
Pix

Community Member, 158 Posts

4 June 2011 at 9:47am

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

Avatar
Invader_Zim

Community Member, 141 Posts

4 June 2011 at 10:56pm

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)

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

public function init() {
    parent::init();
    
    //loads jQuery
    Requirements::javascript('http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js');

    //loads fancybox script and css
    Requirements::javascript('mysite/javascript/jquery/plugins/fancybox/jquery.fancybox-1.3.4.pack.js');
    Requirements::css('mysite/javascript/jquery/plugins/fancybox/jquery.fancybox-1.3.4.css');

    //loads your custom js file
    Requirements::javascript('mysite/javascript/custom.js');
    
}

3.
Create a custom javascript file to setup your fancybox
(/mysite/javascript/custom.js):

(function($) {
    
    $(document).ready(function() {

            // fancybox setup
             $('.lightbox').fancybox({
                 transitionIn   :   'elastic',
                 transitionOut  :   'elastic',
                 overlayShow    :   false
             });

    });

})(jQuery);

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

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

Cheers
Christian

Avatar
Pix

Community Member, 158 Posts

6 June 2011 at 5:13pm

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.