http://sorgalla.com/lity/ instead of lightbox2. Because lightweight + responsive.

You have to download and upload lity and the newest version of Jquery.

lity.min.js **to** sites/default/assets/js/
new jquery.min.js **to** sites/default/assets/js/
lity.min.css **to** sites/default/assets/css/

Please don't forget to make backups of these files:

sys/Ext/Html.php
sites/default/assets/js/editor.js
sites/default/themes/default/templates/forum/topic.tpl
sites/default/themes/default/templates/user/profile/view.tpl
sites/default/themes/default/templates/layout.tpl

Open:

sys/Ext/Html.php

Change

68 'a' => array('href', 'target'),

To

68 'a' => array('href', 'target', 'data-lity'),

Save

Open:

sites/default/assets/js/editor.js

Change:

196 <img src="' + href + '" title="' + title + '" />
201 <img src="' + href + '" title="' + title + '" />
247 <a href="' + href + '"><img src="http://i.imgur.com/' + part[1] + '.jpg" title="' + title + '" /></a>
254 <img src="' + href + '" title="' + title + '" />

To:

196 <a href="' + href + '" data-lity="' + href + '" title="' + title + '"><img src="' + href + '" /></a>
201 <a href="' + href + '" data-lity="' + href + '" title="' + title + '"><img src="' + href + '" /></a>
247 <a href="' + href + '" data-lity="' + href + '" title="' + title + '"><img src="http://i.imgur.com/' + part[1] + '.jpg" /></a>
254 <a href="' + href + '" data-lity="' + href + '" title="' + title + '"><img src="' + href + '" /></a>

Save

Open:

sites/default/themes/default/templates/forum/topic.tpl

Find:

263 <link rel="stylesheet" type="text/css" href="{$smarty.const.DURI}assets/markitup/highlight/styles/github.css" />

Add before:

<script src="{$smarty.const.DURI}assets/js/lity.min.js"></script>
<link rel="stylesheet" type="text/css" href="{$smarty.const.DURI}assets/css/lity.min.css" />

Save

Open:

sites/default/themes/default/templates/user/profile/view.tpl

Find:

221 </script>

Add after:

<script src="{$smarty.const.DURI}assets/js/lity.min.js"></script>
<link rel="stylesheet" type="text/css" href="{$smarty.const.DURI}assets/css/lity.min.css" />

Save

Open

sites/default/themes/default/templates/layout.tpl

Find:

151  {$page.head.js}

Add after:

<script type="text/javascript" src="{$smarty.const.DURI}assets/js/jquery-1.11.3.min"></script>

Save

They are the core files , they dont contain anything which the user will see.

What are you trying to do ?

Hi adesh1414127033.

I want to use Lightbox2. A jquery thumbnail viewer. You click on the resized image and it gets bigger in a modal popup.
https://github.com/lokesh/lightbox2/

But for this I need to change the stucture of the image html code for BBcode and markdown.
This is the html for the image BBCode.

<img src="\1" alt="\1" />

To use Lightbox2 I have to change it to.

<a href="\1" data-lightbox="\1"><img src="\1" alt="\1" /></a>

And the same I must do with markdown.

You will find the img output code in

sites/default/assets/js.editor.js

around line 195

Thanks @adesh1414127033,
I will test tomorrow.

I'm interested to know how it goes please, as I want to implement this or something similar

@adesh1414127033

Inside the editor (live preview) it works perfect and the html code is correct:

<a href="imagelink" data-lightbox="imagelink" title="imagelink"><img src="imagelink"></a>

But inside the topic, the code is different:

<a href="imagelink" title="image hoster" rel="nofollow"><img src="imagelink"></a>

So Codoforum transforms my custom image link to an standard url link.

Yes, codoforum strips out all html attributes that are not in whitelist.

Open sys/Ext/Html.php, you will find $whitelist array, you need to add the attribute 'data-lightbox'

        'img' => array('src',
            'alt', 'title',
        ),

For now, only src, alt and title are whitelisted.

Yes yes yes. It works.

@RolluS I changed my mind and use now http://sorgalla.com/lity/ instead of lightbox2. Because lightweight + responsive.

You have to download and upload lity and the newest version of Jquery.

lity.min.js **to** sites/default/assets/js/
new jquery.min.js **to** sites/default/assets/js/
lity.min.css **to** sites/default/assets/css/

Please don't forget to make backups of these files:

sys/Ext/Html.php
sites/default/assets/js/editor.js
sites/default/themes/default/templates/forum/topic.tpl
sites/default/themes/default/templates/user/profile/view.tpl
sites/default/themes/default/templates/layout.tpl

Open:

sys/Ext/Html.php

Change

68 'a' => array('href', 'target'),

To

68 'a' => array('href', 'target', 'data-lity'),

Save

Open:

sites/default/assets/js/editor.js

Change:

196 <img src="' + href + '" title="' + title + '" />
201 <img src="' + href + '" title="' + title + '" />
247 <a href="' + href + '"><img src="http://i.imgur.com/' + part[1] + '.jpg" title="' + title + '" /></a>
254 <img src="' + href + '" title="' + title + '" />

To:

196 <a href="' + href + '" data-lity="' + href + '" title="' + title + '"><img src="' + href + '" /></a>
201 <a href="' + href + '" data-lity="' + href + '" title="' + title + '"><img src="' + href + '" /></a>
247 <a href="' + href + '" data-lity="' + href + '" title="' + title + '"><img src="http://i.imgur.com/' + part[1] + '.jpg" /></a>
254 <a href="' + href + '" data-lity="' + href + '" title="' + title + '"><img src="' + href + '" /></a>

Save

Open:

sites/default/themes/default/templates/forum/topic.tpl

Find:

263 <link rel="stylesheet" type="text/css" href="{$smarty.const.DURI}assets/markitup/highlight/styles/github.css" />

Add before:

<script src="{$smarty.const.DURI}assets/js/lity.min.js"></script>
<link rel="stylesheet" type="text/css" href="{$smarty.const.DURI}assets/css/lity.min.css" />

Save

Open:

sites/default/themes/default/templates/user/profile/view.tpl

Find:

221 </script>

Add after:

<script src="{$smarty.const.DURI}assets/js/lity.min.js"></script>
<link rel="stylesheet" type="text/css" href="{$smarty.const.DURI}assets/css/lity.min.css" />

Save

Open

sites/default/themes/default/templates/layout.tpl

Find:

151  {$page.head.js}

Add after:

<script type="text/javascript" src="{$smarty.const.DURI}assets/js/jquery-1.11.3.min"></script>

Save

So @adesh1414127033 is it possible to use codoforums jquery.min for this instead of add another jquery source inside the layout.tpl and have this global active?

Yes, it is possible.

Instead of adding script/link tags in the tpl files.

Add your scripts in the theme.php file present in the
sites/default/themes/blue directory

Not sites/default/themes/default/

You will find a method ->addJS() there

The first parameter is url to js file but, you by default
{$smarty.const.DURI}assets/js/ is already prepended, so you don't have to write the full path.

Thanks for all the help @adesh1414127033

Yes yes yes. It works.

@RolluS I changed my mind and use now http://sorgalla.com/lity/ instead of lightbox2. Because lightweight + responsive.

You have to download and upload lity and the newest version of Jquery.

Awsome thank you, that's working

I'm going to modify this to work with forum hosted pics.

Also, generating thumbnails with Imagemagick would be awsome!

I may try HiSlide.JS which, if I understood documentation correctly, can handle resizing.