1770 Posts in 495 Topics by 531 members
Blog Module
SilverStripe Forums » Blog Module » Lightbox Image Popup?
Discuss the Blog Module.
Moderators: martimiz, Howard, Sean, Ryan M., biapar, Willr, Ingo, swaiba, simon_w
|
Page:
1
|
Go to End | |
| Author | Topic: | 1754 Views |
-
Lightbox Image Popup?
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!
-
Re: Lightbox Image Popup?
4 June 2011 at 9:47am
Hi, can anyone give me any information or pointers on this question? Thanks
-
Re: Lightbox Image Popup?
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 example1. 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> tag5.
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.comCheers
Christian -
Re: Lightbox Image Popup?
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.
| 1754 Views | ||
|
Page:
1
|
Go to Top |
