Recent Topics

[plugin] jQuery Imagefit plugin

Thread started by , Fri Jul 18, 2008 22:37 – Last touched: Fri Jul 18, 2008 22:37
Started by , 07/18/08

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=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

Comment from:

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!

07/23/08 @ 18:14

Comment from:

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

07/23/08 @ 19:03

Comment from:

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]

07/23/08 @ 19:26

Comment from:

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.

07/24/08 @ 17:38

Comment from:

Plugin updated to v1.0.0

Supports more skins by default

01/20/12 @ 21:40

Comment from:

sam2kb wrote:

Plugin updated to v1.0.0

Supports more skins by default

new topic and download links please (:

01/21/12 @ 02:27

Comment from:

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

01/21/12 @ 02:29

Comment from:

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
01/28/12 @ 08:57

Comment from:

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

02/13/12 @ 11:18
powered by b2evolution – This forum is powered by b2evolution CMS, a complete engine for your website.