Recent Topics

[plugin] jQuery Imagefit plugin

Thread started by
Started by

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: Alex

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!

2008-07-23 @ 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

2008-07-23 @ 19:03

Comment from: Alex

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]

2008-07-23 @ 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.

2008-07-24 @ 17:38

Comment from: Alex

Plugin updated to v1.0.0

Supports more skins by default

2012-01-20 @ 21:40

Comment from: Emin Ozlem

sam2kb wrote:

Plugin updated to v1.0.0

Supports more skins by default

new topic and download links please (:

2012-01-21 @ 02:27

Comment from: Alex

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

2012-01-21 @ 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
2012-01-28 @ 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

2012-02-13 @ 11:18


Form is loading...

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