Quantcast
Channel: MyBB Community Forums - Tutorials
Viewing all articles
Browse latest Browse all 685

[1.8] Image Resizer (Show real size of scaled image)

$
0
0
Ps. Only work with theme based in 1.8 default theme.

This is similar solution used in xenforo

1 - Create new file with name resizer.js in Notepad++
1.1 - Copy code below in resizer.js
PHP Code:
// jQuery.naturalWidth / jQuery.naturalHeight plugin for (already-loaded) images

// Triple-licensed: Public Domain, MIT and WTFPL license - share and enjoy!

(function($) {
  function 
img(url) {
    var 
= new Image;
    
i.src url;
    return 
i;
  }

  if (
'naturalWidth' in (new Image)) {
    $.
fn.naturalWidth  = function() { return this[0].naturalWidth; };
    $.
fn.naturalHeight = function() { return this[0].naturalHeight; };
    return;
  }
  $.
fn.naturalWidth  = function() { return img(this[0].src).width; };
  $.
fn.naturalHeight = function() { return img(this[0].src).height; };
})(
jQuery);

$(
document).ready(function() {
    function 
imageLoaded() {
        var 
resizelang 'Click on this image to display the full size version.';
        var 
resizedsize =  $(this).width();
        var 
origsize = $(this).naturalWidth();
        if (
origsize!=resizedsize) {
            $(
this).wrap('<div></div>').attr('title'resizelang).on('click', function() {
                if ($(
this).is('[title]')) {
                    $(
this).removeAttr('title');
                }
                else {
                    $(
this).attr('title'resizelang);
                } 
                var 
parentheight = $(this).parent().height();
                if (!$(
this).hasClass('resize')) {
                    $(
this).addClass('resize').parent().css('height'parentheight+'px');
                }
                else
                {
                    $(
this).removeAttr('class').parent().css('height''');
                }
            });
        }
    }
    $(
'.scaleimages img').each(function() {
        if( 
this.complete ) {
            
imageLoaded.callthis );
        } else {
            $(
this).one('load'imageLoaded);
        }
    });
}); 
2 - Upload resizer.js in root/jscripts/
3 - In ACP go to headerinclude template
3.1 - Find:
PHP Code:
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/general.js?ver=1800"></script> 
3.2 - Add below:
PHP Code:
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/resizer.js"></script> 
3.3 - Add in global.css code below:
PHP Code:
.resize {
    
max-widthnone !important;
    
positionabsolute !important;
    
z-index20 !important;





Viewing all articles
Browse latest Browse all 685

Trending Articles