New Feature: Image Resizing

I've just released a new feature that allows images to be dynamically resized from within messages. For example, if you hover the mouse over this image you will see a little magnifying glass cursor with a plus. Click on the image and it will grow to full size: The magnifying glass cursor now has a minus. Clicking on the image again will return it to its original size.There are a few changes to the way the [img] and [thumb] dBCodes work:

1. The [img] dBCode used to display images left-justified, it now displays them centered by default.
   ​
2. The [img] and [thumb] dBCodes now accept the identical option arguments. The only difference between them is that the default size for the [img] dBCode is the actual image size , but only up to 600 pixels wide. Larger images are displayed at 600 pixels wide but can be expanded to full size by clicking on the image.
   ​
   The default width for the [thumb] dBCodes is 100 pixels.
   ​
3. The options now accepted by the [img] and [thumb] dBCodes are image width (an integer), horizontal alignment left, right or center, and a caption. An equals sign (=) must appear after the dBCode and before the option list. Multiple options must be separated by commas.
   ​
4. An example of specifying an image width:
   ​
   [img=300]
   ​
   An example of specifying an image width and an alignment:
   ​
   [img=300,left]
   ​
5. The alignment options are left, center, right, floatleft and floatright, for example:
   ​
   [thumb=right]
   ​
   Using the right option the above image would have displayed like this:
   ​
   ​
6. The floatleft and floatright options allow text to flow around the image. For example, this uses the floatright option:
   ​
   This text should appear next to the image instead of above or below it. I'll just run on for a few more lines here so that you can see how this would appear with a paragraph of average length. There, that should be enough text. No, I guess it wasn't, so let me go on typing for a bit more. The cat's brother was here in the room a minute ago, but not now.
   ​
   I can add an option to make the image bigger while still using the floatleft option. Here I've widened the image to 200 pixels:
   ​
   This text should appear next to the image instead of above or below it. I'll just run on for a few more lines here so that you can see how this would appear with a paragraph of average length. There, that should be enough text. But with the bigger image this is no longer enough lines, so I'll have to add some more text. There, hopefully that's enough. Nope, wasn't enough, so I guess I have to keep typing here. Well, as you can all see, this is a really neat feature, and you can still click on the image to change it's size. The text will reformat to flow around the larger image. This last sentence should completely surround the image with text, if I can just run on for long enough. My fingers are getting tired.
   ​
7. Captions can be added by using the caption option. The caption must be separated from the caption text with a colon (, and the caption cannot contain a comma because that is the character that separates multiple options. Here I combine a caption with a width of 300 like this:
   ​
   [thumb=300,caption:This cat is eating plastic leaves.]
   ​
   It looks like this:
   ​

   This cat is eating plastic leaves.

I'll be updating the documentation on the dBCodes help page soon.Edited by Admin, : No reason given.Edited by Admin, : Test Internet Explorer.

---

--	Percy
	EvC Forum Director

excellent.I was wondering if it would be possible to have alternate text in the [mid=527966,Percy's Message] then showing as Percy's Message

I don't see any magnifying glass (using Firefox 3.5) and, in fact, the image is not appearing smallerIt works with Chrome.

I provided the [midt] dBCode a while back, use peek to see how I did this: RAZD's MessageYour approach is good, too, I can give it a try, but Mr Jack is reporting a FireFox problem with image resizing.

---

--	Percy
	EvC Forum Director

I saw no magnifying glass and all images were the same size.Firefox 3.0.1, Mac OS 10.4.11.

Ah, cache problem. Sorry.Ctrl-F5 resolves it.(Although the magnifying glass icon isn't appearing, still - otherwise it works fine)Edited by Mr Jack, : No reason given.

How's it working in FF now? Be sure to click on Reload just to be sure the new CSS file gets loaded?IE doesn't work at all for me, fixing that now.

---

--	Percy
	EvC Forum Director

Perfect. Cheers

Try doing Reload to make sure the latest Javascript and CSS is loaded in FF.In Safari on Mac, it is working fine for me. Can you try reload and see if that helps.

---

--	Percy
	EvC Forum Director

I don't get a magnifying glass cursor either, but the image still enlarges when I click on it (IE user).I think this is a great feature!Edited by Bluejay, : No reason given.

---

-Bluejay (a.k.a. Mantis, Thylacosmilus)Darwin loves you.

Works fine now. No magnifying glass but the image resizes nicely. Thanks for the tip.Edited by Coyote, : No reason given.

Internet Explorer should now be working, although with the "move" cursor rather than the magnifying glass cursors. Be sure to click "Refresh" first in order to load the new Javascript and CSS files.Image resizing should now be working in all browsers. Please report any problems here.

---

--	Percy
	EvC Forum Director

I found a problem with multiple floaters, for example, I expected the following to come out on sequential lines, not flowing ever rightward: This is a pipistrelle bat (Pipistrellus pipistrullus). Notice how small it is, it feeds on small moths and flies. Now look at this fella. Bit bigger, isn't he? This is Nyctalus lasiopterus, among other things they eat birds. This pretty critter is a vampire bat (sorry, I don't know the exact species) noted for feeding on blood. This is the fruit bat mentioned earlier in the thread, the name is a clue to what it eats. This Hylonycteris underwoodi, as you may be able to tell from the picture it feeds on plant nectar like small birds such as the various hummingbirds And, finally, this remarkable bat (Mystacina tuberculata) comes from New Zealand. They crawl across the leaf litter, foraging for food.

Hmmm. Interesting. I'll look into this over the next week or so.

---

--	Percy
	EvC Forum Director

hi Percy,I have no idea how long it will be before I can get off of this 56k dail-up. Until then, these large pictures kill my loading time. Maybe I can get some other things done. Mow the lawn between page loads. Do my shopping. So it might be a good thing. But no - I just stare at the FireFox wheel of blinking dots. ;-)Ahah - it has finished! Pretty neat stuff, there.

---

- xongsmith