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.

Blog Module /

Discuss the Blog Module.

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

Lightbox Image Popup?


Go to End
Reply


4 Posts   3052 Views

Avatar
Pix

Community Member, 153 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, 153 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, 153 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.