[plugin] jQuery Imagefit plugin

Reply to topic
b2evolution Support Forums -> b2evolution support area -> Plugins & Extensions
« Notice: Undefined index: text :: LIGHTBOX image is "Untitled" »
Author Message
afwas
Post Posted: Fri Jul 18, 2008 22:37     Topic subject: [plugin] jQuery Imagefit plugin

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=http://sourceforge.net/projects/evocms-plugins/files/jquery_imagefit_plugin/]Download the latest version[/url]

example code:

PHP

<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=http://www.blog.hemminga.net/index.php?blog=8&orderby=ptyp_ID%20datecreated]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
Back to top
 
waltercruz
Post Posted: Wed Jul 23, 2008 16:49

I will test it now!
Back to top
 
sam2kb
Post Posted: Wed Jul 23, 2008 17:26

This may help you... ;)

This is how IE6 displays images on your site

http://ru.b2evo.net/media/images/13.JPG

Chess board in IE7

http://ru.b2evo.net/media/images/14.JPG
Back to top
 
sam2kb
Post Posted: Wed Jul 23, 2008 18:14

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

PHP

$jqcode = '<script type="text/javascript"><!--//
jQuery.noConflict();

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

Thanks for the plugin, I like it very much!
Back to top
 
afwas
Post Posted: Wed Jul 23, 2008 19:03

Hi sam2kb

Thanks for the feedback.

I have the Lightbox fixed in SVN (http://sourceforge.net/projects/evocms-plugins/) 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:

PHP

$jqcode = '<script type="text/javascript">
    //<![CDATA[
        jQuery.noConflict();
        (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
Back to top
 
sam2kb
Post Posted: Wed 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=http://multipleies.en.softonic.com/]MultipleIEs[/url]
Back to top
 
afwas
Post Posted: Thu Jul 24, 2008 17:38

Can anyone with IE6 have a look at http://www.blog.hemminga.net/index.php?blog=8
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:

PHP

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

in many variations.
Back to top
 
afwas
Post Posted: Fri Jul 25, 2008 01:17

Released [url=http://downloads.sourceforge.net/evocms-plugins/jquery_imagefit_plugin-0.9.3.zip?use_mirror=osdn]jquery_imagefit_plugin-0.9.3.zip[/url] that should cure problems in IE. Check my blog for proof ;) I still haven't tested in the dreaded IE6 and older.

Have fun
Back to top
 
sam2kb
Post Posted: Fri Jul 25, 2008 01:31

Well done!

Everything is working in IE6/IE7
Back to top
 
afwas
Post Posted: Fri Jul 25, 2008 01:36

Great. I hate debugging for IE. But that's solved now. Thanks for the help.
Back to top
 
sam2kb
Post Posted: Fri Jan 20, 2012 21:40

Plugin updated to v1.0.0

Supports more skins by default
Back to top
 
tilqicom
Post Posted: Sat Jan 21, 2012 02:27

sam2kb wrote:

Plugin updated to v1.0.0

Supports more skins by default

new topic and download links please (:
Back to top
 
sam2kb
Post Posted: Sat Jan 21, 2012 02:29

Download link is in the first post.
Why do we need a new topiс for the same plugin?
Back to top
 
grem
Post Posted: Sat Jan 28, 2012 08:57

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

Code

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
Back to top
 
sam2kb
Post Posted: Sat Jan 28, 2012 23:51

There was a bug. Please update to v1.0.1
Back to top
 
thomasanderson
Post Posted: Mon Feb 13, 2012 11:18

hello all,
u have to try this:

Code

(function( $, undefined ) {
 
    $.fn.extend({
        imageFit:function(mode) {
        return this.each(function() {
            var $this = $(this);
            var $parent = $this.parent();
            $parent.css({"overflow":"visible"});
            $this.css({width:"100%",height:"auto",margin:0,padding:0,border:"none"});
 
            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;
 
            if(mode=="fit"){
                if(contWHratio>imgWHratio){
                    $this.css({height:"100%",width:"auto"});
                    marginLeft = Math.floor((contW-$this.width())/2);
                    $this.css({"margin-left":marginLeft});
                }else if(contWHratio<imgWHratio) {
                    marginTop = Math.floor((contH-$this.height())/2);
                    $this.css({"margin-top":marginTop});
                }else{
                    //do nothing
                }
            }
 
            if(mode=="pan"){
                if(contWHratio>imgWHratio){
                    marginTop = Math.floor((contH-$this.height())/2);
                    $this.css({"margin-top":marginTop});
                    $parent.css({"overflow":"hidden"});
                }else if(contWHratio<imgWHratio){
                    $this.css({height:"100%",width:"auto"});
                    marginLeft = Math.floor((contW - $this.width())/2);
                    $this.css({"margin-left":marginLeft});
                    $parent.css({"overflow":"hidden"});
                }else{
                    //do nothing
                }
            }
        });
        }//fitImage end
    });
 
})( jQuery );
// end of image-fit

Source: code.google.com
Back to top
 
  XML Feeds
More on RSS