Understanding through Discussion


Welcome! You are not logged in. [ Login ]
EvC Forum active members: 79 (8965 total)
55 online now:
dwise1, Faith, Minnemooseus (Adminnemooseus), nwr (4 members, 51 visitors)
Newest Member: javier martinez
Post Volume: Total: 873,244 Year: 4,992/23,288 Month: 113/1,784 Week: 0/211 Day: 0/20 Hour: 0/2


Thread  Details

Email This Thread
Newer Topic | Older Topic
  
Author Topic:   New Feature: Image Resizing
Admin
Director
Posts: 12657
From: EvC Forum
Joined: 06-14-2002


Message 1 of 15 (527966)
10-03-2009 4:12 PM


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

Replies to this message:
 Message 2 by RAZD, posted 10-03-2009 4:30 PM Admin has responded
 Message 3 by Dr Jack, posted 10-03-2009 4:33 PM Admin has responded
 Message 15 by xongsmith, posted 10-05-2009 7:54 PM Admin has acknowledged this reply

  
Admin
Director
Posts: 12657
From: EvC Forum
Joined: 06-14-2002


Message 4 of 15 (527975)
10-03-2009 4:45 PM
Reply to: Message 2 by RAZD
10-03-2009 4:30 PM


I provided the [midt] dBCode a while back, use peek to see how I did this:

RAZD's Message

Your 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

This message is a reply to:
 Message 2 by RAZD, posted 10-03-2009 4:30 PM RAZD has acknowledged this reply

Replies to this message:
 Message 6 by Dr Jack, posted 10-03-2009 4:55 PM Admin has acknowledged this reply

  
Admin
Director
Posts: 12657
From: EvC Forum
Joined: 06-14-2002


Message 7 of 15 (527978)
10-03-2009 5:01 PM
Reply to: Message 3 by Dr Jack
10-03-2009 4:33 PM


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

This message is a reply to:
 Message 3 by Dr Jack, posted 10-03-2009 4:33 PM Dr Jack has responded

Replies to this message:
 Message 8 by Dr Jack, posted 10-03-2009 5:03 PM Admin has acknowledged this reply
 Message 11 by Coyote, posted 10-03-2009 6:56 PM Admin has acknowledged this reply

  
Admin
Director
Posts: 12657
From: EvC Forum
Joined: 06-14-2002


Message 9 of 15 (527980)
10-03-2009 5:07 PM
Reply to: Message 5 by Coyote
10-03-2009 4:53 PM


Re: Images?
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

This message is a reply to:
 Message 5 by Coyote, posted 10-03-2009 4:53 PM Coyote has not yet responded

  
Admin
Director
Posts: 12657
From: EvC Forum
Joined: 06-14-2002


Message 12 of 15 (528043)
10-04-2009 4:09 AM


Internet Explorer Working
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

  
Admin
Director
Posts: 12657
From: EvC Forum
Joined: 06-14-2002


Message 14 of 15 (528111)
10-04-2009 2:10 PM
Reply to: Message 13 by Dr Jack
10-04-2009 1:07 PM


Re: Problem with multiple floaters
Hmmm. Interesting. I'll look into this over the next week or so.


--Percy
EvC Forum Director

This message is a reply to:
 Message 13 by Dr Jack, posted 10-04-2009 1:07 PM Dr Jack has not yet responded

  
Newer Topic | Older Topic
Jump to:


Copyright 2001-2018 by EvC Forum, All Rights Reserved

™ Version 4.0 Beta
Innovative software from Qwixotic © 2020