miniBB ® 

miniBB

®
Support Forums		   
 | Start | Register | Search | Statistics | File Bank | Manual |
Custom Tutorials and Modifications miniBB Support Forums / Custom Tutorials and Modifications /  
 

implementing lightbox for viewing images ([imgs] & image gallery)

 
Author hubba
Guest		 #1 | Posted: 21 Sep 2007 17:04 
hi there,

some of you might want to implement lightbox into minibb for replacing the standard javascript-popups when displaying [imgs]-images or pictures uploaded through the premium add-on "file attachments and automatic image Galleries"

thanks a lot to paul who helped me optimizing it through adding the values to bb_plugins.php.

here is what i did:

* download lightbox2
from http://www.huddletogether.com/projects/lightbox2/

* copy the folders
/js/, /images/ and /css/ to your minibb-directory

* edit bb_plugins.php
add this line somewhere in the code (preferable at the top):

/* lightbox implement */
if($action=='vthread'){
$lightboxjs=<<<out
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
out;
}
/* --lightbox implement */

* edit templates/main_header.html
add {$lightboxjs} somewhere between <head> and </head>


for use with [imgs]-tags:
* edit bb_codes.php
change your [imgs]-codes to:

enCodeBB:
/* [IMGS] tag code - with fixed width in lightbox */
$pattern[]="/\[imgs\](http:\/\/([^<> \n\r\[\]&]+?)\.?(gif|jpg|jpeg|png)?)\[\/imgs\]/i";
$replacement[]='<a href="\\1" target="" rel="lightbox"><img src="\\1" alt="" title="" style="width:'.$GLOBALS['imgsWidth'].'px" /></a>';

/* [IMGS] tag code - with fixed width and alt in lightbox */
$pattern[]="/\[imgs=(http:\/\/([^<> \n\r\[\]&]+?)\.?(gif|jpg|jpeg|png)?)\](.*?)\[\/imgs\]/i";
$replacement[]='<a href="\\1" title="\\4" target="" rel="lightbox"><img src="\\1" alt="\\4" title="\\4" style="width:'.$GLOBALS['imgsWidth'].'px" /></a>';

deCodeBB:
/* [IMGs] tag code - with fixed width in lightbox */
$pattern[]="/<a href=\"([^<> \n\r\[\]&]+?)\" target=\"\" rel=\"lightbox\">[ ]<img src=\"([^<> \n\r\[\]]+?)\" alt=\"\" (title=\"\" )?style=\"width:[0-9]+px\" \/><\/a>/i";
$replacement[]="[imgs]\\1[/imgs]";

/* [IMGS] tag code - with fixed width and alt in lightbox */
$pattern[]="/<a href=\"([^<> \n\r\[\]&]+?)\" title=\"(.+?)\" target=\"\"( rel=\"lightbox\")?>[ ]<img src=\"([^<> \n\r\[\]]+?)\" alt=\"(.+?)\" (title=\"(.+?)\" )?style=\"width:[0-9]+px\" \/><\/a>/i";
$replacement[]="[imgs=\\1]\\2[/imgs]";


using lightbox for the image galleries:
* edit bb_plugins.php
change the line containing $a1 into:
$a1="<a href=\"{$a1_url}\" rel=\"lightbox\" title=\"{$alt}\" onmouseover=\"window.status='{$nameJs}';return true;\" onmouseout=\"window.status='';return true;\">";


that's all
hope it works and you have fun with it

thanks again to paul, hope that it's okay to spread that tiny piece of code of your unbeatable fileupload-add-on.
to all minibblers out there: if you want to turn your board into some highly configurable imagegallery or file-storage, support the dev-team and buy their truly elegant piece of code which the add-on is. you won't regret it!

Author Paul
Lead Developer 		 #2 | Posted: 22 Sep 2007 07:22 
Thank you for your support and posting this solution.

I hope it will be useful for those 'lightbox' fans! :-) I am myself do not like the principle of how this JS-script works, however I won't deny fashion is the power of the progress ;-)

Author Ccarriveau
Guest		 #3 | Posted: 20 Oct 2007 22:57 
can you post "already-modified" versions of the files above?
In other words files that have already been changed to work?

Author Homie
Guest		 #4 | Posted: 20 Oct 2007 22:59 
I'm interested in that too, but i'm not a heavy coder and would probably mess it up irreversibly.
posting the fixed files would be great!

Author Paul
Lead Developer 		 #5 | Posted: 21 Oct 2007 11:30 
Ccarriveau
Homie

It's not necessary to post similar messages under different nicknames, if you are the same person. You won't achive anything that way ;-)

Start learning how to copy and paste the text. The instructions above are more than enough. Posting directly modified files is a fair job, because they could contain pieces of code for other add-ons as well.

Author trc4949
Partaker		 #6 | Posted: 23 May 2016 06:59 
This light box mod in this thread does not seem to be working per the instructions above. Does anymore have an updated version about how to go about this ?

Author Paul
Lead Developer 		 #7 | Posted: 23 May 2016 21:24 
I'm not sure - but does the lightbox2 project exist as such until now?

Author trc4949
Partaker		 #8 | Posted: 23 May 2016 21:47 
Well the lightbox script is at a new link.

http://lokeshdhakar.com/projects/lightbox2/

Maybe I don't need light box as you have suggested in other places. However when viewing forums with images or file upload images on a 7 inch tablet, clicking the images makes them view-able on a new browser window and then the image has to be expanded. Not a totally good usability experience on smaller screen sizes...

Author trc4949
Partaker		 #9 | Posted: 23 May 2016 21:59 
But I think Paul you were saying you do not like lightbox scripts for image viewing right ? But why not use them for small devices ie. tablets etc. ?

Author Paul
Lead Developer 		 #10 | Posted: 24 May 2016 14:30 
trc4949:
But why not use them for small devices ie. tablets etc. ?
miniBB is an original product and we don't use 3rd party codes or add-ons. That's all about it. If you like this or that, you could merely implement it, it's open source.

Also, scripts like lightbox are not for mobile devices at all. It's up to a mobile device, it's OS, and it's up to a browser on a mobile device of how it interprets and displays large images. It could work on one device and it could not work on another. There is no common standard in how the large images should be displayed anywhere.

Author Mike T.
Guest		 #11 | Posted: 7 Jun 2016 17:37 
trc4949:
But I think Paul you were saying you do not like lightbox scripts for image viewing right ? But why not use them for small devices ie. tablets etc. ?
Actually, scaling images is not the task of an javascript app. It's the direct task of the browser and device this browser is set up on. I see that file upload add-on already contains a lot of codes related to the mobile device. Maybe authors could consider an option of not displaying images in javascript pop-up windows on mobile devices, but open them directly by an URL or introduce some other way to see the direct images instead of their pop-up replacements. In this case, as I suppose, any mobile device could use its own internal scaling mechanisms and no other extra tools or codes should be necessary.

Author Paul
Lead Developer 		 #12 | Posted: 8 Jun 2016 16:55 
Mike T.
I partially agree with your regarding different browsers and devices. I have Lumia 435 for tests and it acts not like any other mobile device on the marker, thus with different browsers (default IE, UC or Opera Mini) it acts even more differently regarding images. I think the current version of the File Upload add-on's pop-ups already does the best it could do - also, I personally like the feature when the opened image could be closed, clicking it - it's very comfortable and it works on large amount of browsers.

I doubt that installing solutions like Lightbox could improve those behaviors.

I'm currently working out the newer version of File Upload add-on, and came to quite simple CSS solution which works mostly in every modern browser in terms of scaling images which do not fit the screen. Whatever you'd need to add to the CSS file, is something like

.fPopUp img{
max-width:100%;
}
where 'fPopUp' may be substituted by any body/table/td class which is supposed to have images in it. I mostly checked this for images which were embedded using BB code from external websites, and I think I'm going to include this in default miniBB CSS - also, this could work in some term for the File Upload add-on's code, you may try...

Custom Tutorials and Modifications miniBB Support Forums / Custom Tutorials and Modifications /
 implementing lightbox for viewing images ([imgs] & image gallery)
 Share Topic's Link

Your Reply Click this icon to move up to the quoted message
 ∅ ?
Post as a Guest, leaving the Password field blank. You could also enter a Guest name, if it's not taken by a member yet. Sign-in and post at once, or just sign-in, bypassing the message's text.

Before posting, make sure your message is compliant with forum rules; otherwise it could be locked or removed with no explanation.

 
 
miniBB Support Forums Powered by Forum Software miniBB ® Home  Features  Requirements  Demo  Download  Showcase  Gallery of Arts
Compiler  Premium Extensions  Premium Support  License  Contact Us
Try the Captcha add-on: protect your miniBB-forums from the automated spam and flood.


  ⇑