My issue is a lot like this solved thread, except I'm using Slimbox 2:

Hide Image Title Tool Tip Popup on Mouse Rollover or Hover

When you hover over an image, the "Title" attribute pops up. I need HTML in my image title in Slimbox. So, of course, when you're hovering, the "Title" attribute shows all the HTML code. The code works perfectly when you're viewing the image in Slimbox so no problems there. I just need the Title attribute to be hidden/modified not to show this HTML code.

I tried to change Q.title in slimbox.js to something else (like captionname). Then changed the HTML to call for:

<a href="images/team/large.jpg" title="Joe Smith" captionname="URL" rel="lightbox-team"><img src="images/team/small.jpg" class ="headline" border="1" hspace="2" /></a>

"Joe Smith" displays as the Title but when you view the image in Slimbox, captionname does not e up at all and neither does the Title. It's just blank where it should be.

What do I need to modify in slimbox2.js to make this work?

My issue is a lot like this solved thread, except I'm using Slimbox 2:

Hide Image Title Tool Tip Popup on Mouse Rollover or Hover

When you hover over an image, the "Title" attribute pops up. I need HTML in my image title in Slimbox. So, of course, when you're hovering, the "Title" attribute shows all the HTML code. The code works perfectly when you're viewing the image in Slimbox so no problems there. I just need the Title attribute to be hidden/modified not to show this HTML code.

I tried to change Q.title in slimbox.js to something else (like captionname). Then changed the HTML to call for:

<a href="images/team/large.jpg" title="Joe Smith" captionname="URL" rel="lightbox-team"><img src="images/team/small.jpg" class ="headline" border="1" hspace="2" /></a>

"Joe Smith" displays as the Title but when you view the image in Slimbox, captionname does not e up at all and neither does the Title. It's just blank where it should be.

What do I need to modify in slimbox2.js to make this work?

• javascript
• slimbox

4 Answers 4

you should indeed use the linkMapper option of slimbox (a function that you can pass as an optional parameter) to override the default behaviour of slimbox, which uses the title attribute of your hyperlink for the caption of the box

this way you can use any standard attribute, say 'alt', or even better a custom one like 'slimboxcaption' to make sure no browser will display its content; to define the matching attribute use the getAttribute of the 'el' node passed to the function

replace the default "jQuery(function($)" call in your slimbox .js file with this

jQuery(function($) {
$("a[rel^='lightbox']").slimbox({ /* Put custom options here */ }, function(el) {
        return [el.href, el.getAttribute("slimboxcaption")];
}, function(el) {
  return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
 });
});

then you can use this to pass any html content to the box while hiding it for the user hovering over the link

<a href="/myimage.jpg" title="This is my image" slimboxcaption='<h2>Here you can enter html code for your box caption</h2>...' rel="lightbox"><img src="/myimage_small.jpg"/></a>

I would leave the title property alone for accessibility purposes, and modify slimbox.js to read the title attribute immediately on page load, store it in a custom property (called "caption" or something), and them programmatically remove the title attribute to prevent the tooltip. Of course this implies that the rest of the code that references the title property needs to be changed to use the custom property.

You can use the linkMapper parameter to customize the caption shown.

If you are using the pressed slimbox2.js you will have the autoload code in there so you can change it to do just what Josh Stodola explained:

// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
jQuery(function($) {
    $("a[rel^='lightbox']").each(function(){
        //Set caption and remove title attributes
        this.caption = this.title;
    }).slimbox({/* Put custom options here */}, function(el){
            //Custom linkMapper to grab the description from the caption attribute
            return return [el.href, el.caption];
        }), function(el) {
            return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
    });
});

I changed the Q-function in the minified version of Slimbox2 from this:

function (Q) { return [Q.href, Q.title] };

to this:

 function (Q) { return [Q.href, $(Q).attr("data-captionname") || Q.title] };

This way, the normal title in the link element is preseved and in case the is an attribute called "data-captionname" in the link that is being shown in the modal window (or lightbox if you so will).