Recent Topics

[plugin] jQuery Imagefit plugin

Started by on Jul 18, 2008 – Contents updated: Jul 18, 2008

Jul 18, 2008 22:37    

This plugin will adjust the size of an image to the container it's in. That way an image in a post will not exceed the borders of the post even if it's bigger. You simply install the plugin and it will do it's job. It relies on the image being spanned within a div with class image_block, which will be the case if you use the File Manager to add images to your post or if you use the [IMG] button on the toolbar.

[url=]Download the latest version[/url]

example code:


<div class="image_block"><img src="image.png" alt="some alt text" title="some title" /></div>

This is code that's automatically generated if you insert an image using B2evolution. You can also add it manually to a post.
You might want to adjust the class. You can even use an ID. That's done in the settings of the plugin. You can even add several classes or ID's and it will cater for all of them.
Several images in [url=]my blog[/url] work with the plugin. You can click all images for a full scale version. That's done with the jQuery lightbox plugin. They work beautifully together.

The plugin is tested in Firefox 3, Opera and Internet Explorer 7.

Have fun

Jul 23, 2008 18:14

You should comment out the script in jQuery Lightbox plugin or pages fail the validation test


$jqcode '<script type="text/javascript"><!--//

I wrote it here because I didn't find a jQuery Lightbox plugin thread.

Thanks for the plugin, I like it very much!

Jul 23, 2008 19:03

Hi sam2kb

Thanks for the feedback.

I have the Lightbox fixed in SVN ( however I haven't got a clue what is in the most recent released version. My head runs over caused by the many plugins I work on simultanously:


$jqcode '<script type="text/javascript">
        (function($) {
            $(function() {

This code however is prone to revision. Blueyed wrote a script that caches all javaScript. It needs the script to be in a file rather than in the <head> section, so this is going to be moved and incidentally that will solve the validation problems.

I did fix the javaScript for the Imagefit plugin and that cured this particular problem in IE7 (the only version I could get hold on). That fix is in Imagefit plugin version 0.9.1, so 0.9 is bad and 0.9.1 is good. Maybe it is not good enough for IE6. Please check what version for the plugin you have.

Also the p4wn Chess plugin doesn't work in IE (6 & 7). I haven't found the problem there. If anyone has suggestions, please let me know.

Have a nice day

Jul 23, 2008 19:26

Hi Afwas,

I didn't install the Imagefit plugin, I just opened your link in IE6/IE7. Don't know if you have the current version installed, but for now images are still double-sized in IE6.

Also the p4wn Chess plugin is working well on my IE6, I'm using [url=]MultipleIEs[/url]

Jul 24, 2008 17:38

Can anyone with IE6 have a look at
The images should look fine (scaled to the width of the container).
I haven't found a way (yet) for the p4wn Chess plugin in IE7. My guess is it doesn't load the script without an explicit call at the <body> tag. I tried things like these:


// addEvent(window,"load",H);

in many variations.

Jul 25, 2008 01:31

Well done!

Everything is working in IE6/IE7

Jul 25, 2008 01:36

Great. I hate debugging for IE. But that's solved now. Thanks for the help.

Jan 20, 2012 21:40

Plugin updated to v1.0.0

Supports more skins by default

Jan 21, 2012 02:27

sam2kb wrote:

Plugin updated to v1.0.0

Supports more skins by default

new topic and download links please (:

Jan 21, 2012 02:29

Download link is in the first post.
Why do we need a new topiс for the same plugin?

Jan 28, 2012 08:57

I get this after uploading plugin and switching to available plugins list


Warning: Unexpected character in input: '\' (ASCII=92) state=1 in /home/****/public_html/blog/plugins/jquery_imagefit_plugin/_jquery_imagefit.plugin.php on line 78

Jan 28, 2012 23:51

There was a bug. Please update to v1.0.1

Feb 13, 2012 11:18

hello all,
u have to try this:


(function( $, undefined ) {
        imageFit:function(mode) {
        return this.each(function() {
            var $this = $(this);
            var $parent = $this.parent();
            var imgW = $this.width();
            var imgH = $this.height();
            var contW = $parent.width();
            var contH = $parent.height();
            var imgWHratio = imgW/imgH;
            var contWHratio = contW/contH;
            var marginLeft=0;
            var marginTop=0;
                    marginLeft = Math.floor((contW-$this.width())/2);
                }else if(contWHratio<imgWHratio) {
                    marginTop = Math.floor((contH-$this.height())/2);
                    //do nothing
                    marginTop = Math.floor((contH-$this.height())/2);
                }else if(contWHratio<imgWHratio){
                    marginLeft = Math.floor((contW - $this.width())/2);
                    //do nothing
        }//fitImage end
})( jQuery );
// end of image-fit


Form is loading...

powered by b2evolution – This forum is powered by b2evolution CMS, a complete engine for your website.