Hi,

I'm using Floatbox in several applications, amongst others in some MODX Revolution Sites. Today a conflict was revealed:

In a customer's site I use Floatbox in news articles (for the images). I don't want to use the alt or the title attributes for the captions, so I define them explicitly in the data-fb-options attribute:

<a href="path/to/image.jpg" class="floatbox" data-fb-options="caption:`This is my caption"><img src="path/to/thumbnail.jpg" alt="Some description" /></a>

The caption has to be surrounded by backticks (`).

Now I use the content of this news article page for a teaser on the home page. The problem is that MODX also uses backticks for the parameters of its "snippets", which are basically PHP scripts managed by the CMS. The "chunk" (or template) for such a teaser e. g. contains the following MODX tag(s):

[[!ShortenText? &text=`[[!EliminateTags? &text=`[[+content]]`]]` &length=`[[+numChars:default=`150`]]` &postfix=`ellipsis`]]

So the content of the news article ([[+content]]) is surrounded by backticks and contains backticks itself.

This nevertheless worked in several news articles, but for some reason not in the one I had to create today - the teaser text was empty -, and I'm not overly astonished.

I could solve this by hacking the floatbox.js script; I changed

g=/`([^`]*)`)/g,h;

to

g=/`([^`]*)`|#([^#]*#)/g,h;

and used the # character instead of the backtick in the definition of the caption.

Well, this is okay for the time being, but I'd prefer an official solution, especially with regard to future updates - if I forget to apply the hack, some captions will be quite strange (# plus the first word of the defined caption).

Could you imagine making the character that has to surround the caption (or other parameters) configurable? Ideally the backticks should also be accepted (as in my hack) so that existing and working definitions wouldn't have to be changed.

Thank you very much in advance for considering this,
Jan

I don't think the hack as quoted will work. The code identifies the option's value as being the contents of the first bracketed match, and with your regexp the #caption# content will be found in the second bracketed match while the first will be the empty string.

I've modified the next version so it will accept a tilde (~) or a backquote (`) as the quoting character. I don't think there's a need to have a configuration option to select the character - just use whichever you want. I don't want to use a hash (#) character as this already has meaning in the options when referencing a div's #id.

admin wrote

I don't think the hack as quoted will work. The code identifies the option's value as being the contents of the first bracketed match, and with your regexp the #caption# content will be found in the second bracketed match while the first will be the empty string.

Well, maybe, but in fact it does work. I wouldn't apply such a hack to a customer's site without having tested it... If you're interested, I can give you the URL of the page.

admin wrote

I've modified the next version so it will accept a tilde (~) or a backquote (`) as the quoting character. I don't think there's a need to have a configuration option to select the character - just use whichever you want. I don't want to use a hash (#) character as this already has meaning in the options when referencing a div's #id.

That's fine, thank you very much!

Cheers,
Jan

Okay, to clarify this: admin was of course right.

Before changing the script, I updated it from version 5.4.0 to the current one. Since some things have been renamed in the meantime, I didn't copy the configuration file; I used the configurator for setting the options. I must have missed the checkbox "altAsCaption", which was checked... Therefore it wasn't my super-brilliant hack that worked - I was just shown the alt description instead of the caption defined in the data-fb-options attribute.

Thanks to admin for pointing this out to me!

Cheers,
Jan