[For 1.8] [1.8] Image Resizer (Show real size of scaled image)
#1
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
// 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 i = 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.call( this );
        } else {
            $(this).one('load', imageLoaded);
        }
    });
});
2 - Upload resizer.js in root/jscripts/
3 - In ACP go to headerinclude template
3.1 - Find:
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/general.js?ver=1800"></script>
3.2 - Add below:
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/resizer.js"></script>
3.3 - Add in global.css code below:
.resize {
    max-width: none !important;
    position: absolute !important;
    z-index: 20 !important;
} 

Reply
#2
what`s the meaning of ACP?
where can I find it?
in my cpanel or in my mybb control panel?
Reply
#3
(2014-09-02, 01:53 PM)capsool Wrote: what`s the meaning of ACP?
where can I find it?
in my cpanel or in my mybb control panel?

ACP --> Admin Control Panel of Mybb 1.8.
Something yoursite.xxx/admin
Reply
#4
Edit: delayed post

ACP => MyBB Admin Control Panel
Reply
#5
where is headerinclude?
Reply
#6
^ACP >Templates & Style > Templates » Your Templates » Ungrouped Templates > headerinclude

global.css ACP >Templates & Style > Themes > your theme > global.css
Reply
#7
my mybb is 1.6 :
in my header templetes there isnt headerinclude
please help me...

Im very sorry I dont pay attention to this < Ps. Only work with theme based in 1.8 default theme.>
Reply
#8
(2014-09-02, 02:05 PM)capsool Wrote: my mybb is 1.6 :
in my header templetes there isnt headerinclude
please help me...

Im very sorry I dont pay attention to this < Ps. Only work with theme based in 1.8 default theme.>

yes...
this is only to Mybb 1.8, and work only if used theme based in 1.8...
If user use Mybb 1.8 with theme based in 1.6 won't work.
Reply
#9
(2014-09-02, 02:05 PM)capsool Wrote: my mybb is 1.6 :
in my header templetes there isnt headerinclude
please help me...

Im very sorry I dont pay attention to this < Ps. Only work with theme based in 1.8 default theme.>

Just so you know, the headerinclude template isn't in the Header Templates. It's located under the Ungrouped Templates at the bottom.
Reply
#10
Works great, thank you very much.
[Image: MO3HXYH.jpg]
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)