Hide Image Title in Slimbox

Question

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

http://stackoverflow.com/questions/940994/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 come 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?

Answer 1

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.

Answer 2

Is there anyone that can help out? We're completely stalled on this issue.

Answer 3

Corporate is making us do a local build before relaunching the company website so I don't have a link to share.

I did find this site with the same problem, which is also using Slimbox. The first image has HTML in the Title. When you hover over the image, you see all of the code from Slimbox's Title attribute. It's the exact same problem we're experiencing:

http://thesimschannel.com/index.php?option=com_content&view=article&id=30:dog-leads-police-on-high-speed-chase&catid=14:local-news&Itemid=3

Thanks in advance for any help.

Answer 4

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

If you are using the compressed 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));
    });
});

Answer 5

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>

Answer 6

Awesome thanks dc2009!

Answer 7

dc2009,

I have just edited the minified "slimbox.js" (5KB ) that comes with SlimBox 2 and changed the default "jQuery(function($)" (line 8) as you said, and now I'm able to use the "slimboxcaption" attribute instead of "title".

Many, many thanks!!!

Jose M Balaguer

Answer 8

Thanks for the solution dc2009. The only issue I find arises is that the HTML no longer validates correctly and I recieve the error:

Attribute "slimboxcaption" is not a valid attribute

Do you know if there is a way around this? Thanks

Mark