Jump to:

1844 Posts in 1600 Topics by 559 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: 2673 Views
  • Pix
    Avatar
    Community Member
    130 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
    Avatar
    Community Member
    130 Posts

    Re: Lightbox Image Popup? Link to this post

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

  • Invader_Zim
    Avatar
    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)

    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

  • Pix
    Avatar
    Community Member
    130 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.

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