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, simon_w

Lightbox Image Popup?


Reply


4 Posts   2903 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. [url=http://fancybox.net/home]Download Fancybox[/url], 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.
[url=http://www.ssbits.com/tutorials/2011/adding-an-image-to-a-blog-post-using-decorators-and-the-silverstripe-blog-module/]See here on SSBits.com[/url]

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.