I posted this on the old TSMF site a while back. I got tired of the old scrollbars that would show up when posting large images, so I utilized Lightbox to make pseudo thumbnails that would size down the image in the post until clicked on at which time it shows full size in a lightbox. The problem is. Whatever size you choose for your thumbnail is the size all images will show up as. Even if they are smaller than the thumbnails size. So clicking on the thumbnail in that case actually shows you the real size of the image which is in fact smaller than what is displayed in the forum. This is very rare however. I couldn't figure out how to pull image size as a variable in order to fix that issue. Perhaps someone here will improve on what I have done here. I would update it to be more concise and exact to FB standards, but I don't even have a test site with FB up yet.
So someone give it a go and report back! Improve it! Integrate it!

OK, here's how it works. First check out the script page on dynamic drive to see the effect in action, and to read how to install it in a normal page, and download all the necessary files. http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

Now that you've read how to install it you see we've got three parts to the script.
1. a reference to the script and css files in the head section
2. copying the files to the path where the references point
3. formatting your image tags as links with the rel='thumbnail' bit, to trigger the script/css

So, for step 1, we need to place our references into the head section of the pages that get generated in joomla. Because the forum in it's entirety is simply content of a page, and had no head section of it's own, we have to modify the site template in order to do this. So browse to the templates directory, then the subdir of the template you are currently using for your site. If you use template switcher you will need to modify the head sections of all the templates that are selectable via the switcher.

Once you have found the head section, you will need to add this css reference somewhere inside it.

Code:

<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/thumbnailviewer/thumbnailviewer.css" rel="stylesheet" type="text/css" media="screen" />

And this script reference

Code:

<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/thumbnailviewer/thumbnailviewer.js"></script>

Attention: Regarding above: The site template modifications are probably not necessary in later versions of JB and FB. As there is a "head.html" file which may eliminate the need to modify the site template, making it a JB/FB template only solution(MUCH BETTER)!!!! I originally did this on a 1.13 version of JB which did not have this file! In this case, just add the head stuff to head.html

As you can see I have created a thumbnailviewer subdir in my template dir, and all files related to it, live there. Do that now.

Next you will need to copy all the files related to the thumbnail script to this directory.

Once this has been done, you need to modify your smile.class.php to format the img bbcodes properly for the script to get triggered. This means that it needs to be changed in the php from an html img tag, to an html a href tage with the "rel=thumbnail" in it.

browse to components/com_joomlaboard and open the file. Not too far down, around line 70 or so, you will find the section that formats image tags. find these lines:

Code:

$sb_message_txt = preg_replace("/\[img size=([0-9][0-9][0-9])\](.*?)\[\/img\]/si","<img src=\"$2\" border=\"0\" width=\"$1\" />",$sb_message_txt); $sb_message_txt = preg_replace("/\[img size=([0-9][0-9])\](.*?)\[\/img\]/si","<img src=\"$2\" border=\"0\" width=\"$1\" />",$sb_message_txt); $sb_message_txt = preg_replace("/\[img\](.*?)\[\/img\]/si","<img src=\"$1\" border=\"0\" />",$sb_message_txt);

And replace them with:

Code:

$sb_message_txt = preg_replace("/\[img size=([0-9][0-9][0-9][0-9])\](.*?)\[\/img\]/si","<img src=\"$2\" border=\"0\" width=\"$1\" />",$sb_message_txt); $sb_message_txt = preg_replace("/\[img size=([0-9][0-9][0-9])\](.*?)\[\/img\]/si","<p><a href=\"$2\" rel=\"thumbnail\"><img src=\"$2\" style=\"width: 150px;\" /></a></p>",$sb_message_txt); $sb_message_txt = preg_replace("/\[img size=([0-9][0-9])\](.*?)\[\/img\]/si","<p><a href=\"$2\" rel=\"thumbnail\"><img src=\"$2\" style=\"width: 150px;\" /></a></p>",$sb_message_txt); $sb_message_txt = preg_replace("/\[img\](.*?)\[\/img\]/si","<p><a href=\"$1\" rel=\"thumbnail\"><img src=\"$1\" style=\"width: 150px;\" /></a></p>",$sb_message_txt);

It's always a good idea to just remark out the previous lines and insert the new ones, that way you can go back if necessary. It also provides documentation to add it to later versions of JB.

That's it. Now your users can use the default image post and it will work so that when they click on the image, a full size preview of the image is displayed.

Also, since you have added it to the site template, when posting content, all you have to do is add the rel="thumbnail" to any image link to make it work in normal site content as well as just your board.

If you end up using this, say so here, so that I know people actually read my posts. LOL.

Regards,
Rich

Post edited by: gn0stik, at: 2007/05/08 21:00

Just so you know, I´ve read i right now, will try this later this week.

Thank´s a lot!

Im having to different problems:


1) For some reason the thumbnail is created but the popup isnt working. The php code in the header isnt properly interpreted because it is still in the source code of the site

I mean the:

Code:

<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/ thumbnailviewer/thumbnailviewer.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/ thumbnailviewer/thumbnailviewer.js"></script>

part


2) How can i disable the feature for the signature? I dont want the pictures in the signature as thumbnails

Post edited by: c0caine, at: 2007/05/09 00:21

The php code in the header isnt properly interpreted because it is still in the source code of the site

I'm not sure what you mean by this.. Which header are you putting it in? The header for the site template? Or the header.html of the FB template?

For 2. Not sure. I haven't ever researched how sigs are handled in FB.
However, if you look, you should be able to see that preg replace does a string comparison and then replaces what it finds once it gets a match, with an image tag that has the rel=thumbnail in it, which in turn fires the script.

So, this being the case, you should be able to find the sig insertion code(no idea where that's at), see what's unique about it, and format the preg replace to ignore it based on it's properties. So if it always has a size(width) of exactly say, 240, you can set up a preg replace to make an image tag that does not have that in it.

These can be as complex as you wish.

For example you can get rid of the rel=thumbnail in the two digit one that says [0-9][0-9] if you only want to thumbnail pics that are at least three digits big. Ignore what I said earlier about this. It was written a while ago.

Or if your thumbnail size is going to be say 250

you can have your three digit one look like this [2-9][5-9][0-9], and remove the two digit rel=thumbnail as mentioned above so that only images larger than 250 are thumbnailed. Anything below that will be treated normally because the two digit one has no rel=thumbnail in it. See what I mean?

So if your sig is always 240 just make one that has [2][4][0] and get rid of the rel=thumbnail for it, Or better yet, if the image tag that get's created has a id in it, or a rel already, preg replace on that, and make sure there's no rel=thumbnail in that.

YOu have an example of this on your site?

Note, I have not tried this, because I have it working the way I want it, as posted. I also have not tried putting the head code in the head.html. As I said I built this for jb 1.13, and haven't upgraded yet, so I have no test env for testing it on FB.

You can use the scripts based on jQuery which FB already uses. This way you avoid conflicts.

Thanks for your contribution

I am aware of the jquery scripts, but am not sure which ones use jquery and which ones use mootools.

Can you enlighten us a bit?

Thickbox, I think uses jquery, is that correct?

Rich

Maybe not. This post is 9 months old.