I know there have been some issues about this topic, but I couldn't find any real solution to it yet. What I what to do is to extend the standard image-button to always wrap the image in a "a class"-tag with rel=lightbox so that pictures are displayed within lightbox.

However.. can this be done in a prettier manner then hacking the bbcode module?

Comments

Attila’s picture

I'm looking for the same solution..

Is there a possibility to change the Image button so that it outputs

<a title="IMAGE-TITLE" href="LINK-URL" rel="lightbox"><img src="LINK-URL" width="XY" height="XY" alt="IMAGE-TITLE" /></a>

instead of

<img src="LINK-URL" width="XY" height="XY" alt="IMAGE-TITLE" />

?

Any help would be appreciated :)

-- Attila

NeoID’s picture

As far as I know (and have done) not without hacking the bbcode module... :/

ufku’s picture

Try this:

js:
var form = [
 {name: 'target_src', title: 'Target image URL', required: true, suffix: E.imce.button('attr_target_src')},
 {name: 'src', title: 'Image URL', required: true, suffix: E.imce.button('attr_src')},
 {name: 'width', title: 'Width x Height', suffix: ' x ', getnext: true, attributes: {size: 3}},
 {name: 'height', attributes: {size: 3}},
 {name: 'alt', title: 'Alternative text', required: true}
];
E.tagDialog('custom', form, {title: 'Lightbox image', submit: function(tag, form) {
  var val = function(n){return form.elements['attr_'+n].value};
  E.replaceSelection('<a href="'+ val('target_src') +'" title="'+ val('alt') +'" rel="lightbox"><img src="'+ val('src') +'" width="'+ val('width') +'" height="'+ val('height') +'" alt="'+ val('alt') +'" /></a>');
}});
Attila’s picture

Thanks for your reply!

Unfortunately that's not really working. If I try to insert an image using your code I get the following alert:
TypeError: E.imceis undefined

Then I tried to insert the following php-code above the script:

php:
$imce_url = function_exists('imce_access') && imce_access() ? url('imce') : '';

and replacing
js:
by
return "js:

Unfortunately that didn't work too:
Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in C:\wamp\www\includes\common.inc(1685) : eval()'d code on line 14

So then I changed the code into

php:
$imce_url = function_exists('imce_access') && imce_access() ? url('imce') : '';

return "js:
var form = [
{name: 'target_src', title: 'Target image URL', required: true, suffix: E.imce.button('attr_target_src')},
{name: 'src', title: 'Image URL', required: true, suffix: E.imce.button('attr_src')},
{name: 'width', title: 'Width x Height', suffix: ' x ', getnext: true, attributes: {size: 3}},
{name: 'height', attributes: {size: 3}},
{name: 'alt', title: 'Alternative text', required: true}
];
E.tagDialog('custom', form, {title: 'Lightbox image', submit: function(tag, form) {
  var val = function(n){return form.elements['attr_'+n].value};
  E.replaceSelection('<a href=\"'+ val('target_src') +'\" title=\"'+ val('alt') +'\" rel=\"lightbox\"><img src=\"'+ val('src') +'\" width=\"'+ val('width') +'\" height=\"'+ val('height') +'\" alt=\"'+ val('alt') +'\" /></a>');
}});
";

and got the "TypeError: E.imceis undefined"-error again.

I'm not a PHP-programmer, I was just trying and searching on Google for solutions but I couldn't figure it out. Please help :)

ufku’s picture

Status: Active » Fixed

The issue is against 6.x-2.x. Use the dev or rc1.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.