I could not find a way to do a simple Lightbox effect on a single image.
Is there no way to input an image with redactor and give it a lightbox effect?
Adding a gallery with 1 image is most likely not ideal but hat would work.
You can add image classes but this use case wasn’t planned of course!
Gallery was also my first thought but my client has many products images and so I would have to create a lot of folders. This becomes a bit confusing.
1 Like
Do you mean click on any image by default so that it enlarges? You could do that with transform scale? And a line of js. But maybe I misunderstood.
2 Likes
Here's a quick block of jQuery that should do what you need @Oliver.
<script type="text/javascript">
jQuery(document).ready(function() {
var numItems = $('img.lightbox').length;
if (numItems > 0){
$("img.lightbox").each(function() {
img = $(this);
imgsrc = this.src;
wrapper = img.wrap("<span class='lightbox-wrapper'></span>");
link = img.wrap("<a href='"+imgsrc+"'></a>");
});
//has baguetteBox already been loaded on the page?
if (typeof(baguetteBox) != "undefined" && baguetteBox !== null) {
baguetteBox.run(".lightbox-wrapper", {
captions: true,
});
} else {
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.9.1/baguetteBox.min.js";
$("head").append(s);
var l = document.createElement("link");
l.rel = "stylesheet";
l.href = "https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.9.1/baguetteBox.min.css";
$("head").append(l);
//wait for baguettebox js & css to load
setTimeout(function(){
baguetteBox.run(".lightbox-wrapper", {
captions: true,
});
}, 200); //adjust timing to suit
}
}
});
</script>
You can target images by adding a class of lightbox to them;
<img class="lightbox" alt="" src="/content/media/1-4826295l-870x500.jpg">
Getting your client to add the class to the images may be a step too far (it would be for some of my clients) so you may want to change the code so that all of the lighbox images are stored in a specific directory in the media folder. You could then look for this directory in the image src and attach the required code from there.
I expect you could improve on the code above as I'm a little rusty with jQuery but it should be more or less self contained and will automatically load the baguette box assets if required.
2 Likes
Thanks @TimPlumb, will try that out today, looks promising and you are
right, I can’t tell my clients to work with the source and add some courious text fragments to it. 
Hi @Mary, no simply scaling is not enough here.
1 Like
It just occurred to me that you can use the Properties plug-in in Redactor to add the class to the image.
Although this should work the new version of Redactor in Pulse 5 wraps the <image> tag in a <figure> and applies the class to that rather than the image itself.
You’ll need to take this account if you wanted to use that script and adjust it accordingly.
2 Likes
I will test the properties plugin, it is also inexplicable to me why this is not already in the standard image settings.
So many tags like Title, Caption, Link, but no class.
2 Likes
Good work @Oliver, @TimPlumb + @Mary!
Agreed it would be nice to have a class input built-into the image edit.
We’ll be adding the latest Redactor 3 in Pulse 5.1. In this the new setting imageFigure allows to turn off wrapping images with figure tag.
e.g.
$R(’#content’, {
imageFigure: false
});
So you could certainly use this Oliver then or just be aware as Tim says above
This topic was automatically closed 5 days after the last reply. New replies are no longer allowed.
Thanks again everyone here for this request… it was added in 5.2B3 released today!