Home
mfFancyZoom: Zoom into images with this Joomla 1.0.x mambot
Logo Joomla! is my favorite CMS. I created a mambot that allows you to easily zoom into images with a beautiful effect. It's called mfFancyZoom 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 it looks really cool, check out the demo below.

This script uses the FancyZoom script. Use it totally free for your non-commercial website. If you're running a commercial website, you should buy a license.

Demo with Basic setup

    

Demo with added caption

Cool abstract image What a beautiful beach A bridge at night Widescreen eye Delicious! A green lemon

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 mfFancyZoom and publish it

How to use

Syntax

Note that you need to remove the underscore (_) from all syntaxes placed on this page. I needed to place the underscore, otherwise it would conflict on this page where the mambot is enabled.

Use the following syntax to enable mfFancyZoom on your images:
{mf_fancyzoom img_name}

The base image path is always: images/stories/mffancyzoom.

The thumbnails should always have the same name as the original and placed in the following folder: images/stories/mffancyzoom/thumbs

For example, I would have an image called "marcofolio.jpg" with the size of 400 x 300 pixels. The thumbnail, also called "marcofolio.jpg" but now with the size of 100 x 75 pixels is placed in the "/thumbs/" folder.

Create the folders mffancyzoom and mffancyzoom/thumbs in your images/stories folder, or else the scipt will not work.

Directory architecture:
images/stories/mffancyzoom/marcofolio.jpg (Original image)
images/stories/mffancyzoom/thumbs/marcofolio.jpg (Thumbnail image)

Your syntax will be: {mf_fancyzoom marcofolio.jpg}

Advanced Configuration

You can set the global parameters, such as the zoomTime, zoomSteps and minBorder, in the mambot settings.

mfFancyzoom has one optional parameter you can set. Separate the parameter with the | symbol.

  1. The image location and name. This one has to be used, or else the script will not work.
    Example: {mf_fancyzoom img_name}
  2. Adding a caption of the image.
    Example: {mf_fancyzoom img_name|Logo}

Now I would have a fancy zoom image with a caption called Logo.

Only the first parameter must be filled.

Download

Add this magnifier image to your thumbnail files for more user friendly images.

Attribution-Share Alike 3.0

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

This script uses the FancyZoom script. Use it totally free for your non-commercial website. If you're running a commercial website, you should buy a license.

All sample images are from socwall.

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

Changelog

Version 1.1
  • Bugfix: Now works when installed in subdirectory
  • Bugfix: Improved the code


Tags:  mambot free joomla webdesign

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

Comments
Add NewSearchRSS
Malzi - Use of this mambots   | 82.248.60.xxx | 2008-02-13 22:01:27
Gravatar image Can you help me, i have installed this mambots, but this not work.
Where i must scribe {mffancyzoom img_name} ???
Can you make an other example please.
Thanks a lot and very nice mambots.
Reply | Quote
0 2
Marco - Just in the content   | 62.194.187.xxx | 2008-02-13 23:17:31
Gravatar image Simply publish this mambot (Mambots > Site Mambots).

Upload the following files:
images/stories/mffancyzoom/image.jpg
images/stories/mffancyzoom/thumbs/image.jpg

Now add a new content and add the following code:
{mffancyzoom image.jpg}

That's it! Good luck.
Reply | Quote
2 0
Malzi   | 82.251.241.xxx | 2008-02-14 18:01:12
Gravatar image Yes it' ok but i obtain this :

http://img179.imageshack.us/img179/3658/fancyzoomzo5.jpg

With this in editor :

http://img85.imageshack.us/img85/1946/editoryc0.jpg

I have the same thing with the discussbot af Fireboard ??
Sorry with my english but i'm french ;)
Reply | Quote
1 1
Marco - Strange   | 62.194.187.xxx | 2008-02-14 18:18:24
Gravatar image Hi,

Which version of Joomla! are you currently running? And are you positive you located the correct .jpg files in the correct folder?

And remember:
Only when published on the "real" website, Mambots get activated. So when you press "preview" on the administration panel, you'll not see the mambot working. When you really publish it on the website, you'll see it work.

Do you have the script online so I can check?
Reply | Quote
1 0
Malzi   | 82.251.241.xxx | 2008-02-14 18:39:43
Gravatar image Yes you can see here :

http://kinesitherapie.kolekte.info

Yes it's in the correct folder :

/www/kines/images/stories/mffancyzoom/
and
/www/kines/images/stories/mffancyzoom/thumbs/

and the mambots is activated :

http://img504.imageshack.us/img504/7558/plugtx2.jpg

Thanks for your help
Reply | Quote
1 0
Malzi   | 82.251.241.xxx | 2008-02-14 19:29:34
Gravatar image Then, I change all the mambots in mffancyzoom.php and mffancyzoom.js by plugins ?

But it's not working aniway ? I use Joomla 1.5 perhaps it's the reason of not working ?
Reply | Quote
1 0
Marco   | 145.74.182.xxx | 2008-02-15 10:48:43
Gravatar image Hi,

I don't see the page where you're trying to run the script.

I see that the script is working on the "Article dans les DNA" article.

The mambot is created for J! 1.0.x, not for J! 1.5 (yet).

If you have more problems, please contact me through the contact form.

Greetings,,,
Reply | Quote
0 0
Malzi   | 82.64.40.xxx | 2008-02-16 14:42:18
Gravatar image Very strange, it's work but i don't write {mffancyzoom image.jpg} !!!

I just make the 2 directory and make the links between thumbs and original image when i include image in my content, and it's working ???

What do you think of this ?

Thanks for all and have a good day ;)
Reply | Quote
1 0
nikkie - Nice effect but not usable   | 71.1.26.xxx | 2008-02-16 16:00:33
Gravatar image The mambot viewer is a nice effect, but it has little usability in the real world. It needs another parameter that allows you to specify a gallery. Each gallery then has its own photos and thumbs folder. This way you can zoom individual pictures throughout one or more content pages, or entire galleries placed wherever necessary.
Reply | Quote
1 2
Marco - Next release   | 62.194.187.xxx | 2008-02-16 21:33:14
Gravatar image Thanks for that tip! I'll create it when I release my next version :) .

Greetings,,,
Reply | Quote
0 0
ZERO   | 85.135.130.xxx | 2008-02-17 08:37:58
Gravatar image HI, I am trying install it, but there is the result: Unrecoverable error "PCLZIP_ERR_BAD_FORMAT (-10)" :unsure: (in 3 different joomla versions)
Reply | Quote
0 0
Marco - Download again   | 62.194.187.xxx | 2008-02-17 09:07:19
Gravatar image It seems as if the ZIP archive is damaged.

Try downloading it again here and try it on your website.

If it still doesn't work, please contact me (use contact form) so I can e-mail you the ZIP archive.
Reply | Quote
0 0
zero   | 85.135.130.xxx | 2008-02-17 11:35:58
Gravatar image Hi, Marco this effect is beautiful, but I am Hopeless, the zip-file from this site not working on the my joomlas, ill send my adress to you
Reply | Quote
0 0
Polly Parish   | 88.108.213.xxx | 2008-02-17 20:54:01
Gravatar image It seems to have one folder level too many which is stopping it from installing.
unpack the file, open the folder and zip the bot folder and upload that.
Reply | Quote
0 0
Polly Parish   | 88.108.213.xxx | 2008-02-17 21:05:09
Gravatar image unpack the file, open the folder and zip the bot folder and upload that.
Reply | Quote
0 0
pablo - Effect not working   | 201.254.124.xxx | 2008-02-18 04:27:12
Gravatar image It shows the images... but without the effect. The thumb links to the full path of the image, but it does not open in the same page with the effect... it just opens like an ordinary link..

any help?

Thanks a lot for your mambots :)
Reply | Quote
0 0
Marco - Check for .js files   | 145.74.182.xxx | 2008-02-18 08:51:14
Gravatar image Check your section of your template if it includes the "mfFancyZoom.js" and "FancyZoomHTML.js" files.

If it's not there, please add the following lines in the section of your templates index.php file (without the underscores):
<_script type="text/javascript" src="mambots/content/mffancyzoom/mfFancyZoom.js"><_/script>
<_script type="text/javascript" src="mambots/content/mffancyzoom/FancyZoomHTML.js"><_/script>

Should work, good luck!
Reply | Quote
2 1
Raph - Combine two mf mambots   | 213.221.142.xxx | 2008-02-18 10:05:51
Gravatar image Hi,
would it be possible to combine two mambots, for example mfReflex and mfFancyZoom.

What i'd like to achieve is someting like :
{mf_fancyzoom mfReflex {marcofolio.jpg}}

First show the image with the mfReflex effect, but also allow this image to be "fancyzoomed".

thank you for your help.
Raph
Reply | Quote
1 0
Pablo - re: Check for .js files   | 145.74.201.xxx | 2008-02-18 16:14:50
Gravatar image
Marco wrote:
Check your section of your template if it includes the "mfFancyZoom.js" and "FancyZoomHTML.js" files.

If it's not there, please add the following lines in the section of your templates index.php file (without the underscores):
Should work, good luck!

Thanks, that made the effect work. However, i'm using mfgreybox too and it does not work.. It shows the effect, but not the gallery. Do I have to add some scripts to the template html like I did with this one?

Thanks again, you're great!
Reply | Quote
0 0
Marco   | 145.74.201.xxx | 2008-02-18 16:30:13
Gravatar image Hi Pablo,

mfFancyZoom and mfGreybox do not work together at this moment. mfFancyZoom conflicts and overrides the mfGreybox code.

I'll try to make them work together later (when I have time).

Greetings,,
Reply | Quote
0 0
Pablo   | 201.254.124.xxx | 2008-02-18 16:35:48
Gravatar image But, doesnt the greybox use the fancyzoom? I mean, when you only install greybox it should work right? I want the greybox instead of the fancyzoom so I can use galleries.. is that available to do with greybox? I just cant

PS: Sorry to post it here, I know it should be commented on the other post.
Reply | Quote
0 0
Marco - Different   | 62.194.187.xxx | 2008-02-18 17:45:26
Gravatar image No, both are totally different mambots :) . Use mfFancyZoom if you want to create a zooming effect on images and mfGreybox is to create galleries.

The best option for you is to go with mfGreybox, good luck!
Reply | Quote
0 0
JXON - Cool, but...   | 221.213.10.xxx | 2008-02-22 22:40:37
Gravatar image After zooming out, just click any other thumbnails, you'll find everything goes wrong. Images are not zooming out accordingly and some don't show up at all. :s
Reply | Quote
0 0
ravens01   | 62.194.187.xxx | 2008-02-26 08:38:08
Gravatar image Hi Marco,

I have the same problem Zero had it: I can't install the script (failure message see above). I downloaded it three times - it doesn't work. Any help available? (I use J 1.0.12)
Thanks & greetings
Reply | Quote
0 0
ravens01   | 62.194.187.xxx | 2008-02-26 08:37:56
Gravatar image Oh, sorry, Polly Parish just gave the solution - now it works.
Reply | Quote
0 0
Gilles - Conflict between mfreflex and   | 89.86.65.xxx | 2008-02-23 20:07:55
Gravatar image Hi Marco,

Sorry my english is poor. I have a problem with mfreflex and mffancyzoom in joomla 1.0.13.
They are in a same article, mfreflex at top and mffancy at foot of article. mffancy work but mfreflex is not worked.
mfreflex work only when mffancyzoom bot is not installed. I have the same problem with ReflectionJP and mffancyzoom.
Thanks for your help
Reply | Quote
0 0
Viktor - It's zooming out ???   | 61.247.51.xxx | 2008-02-26 05:22:58
Gravatar image Hello, i think i have follow procedure correctly, but instead having zoom in effect, i got zoom out effect.

can anybody, please check at my website http://www.veecology.com and let me know if i do something wrong ?


PS: what component do you use for this comment feature
Reply | Quote
0 0
Marco - Don't see the effect   | 62.194.187.xxx | 2008-02-26 08:25:31
Gravatar image I don't see the effect on your website. It seems as if you're loading another mambot.

Please contact me through the contact form if you need any more help.

The comment form is !JoomlaComment.
Reply | Quote
1 0
Viktor - Put the effect again !   | 61.247.51.xxx | 2008-02-26 12:21:09
Gravatar image Hello Marco,
sorry it seems when you look at my site you seeing that i'm using other mambot-thumbviewer, now i have put mfFancyZoom to work again.

please take a look,
nice work there
Reply | Quote
0 0
Viktor Iwan - Zooming out problem   | 61.247.51.xxx | 2008-02-28 05:15:14
Gravatar image Hello marco and everybody, it's been 2 day of confuseness of using this wonderful tools.
Please checkout in :
http://www.veecology.com/forex-blog/my-fx-trade-26-february-2008.html

is there something wrong with my setting ?
Reply | Quote
0 0
Marco - Mootools conflict   | 145.74.183.xxx | 2008-02-28 08:52:10
Gravatar image Hi Viktor,

Sorry for my late reply, totally forgot about it!

Anyway, I think that your template conflicts with the script. Your template uses "mootools.js" which could conflict with the mfFancyZoom script.

Try switching template (just as a test) and check if it works now.

Good luck.
Reply | Quote
0 0
Lanna Wuthenow - Online Business Opportunities   | 74.72.131.xxx | 2008-03-06 06:07:45
Gravatar image I am using Joomla 1.0.13 for my website; the images there were working fine a couple weeks ago. Then one day they were all gone. I cannot figure out what is the problem. I searched a solution and came across your site. The images in my website only work if I did not use Insert/Edit link function. I think the problem has to do with the JCE editor I downloaded not long ago. Do you think the mambot you talked about here will solve my problem?
Reply | Quote
0 0
Daoufars   | 159.50.203.xxx | 2008-03-07 11:14:37
Gravatar image Is it possible to display bigger images (bigger than size of 400 x 300 pixels) ?
Thanks for your help?
Reply | Quote
0 0
archimede - Pb legend and cross   | 86.203.46.xxx | 2008-03-11 17:55:24
Gravatar image Hi,

The installation of mffancyzoom is ok in my website. But I can't see the cross and the legend. Where are the parameters and how can I do to obtain the saim result than you ?

Thanks !
Reply | Quote
0 0
Marco - Please explain   | 62.194.187.xxx | 2008-03-11 20:31:22
Gravatar image Ive added the magnifier to the thumbnails myself. You can find it on the bottom of the article.

What do you mean with "legend"?
Reply | Quote
1 0
djepsilon - Bug?   | 82.231.63.xxx | 2008-03-15 09:12:17
Gravatar image Hi and thanks for this great job. ;)
I just have one bug... in Firefox this cause no many things just one error in console but in Internet Explorer, this cause some trouble.
The ff Console type: "Erreur : setupZoom is not defined"

But this is only in a page whitout image or link with image.
I'm using joomla 1.0.15 with fckeditor

Excuse my bad english, i'm a froggy french :P :P
Reply | Quote
0 0
charly   | 86.203.46.xxx | 2008-03-15 10:48:59
Gravatar image Hi,

Sorry legend = caption ....

thanks
Reply | Quote
0 0
Matthew - mffancyzoom for 1.5   | 220.233.106.xxx | 2008-03-15 13:43:09
Gravatar image I have done a quick job of porting mffancyzoom to Joomla 1.5 (very little testing) and have sent my changes through to Marco. Hopefully he will repackage and make it available. If he's a bit busy and doesn't get it done, drop me a line.

It's a nice plugin, thanks Marco.
Reply | Quote
0 0
L. Noack - Some errors   | 87.162.59.xxx | 2008-04-27 22:49:31
Gravatar image Hi Marco.
Very good Joomla-plugins but after install i show some errors under Joomla 1.0.15:
Notice: Undefined offset: 1 in /var/www/.../mffancyzoom.php on line 72

Notice: Undefined variable: title in /var/www/.../mffancyzoom.php on line 79

Notice: Undefined index: 1 in /var/www/.../mffancyzoom.php on line 79

The picture shows correctly.
Where is the (install??) error?
The both .js-files are included.

Thanks.
Lars
Reply | Quote
0 0
Toutreza - stupid question   | 82.237.189.xxx | 2008-05-06 05:31:32
Gravatar image My question might be stupid as I am a newbee but, how can I choose the alignment of the picture with the text.
I'd like to chosse puting the picture on the left or the right in my articles.
Thnks.
Reply | Quote
0 0
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 >
[ Back ]
Subscribe
Navigation