Add some html to your images in that lightbox!

One of the biggest drawback of the lightbox-style plugins are that you are not allowed to use html code in your image description. If you need to bold or emphasize some part of the description title you are kinda screwed. Of course, you don’t want to use a long and boring description, but if you want to make a list (for example) you are some how limited. Not by lightbox plugin but the html language itself.

How image description works?


This is the basic structure for lightbox-enabled links. The lightbox plugin use that title to add a small description when the big image is showed. What if – let’s say – you need to emphasize the word ‘extra’? How would you proceed? You could use some html tags ( <em> ) but with some validation error and maybe some unpredictible result on various browsers (or parsers, if you use xhtml). The solution? Use BBcode!

BBcode for the rescue!

The above code is transformed to:


And some js magic:

String.prototype.replaceAll = function(strTarget, strSubString){
	var strText = this;
	var intIndexOfMatch = strText.indexOf( strTarget );
		while (intIndexOfMatch != -1){
 		strText = strText.replace( strTarget, strSubString )
		intIndexOfMatch = strText.indexOf( strTarget );
 	};
	return( strText );
};

The reason that we use this custom function is that the javascript internal replace function will work only for first item found. Now, if you use jQuery, you have to do this:

$('a[rel=lightbox]').each(function(){
	var t=$(this);
	t.attr( 'title', t.attr('title').replaceAll('[i]', '').replaceAll('[/i]', '').replaceAll('[b]', '').replaceAll('[/b]', '') )
}).lightBox();

What’s just happened? The BB code was replaced with html tags. Of course, if you need more tags, you can add it below ;)

Be careful!

I didn’t test it on large sets of images (i had only 6 to 12 images per page) so I have no idea if will affect the performance in any way!

Microsoft is a funny company!

Microsoft recently published a comparision table for three big (?!) browsers: IE8, Firefox and Chrome. Here is the table (i made a screenshot in case they change their minds):

Microsoft Browsers

After you stop laughing, let’s take it step by step. So:

  1. Security. Ok, maybe I lied when I said we will take it step by step. I don’t worry about security because I don’t visit obscure sites (too often). However, in last three or four years of using Firefox I had NO PROBLEMS with security. Ok, if an obscure site will ASK you to install a toolbar and you will install it… That’s not poor security. That’s great stupidity!
  2. Privacy. I will skip this step too because I’m the only one who use my PC. Besides that I don’t login on other machines. However, Chrome have a “stealth mode” and Firefox permits you to clear all private data (just hit CTRL+SHIFT+DEL).
  3. Ease of use. I’m not the right person to judge about this, so I won’t.
  4. Web Standards. ACID test: Firefox 72/100 and IE8 12/100. I don’t even start Chrome.
  5. Developer Tools. Are you kidding me? Seriously, are you kidding me? The “web developer” is a joke if you compare with firebug. You only can set breakpoints with debugger but you can’t see values on that breakpoint! How stupid is that? Also, if you want to debug a page you need to… (guess!) RELOAD the page! Dumb asses! And for network monitoring what do you have? Nothing? Oh, that’s a bummer.
  6. Reliability. Indeed, this is a problem on Firefox. But not on Chrome too (Chrome will open a new process for each tab).
  7. Customizability. Riiiight. Please show me some IE8 themes!
  8. Manageability. I’m not in a company, i don’t care.
  9. Performance. It’s a tie, they admit it.
    1. I wonder why they didn’t include Safari and Opera in that chart…

Do you still offer support for IE6?

If the answer is “yes”, may I know… WHY? I mean c’mon, we have now three versions of IE, one of them is almost 10 years old (yeah, i know, 8 is more exact number) and is filled with bugs and flaws. You don’t have advanced selectors, you don’t have png support (actually you have, but is very rudimentary), javascript is slower and so on.

Maybe you’ll say that IE6 is still used by aprox 15% of users. That is correct, but think at this aspect: an average user has no idea how awful his browser is. Because we – the front end developers – we struggle to make site 100% compatible with IE6. Ok, no user will upgrade their browser for *your* site, right? Partially correct. Let me show you why: If the user can’t use your site, i’m 99% sure that he will *not* update his browser and will leave. Unless will find several sites that won’t work on his “great” browser, right?

To demonstrate the user ignorance (ignorance is bliss, right?), take a look at what average user answer on a very simple question: “what is a browser?”

I personally offer IE6 support only for some extra cash (+25%). Some clients are OK, some are not.

So.. Do you still support IE6?

E-texteditor is slow?

Today I had a very annoying problem: E-texteditor was slow as hell. Besides that, he had over 50% cpu used. Uhm.. Ok, something is wrong when a simple text editor (ok, not so simple, but you get the point) is using CPU so intensive. I looked on forum and I found next solution (which actually works!).

1) First of all we need to make sure E is not opened (eventually look in Task Manager) and a command prompt: press win+r, then type cmd and press enter.
2) After that, you need to go where E is installed. Mine was (and still is :) ) in : c:\Program Files (x86)\e. If you have a 32bit windows, I guess you will find in c:\Program Files\e. Anyhow, the fastest way to find it is to right click on the E shortcut, choose properties then click on “find target” big ass button.
3) Next (and last) step is to launch the editor. So just type: e.exe --clearstate --clearundo

That’s all. Now I have a real speed boost and no extra CPU usage :)

ATTENTION!

Even though this is a good speed improvement, you will loose ALL undo and all opened files. So do this when you actually KNOW what are you doing ;)