Home
mfInstant: Add a photo effect on images with this Joomla 1.0.x mambot
Logo Joomla! is my favorite CMS. I created a mambot that allows you to easily add realistic photo effect on your images. It's called mfInstant and you can use it free of charge.

Use this mambot to give some extra eye-candy to your images. It is very simple to use and uses unobtrusive javascript. Many advanced options are included.

You don't need Photoshop or any other advanced and expensive programs to make realistic photo effects on images. Use mfInstant and you're ready to go. Additionally, the original image will be kept intact.

Original

Original Image

Basic setup

Basic setup
{mfinstant beach.jpg}

Advanced configuration

Advanced configuration
{mfinstant beach.jpg|Beautiful beach|||000000|left}

Install

  1. Log in to your back-end of the site
  2. Go to "Installers", "Mambots"
  3. Click on "Browse" and navigate to the downloaded ZIP archive
  4. Press "Upload File & Install"
  5. Go to "Mambots", "Site Mambots"
  6. Search for mfInstant and publish it
  7. Download instant.js
  8. UnZIP the archive and only get instant.js. Upload it to the following folder on your FTP:

    /mambots/content/mfinstant

    Don't forget to read the license of instant.js.

How to use

Syntax

Use the following syntax to enable mfInstant on your images:
{mfinstant imgpath/img_name}

The base image path is always: images/stories. For example, if you have an image in your images/stories folder, your syntax will be: {mfinstant img_name}

If you have an image in your images/stories/subfolder folder, your syntax will be: {mfinstant subfolder/img_name}

When the user hasn't enabled JavaScript or the browser doesn't support this script, a non-formatted image will be displayed.

Advanced Configuration

mfInstant has a couple of parameters you can set. Seperate the parameters with the | symbol.

  1. The image location and name. This one has to be used, or else the script will not work.
    Example: {mfinstant imgpath/img_name}
  2. ALT attribute for the image, making it W3C valid. If left empty, no ALT attribute will be used.
    Example: {mfinstant imgpath/img_name|Logo}
  3. Float the image to the left or to the right.
    Example: {mfinstant imgpath/img_name|Logo|right}
  4. Change the opacity of the shadow. Choose between 0 and 100 percent. Default is 33.
    Example: {mfinstant imgpath/img_name|Logo|right|50}
  5. Change the color of the border as hex. Min is 000000, max is ffffff. Default is f0f4ff.
    Example: {mfinstant imgpath/img_name|Logo|right|50|CCCCCC}
  6. The tilt direction of the image. Choose between left, none or right. By default, the script rotates between these values.
    Example: {mfinstant imgpath/img_name|Logo|right|50|CCCCCC|none}
  7. To remove the shading of the image, simply add "noshading".
    Example: {mfinstant imgpath/img_name|Logo|right|50|CCCCCC|none|noshading}

Now I would have a instant image with an ALT attribute called "Logo", floating on the right, with a shadow opacity of 50%, a grey (CCCCCC) border, no tilt and no shading.

Only the first parameter must be filled. All others are optional. If you don't want to use the parameter, leave it empty. For example, if you want all default settings, but no shading, use the following syntax:
{mfinstant imgpath/img_name||||||noshading}

Download

Attribution-Share Alike 3.0

Don't forget to download mfSyntaxHelper if you need some help with the difficult syntax from this mambot.

The sample image is from socwall.

Feel free to give feedback about this mambot. Enjoy using it!

Changelog

Version 1.1
  • Removed script from Christian Effenberger due to copyright restrictions. You can still download the script at his website.
  • Added a couple empty "index.html" files for no directory listing.
  • Default settings can be placed. Go to the mambot and set your own default settings.
Known bugs
  • Script doesn't work when Joomla! is installed in a subdirectory.
Version 1.2
  • Bugfix: Now works when installed in subdirectory
  • Bugfix: Altered code to remove the "Stack Overflow" error from IE7


Tags:  mambot free joomla webdesign

Interested in this topic? You might enjoy another article I've written called

Comments
Add NewSearchRSS
Erik - Error in zip   | 213.88.192.xxx | 2008-02-11 10:32:33
Gravatar image When trying to install this I get an "error in zip - installation file not found"???

Something wrong with the zip package?

Thanks
Marco - Download Again   | 145.74.182.xxx | 2008-02-11 10:45:22
Gravatar image Hello Erik,

Works fine over here. Check the downloaded ZIP file for a XML file. Try downloading the file again.

If it still doesn't work, please contact me and I'll e-mail you the files.

Greetings,
Marco
Erik - works now   | 84.48.74.xxx | 2008-02-23 11:33:15
Gravatar image Hello Marco,

Thanks for assisting. It worked when I unpacked and zipped again. So something must be off with your zip-package. It worked for me when I first did an unzip and zipped again on my local computer. I was then able to upload and install as normal. Thanks, Erik
Robin - Change Border Width   | 196.35.158.xxx | 2008-02-13 14:23:08
Gravatar image Hello

GREAT mambot... fantastic thankyou.

Just a quick question... the border width around an image, how can this size be made smaller?

Both for mfInstant and mfFilmed... if the border was half the current size, this would be perfect.

Any help will be most welcomed.
Pi_R - OK with Firefox but problem wi   | 82.255.42.xxx | 2008-02-16 17:22:17
Gravatar image I don't understand why images disappear on IE7 (when mambot is enabled) although they are well displayed on Firefox.
You can see on my website at this page :
http://oceansemble.free.fr/index.php/content/view/120/87/
Thanks :unsure:
hivana - Dont' work   | 81.247.71.xxx | 2008-02-18 18:19:32
Gravatar image Please, install don't work.

Upload mambot - ECHEC
Unrecoverable error "PCLZIP_ERR_BAD_FORMAT (-10)"

Can you help me ?
Marco - Unpack -> Upload   | 62.194.187.xxx | 2008-02-18 20:56:19
Gravatar image Hi,

Try unpacking the file on your local machine
Upload the files to any directory on your website
Use the "Install from directory" function and select the correct directory
Should work now, good luck.
hivana - Thanks   | 81.247.80.xxx | 2008-02-19 15:41:58
Gravatar image Great ! Thank you, the install work now but ... I have no effects :(

I've publish, copy the script too, use javascript in my browser and no effect *sad*

For exemple: http://destinee.jexiste.fr/index.php?option=com_content&task=view&id=47&Itemid=39

(Sorry for my english)
Marco - Conflict   | 145.74.180.xxx | 2008-02-19 19:57:40
Gravatar image I see you have module installed (modules/ja_slideshow) that uses Mootools.

This script conflicts with the .JS script from mfInstant. There is no way around this.

To check, try uninstalling the slideshow module. Now, the mfInstant should work again.

There is no "work around" for this problem at the moment, I'm sorry.

Greetings,,,
hivana   | 81.247.80.xxx | 2008-02-20 14:30:41
Gravatar image It's too bad. Thanks a lot for your help ^^
myamata   | 216.162.76.xxx | 2008-03-05 02:15:03
Gravatar image Do you have an parameter to modify or disable the border ?
You have one to change the color, I'd like change the size :)

Thank you
DaveM - Compress mambots/content/mfins   | 67.161.13.xxx | 2008-03-18 06:48:35
Gravatar image The file mambots/content/mfinstant/instant.js is about 14K. Is there an option to compress this? gzip level 1 gets this down to 4K (if you believe http://www.gidnetwork.com/tools/gzip-test.php).
Marco - Yes   | 62.194.187.xxx | 2008-03-18 08:46:25
Gravatar image Yes.

You indeed can use GZIP (if enabled by your host), or parse the .JS file through a JavaScript compressor:

http://javascriptcompressor.com/

Good luck.
Read more...
Name:
Email:
  Gravatar enabled.
Website:
Title:
UBBCode:
[b] [i] [u] [url] [quote] [code] [img] 
 
 
:angry::0:confused::cheer:B):evil::silly::dry::lol::kiss::D:pinch:
:(:shock::X:side::):P:unsure::woohoo::huh::whistle:;):s
:!::?::idea::arrow:
 
Security Image
Please input the anti-spam code that you can read in the image.
Unsubscribe from e-mail notifications.
 
< Prev   Next >
Subscribe
Navigation
Search
Search:
          
Sponsors
   



Blogrush