Extension talk:FancyBoxThumbs
- [History↑]
Contents
I tried the extension (on MW 1.18.1) and i basically like it. But i would like to choose, what pages/images get fancy thumbs and what pages/images do behave the normal way. Is there any way to include a switch?
The plugin looks for any link ("a" tag) with the class="image" attribute and triggers FancyBox for that link/image. If you could somehow remove the class="image" attribute, you could selectively turn it off. However, I think this is a lot easier said than done.
Hi, FancyBox looks great and I would love to get it working on my wiki but am having issues. I tried installing it both from the master.zip file in your download link, and from git, but neither seems to work for me. You can see details of my installation at http://linuxproblems.org/wiki/Special:Version. Also here's a test page I set up http://linuxproblems.org/wiki/Test. Any ideas what might be wrong? I can't see any errors in my logs. Ed.
Not to worry, it looks like this was a problem with the mediawiki skin I'm using - cavenishmw. It works with other skins.
Was using this extension on MW 1.19.1, PHP 5.3.14 and all was great!
After update to MW 1.20.2 stopped working. The list of extension is the same as for MW 1.19.1.
I will be grateful for any help!
I'm thinking this might have something to do with it: http://www.mediawiki.org/wiki/ResourceLoader/Migration_guide_for_extension_developers
Something tells me they made the old way obsolete in 1.20
I'll keep looking into this and see how I can fix. Thanks for the heads up!!
I have completely rewritten this extension from the ground up. It is now fully compatible with 1.20.
Hi all, I've rewritten this extension from the ground up.
- Takes advantage of ResourceLoader
- Makes better use of JQuery for the URL rewrite.
- Upgraded to fancyBox v2
- Provides ability to customize fancyBox options
You can read more detailed information about this release on my blog.
One thing to note is that fancyBox v2 has a different license. fancyBox v2 is licensed under Creative Commons Attribution-NonCommercial 3.0 license. You are free to use fancyBox for your personal or non-profit website projects. You can get the author's permission to use fancyBox for commercial websites by paying a fee.
Let me know how this new version works for you!
If FancyBoxThumbs will be used with IE then you get a lot of linking errors.
FIX: Change all lines containing i.e.
.fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_n.png', sizingMethod='scale'); }
to
.fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='extensions/FancyBoxThumbs/fancybox/fancy_shadow_n.png', sizingMethod='scale'); }
Greg, Thanks for the heads up. I'll work this fix into the next release.
Actually, it was a pretty quick fix. I just added it to the repo.
I'm using version 1.0.1 with MW 1.17.0.
There's a slight glitch with the doubled dots which stem from the splitting algorithm for 4 character file extensions in FancyBoxThumbs.php somehow don't get replaced as intended in line 69:
.' var img_src = img_src.replace("..", ".");' // change ..jpg to .jpg but do not change .jpeg
As a workaround I changed line 68 to not insert (another) dot in the first place, which seems to solve the problem but surely is not a perfect solution:
.' var img_src = img_split1[0]+img_split2[0]+""+img_type;'
I found the culprit. There were some double dots in my relative path to the upload directory which got in the way. I changed lines 68ff. to the following so the replacement only affects the file type extension for which it is meant and not the whole path to the image file:
-
.' img_type = "."+img_type;' -
.' img_type = img_type.replace("..", ".");' // change ..jpg to .jpg but do not change .jpeg
-
.' img_src = img_split1[0]+img_split2[0]+img_type;' -
</syntaxhihglight>
Hi.
Great extension, but the problem is that when I enable it all my other jquery extensions die and the MW jquery based Usability Initiative functions stop working (e.g. WikiEditor). I suspect this is because this extension is not using jquery in noConflict mode? Is this possible?
Thanks
Thanks for the suggestion, Mitchelln. I've updated version 0.4 with noConflict mode. Hopefully I've implemented it correctly.
Thanks for that! I'll test it out and let you know how I get on :)
I'm afraid it still doesn't work :( As soon as I enable FancyBox all other MW jquery stuff dies :(
It might be the JQuery version I'm loading. I'll install the MW extension and test it out. Thanks!
Can you tell me what version of MW you are using? What version of JQuery is loading by default?
JFTR I'm using this extension (version 1.0.1) with MW 1.17.0 and some other extensions which rely heavily on jQuery (namely Header Tabs, version 0.9/106054; UsabilityInitiative, version 0.1.1; and Categorize, version 0.1.2) and all seems to be ok. Great extension!
EDIT: The extension doesn't work on the MW 1.16.0 clon (predecessor) of the above mentioned wiki. The JavaScript code gets loaded but not executed.
Hey!
I love this extension, but I got a little problem displaying the title in IE9.
I added three lines of code in FancyBoxThumbs.php (after line 69):
-
.' var img_src = img_split1[0]+img_split2[0]+"."+img_type;'
-
.' var img_src = img_src.replace("..", ".");' // change ..jpg to .jpg but do not change .jpeg
-
.' var img_title = $(this).children().first().attr("alt");'
-
.' if(img_title == \'\') { var img_title_split = $(this).attr("href").split(":"); img_title = img_title_split[1]; };'
-
.' $(this).attr("title", "<a href=\"" + $(this).attr("href") + "\">" + img_title + "</ a>");'
-
.' $(this).attr("href", img_src);'
-
.' $(this).attr("rel", "group");'
If I display a picture without an "alt"-tag in IE9 I get the title "undefined", but in Firefox 14.0a1 (and lower) everything works fine.
I appreciate your help,
I've installed FancyBoxThumbs-0.4 onto Mediawiki 1.16.2, and am not seeing the same behavior as I see on the example page for this extension. The example page works on all my browsers but my wiki does not. When an image is clicked instead of a box , or even that image's wiki page, it just shows a blank page with that image. I've watched the Apache error logs and have seen nothing related to this, and as far as I know I don't have any other JQuery extensions enabled. Any ideas are greatly appreciated.
The same for me. I noticed enabling FancyBoxThumbs impeaches SmoothGallery to function properly, maybe is there a conflict with it?
Had the same problem. Downloaded the extension, unzipped it and copied it with the original folder-name "gilluminate" to the webserver. There was the problem! Although I added the corrected line include_once("$IP/extensions/gillluminate/FancyBoxThumbs.php"); to my LocalSettings.php it didn't work because the extension itself assumed that it's in the directory FancyBoxThumbs. Renamed the extension-directory to FancyBoxThumbs changed LocalSettings to include_once("$IP/extensions/FancyBoxThumbs/FancyBoxThumbs.php"); and now everything works fine.
Sorry about the folder naming mix up. I've added better instructions to the Extension page about that. The reason it's weird is because I'm using github to host the files and letting github create the zip file. I'll consider changing my method, but for now I'm hoping a little added instruction helps people out.
Hi, I uses shared repository for my wiki, however seems it's not yet compatible with images placed in shared repository? Thanks.
You are right REX, it assumes the src to the image is a relative path to the root of the wiki. I'll have it fixed for external images in the next release (1.0). Thanks for the heads up.
Actually, I believe the plugin is doing it correctly. It might be a limitation of Fancybox. I'll keep investigating.
Hi,
thanks for the nice extension, I was very relieved to get rid of the RegEx crap that I was fighting with before.
However, there is one severe bug in FancyBox:
There's a hardcoded URL in FancyBoxThumbs.php, line 71:
.' $(this).attr("title", $(this).attr("title") + "<br />Origen: <a style=\"color:#888888;\" href=\"http://www.frikipedia.es/friki/ Archivo:"+pieces[pieces.length-1]+"\">" + pieces[pieces.length-1] + "</ a>");'
"http://www.frikipedia.es/friki/Archivo:" should not be hardcoded and must be replaced with the current URL and "/File:"
and "Origen" seems to be some other language than english, so I suppose it should be "Origin:" or "Source:"
Additionally I have two proposals:
1. The loading of jQueryMin from Google is a question of preference, but I prefer to keep it local. So I changed line 54
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
into
src="'.$wgScriptPath.$FBT_Dir.'/jquery.min.js"
(of course after putting jquery.min.js in the extension directory.
2. I added this to my css to make it clearer where the extension will load; it'll add a magnifier cursor:
a[rel^="group"] img { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; } #fancybox-overlay { cursor: -webkit-zoom-out !important; cursor: -moz-zoom-out !important; }
Hope this feedback is useful, Cheers,
I think it's important notes.
Also I observed this extension conflict with vector extension (version 0.2): vector extension load /skins/common/jquery.min.js.
Hi. Just tested FancyBoxThumbs 1.0 with MediaWiki 1.18.0rc1 and it works fine :)
Maybe be carreful with your jQuery version because MediaWiki now load
and use "jQuery JavaScript Library v1.6.4".
Thanks Alaflix! I have updated the JQuery version in this new version 1.0.1, but keep in mind that the JQuery in the extension will only load if JQuery is not already present. Meaning, if MediaWiki has loaded it's own latest supported version, the extension will automatically use that version; if for whatever reason that version does not load, the extension loads a version as a backup option. It is unlikely that the version in this extension will ever be loaded.
Excellent extension! I am very happy with it. I've tried several others, but this is the first to work flawlessly on Mediawiki 1.17.
Here is a suggestion for future updates that will make the extension work better with mobile devices such as the iPad and iPhone: place the Forward and Reverse buttons outside the border of the picture, and appear immediately. Right now, the Forward and Reverse buttons only appear when there is a mouse-over. But touch devices have no mouse-over capability, so it is awkward to use this on an iPad. If the buttons appeared immediately (rather than after a not-possible mouseover), the functionality would be greatly improved. Also, the Forward / Previous buttons are too small for most mobile devices (especially an iPhone). Larger buttons would be easier to see and use on the small screens of mobile devices.
This extension merely implements a JQuery plugin known as FancyBox. Your suggestions relate to FancyBox and not to the extension.
Hi,
I had fancybox working perfectly, then I set up short urls and the image box stopped working :
I get the following error reported in Explorer :
Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Tablet PC 2.0; .NET CLR 1.1.4322; Media Center PC 6.0; InfoPath.3; AskTbUT2V5/5.9.1.14019) Timestamp: Mon, 7 Mar 2011 00:28:13 UTC Message: Object doesn't support this property or method Line: 25 Char: 185 Code: 0 URI:
The enlarged images appears below the main page.
Regards
I've modified "FancyBoxThumbs.php Line 56" onto Mediawiki 1.16.5 ,FancyBoxThumbs0.7
Because "jquery.fancybox-1.3.4.css" not Loading.
Added ".$wgScriptPath."
$out->addScript('<link rel="stylesheet" href="'.$wgScriptPath.''.$FBT_Dir.'/jquery.fancybox-1.3.4.css" type="text/css" />');
To enable the Gallery for all pictures on the page, do the following:
1. Open the file: FancyBoxThumbs.php
2. Find the line:
.' $(this).attr("href", img_src);'
3. Insert the following line under found line:
.' $(this).attr("rel", "group");'
4. Save the file
Temporary solution. Better than nothing.
I've created a fork, adding some functionality (or, for the sake of being precise, customization) and would like it to merge to the main source for everyone to use freely. It corrects some bugs and, IMHO, works better. You can find it on here. Please credit me. Thank you.
EDIT: It may work in 1.17 only.
Hi all, Thanks for the interest and feedback. I do have plans to address all of these issues as well as implement gallery support. I created this plugin out of necessity at work and thought I'd share what I'd done knowing that it wasn't perfect and that I could continue to improve upon it. I have been slammed at work and with other things going on in my life right now, so I haven't been able to dedicate as much time as I had hoped. But I haven't forgotten about it, and I promise I'll work more on it.
The joy of open source is that you don't have to wait for me to do it. Please feel free to build upon this code and add it to the project.
Thanks
I'm not able to make FancyBox running in my Mediawiki, I got the error "Property or method not supported by the object jquery.fancybox-1.3.4.pack.js"
Hi, I saw the demo of your extension and I found it amazing, sò following step by step the instructions I dowloaded and installed FancyBoxThumbs on my wiki (1.16.1), but I wont run. With galleries or single thumbnails when I click on an image, it is opened at the bottom of the gallery page, and the browser (I use IE8) report me the following error:
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) Timestamp: Sun, 6 Feb 2011 00:12:25 UTC Property or method not supported by the object jquery.fancybox-1.3.4.pack.js?270 Line: 25 Char: 185 Code: 0 URI: http://192.168.1.230/mediawiki/extensions/FancyBoxThumbs/fancybox/jquery.fancybox-1.3.4.pack.js?270
Is there any chance to solve the problem ? Thanks !
Sounds like a jQuery conflict. Maybe it conflicts with your theme. Could you try it with the MediaWiki Vector Skin and give a feedback?. Thanks
I normally use the vector skin and also, to avoid conflict with other extensions, I disabled all of them, but nothing changed. So, I tried to delete the FancyBox extension (I made a lot of tries so I could misconfigured something) and reinstalled it as new. Now got the error "img_split1[1] is undefined" to the following line:
<script type="text/javascript">$(document).ready(function() {$("a.image").each(function(){var img_split1 = $(this).children ().first().attr("src").split("/thumb");var img_type = img_split1[1].substr(img_split1[1].length -4);var img_split2 = img_split1 [1].split(img_type);var img_src = img_split1[0]+img_split2[0]+"."+img_type;var img_src = img_src.replace("..", ".");$(this).attr ("href", img_src);});$("a.image").fancybox();});</script>
Also just to be shure I'm using the right version, I downloaded it from the http://www.gilluminate.com/extensions/ site. Again, thanks a lot in advance for the support.
I made another test installation with a blank MW 1.16.2 and the blank extension and for me it works. I know that the split function is handled in different ways by different browsers - but I tested it with IE7+, Opera, Firefox and Chrome.
Anywhere there seems to be a jQuery conflict in your installation.
Today I tried to put in the FancyBoxThumb.php the following line:
.'alert(img_split1 = $(this).children().first().attr("src"));'
just between .' and var_img... of
.'var img_type = img_split1[1].substr(img_split1[1].length - 4);'
This just to see if attr("src") had something wrong in it, due the fact the error I usually got was in splitting this attribute. After restarted httpd, the code messaged box me the attribute (the correct path of the image), but I don't know how, the FancyBox start running correctly. So I removed the debug code from the FancyBoxThumbs.php and restarted httpd again and with my great happyness everything was ok. I tried with IE8 and Firefox and was OK with both. I really think I didn't nothing special and everything start running by itself (??). Now also my wiki have that great extension. Really thanka a lot for all the support you gave me.
