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.
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
Favoured: 0
