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!
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.
Hi, can anyone give me any information or pointers on this question? Thanks
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
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.