Placed in: 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

{mffancyzoom abstract.jpg} {mffancyzoom beach.jpg} {mffancyzoom bridge.jpg} {mffancyzoom eye.jpg} {mffancyzoom lemon.jpg}

Demo with added caption

{mffancyzoom abstract.jpg|Cool abstract image} {mffancyzoom beach.jpg|What a beautiful beach} {mffancyzoom bridge.jpg|A bridge at night} {mffancyzoom eye.jpg|Widescreen eye} {mffancyzoom lemon.jpg|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   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
Marco - Just in the content   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
Malzi   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
Marco - Strange   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
Malzi   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
Malzi   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
Marco   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
Malzi   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
nikkie - Nice effect but not usable   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
Marco - Next release   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
ZERO   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
Marco - Download again   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
zero   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
Polly Parish   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
Polly Parish   2008-02-17 21:05:09
Gravatar image unpack the file, open the folder and zip the bot folder and upload that.
Reply | Quote
pablo - Effect not working   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
Marco - Check for .js files   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
Raph - Combine two mf mambots   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
Pablo - re: Check for .js files   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
Marco   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
Pablo   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
Marco - Different   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
JXON - Cool, but...   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
ravens01   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
ravens01   2008-02-26 08:37:56
Gravatar image Oh, sorry, Polly Parish just gave the solution - now it works.
Reply | Quote
Gilles - Conflict between mfreflex and   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
Viktor - It's zooming out ???   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
Marco - Don't see the effect   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
Viktor - Put the effect again !   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
Viktor Iwan - Zooming out problem   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
Marco - Mootools conflict   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
Lanna Wuthenow - Online Business Opportunities   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
Daoufars   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
archimede - Pb legend and cross   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
Marco - Please explain   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
djepsilon - Bug?   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
charly   2008-03-15 10:48:59
Gravatar image Hi,

Sorry legend = caption ....

thanks
Reply | Quote
Matthew - mffancyzoom for 1.5   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
L. Noack - Some errors   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
Toutreza - stupid question   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
christian - fancyzoom et joomla 1.5   2008-05-29 13:21:09
Gravatar image Good morning
Magnificent fancyzoom and very simple to implement.
I just tip my site joomla 1.5 and am sorry because fancyzoom 1.1 does not work.
Quan fancyzoom happens to be available with 1.5 joomla?
Bravo and thank you again
Reply | Quote
Rex   2008-07-25 18:30:34
Gravatar image DEMO not working in... Safari 3.1.2 / OSX 10.5.4

images open in new window.

Any clues or known issues?
TIA!
Reply | Quote
Marco - My website   2008-07-27 17:04:22
Gravatar image Hi there Rex,

It's working, but the demo was working on an older version of Marcofolio.net . I've updated the template and added a couple more JavaScript functions, but they're conflicting with mfFancyZoom.

Once I update the website again, the demo will work :).

Thanks for the feedback!
Reply | Quote
RK - re: My website   2008-07-27 23:56:17
Gravatar image
Marco wrote:
Hi there Rex,...
Once I update the website again, the demo will work :)...


Aah! i see.

BTW, the Emails with comment notification have a wrong/unvalid link.
http://www.marcofolio.net/index.php?option=com_content=view=135=50#josc2429

CU
Reply | Quote
Luciano - troubles with flash movies   2008-09-23 19:01:34
Gravatar image Hi, the mambot is nice, thank you, but i've a little problem, the plugin get the absolute position in the screen, but all my flash movies in the page appears over the mambot, and the final work is horrible. could you give me some tips to fix it? Thank You Marco..
Reply | Quote
goranmk - problem with zoom in   2008-10-07 07:28:48
Gravatar image hi,
my problem is with zoom in effect
how to fix this problem...
thanks
Reply | Quote
jp   2009-03-24 16:21:51
Gravatar image hi,
1. I need to know about your menu,how did u made that
2.I am using joomla for my site,how can i add
in the html,instead of metatags in articles
Reply | Quote
fred - problm with virtumart   2009-05-12 10:46:42
Gravatar image mffancyzoom don't work in virtumart 1.1.0
Reply | Quote
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:
 
Unsubscribe from e-mail notifications.
 
< Prev   Next >
[ Back ]
Subscribe

About 2154 others will follow everything on Marcofolio.net.