Some images don't stretch

[pushpinderbagga]

Hello,

Thanks for the awesome plugin. I just wanted to let you know that some images don't stretch perfectly.

Above is the screenshot of the image in a browser. Other images are scaling perfectly - just one in each lot doesn't. The markup is as below

<div id="maximage">
    <img src='https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-ash4/s720x720/1044042_1379632728925280_367427947_n.jpg' width='720' height='450' />
    <img src='https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-frc3/s720x720/988674_1379652318923321_2117957205_n.jpg' width='720' height='540' />
    <img src='https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-frc1/s720x720/999042_1379632772258609_1347361622_n.jpg' width='720' height='450' />
    <img src='https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn1/156516_1379641378924415_160664576_n.jpg' width='640' height='640' />
    <img src='https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-frc3/s720x720/988622_1379636458924907_642390145_n.jpg' width='575' height='720' />
</div>

The Javascript Markup is as below

        $("#maximage").maximage({
            cycleOptions: {
                timeout: 0,
                prev: '.arrow_left',
                next: '.arrow_right',
                pause: 1
            },
            onFirstImageLoaded: function(){
                /* Hide Loading */
                $('#maximage').show('fast');
            },
            cssBackgroundSize: false,
            backgroundSize: function( $item ){                
                if ($item.data('h') > $item.data('w')) {
                    if ($.Window.data('w') / $.Window.data('h') < $item.data('ar')) {
                        $item
                        .height(($.Window.data('w') / $item.data('ar')).toFixed(0))
                        .width($.Window.data('w'));
                    } else {
                        $item
                        .height($.Window.data('h'))
                        .width(($.Window.data('h') * $item.data('ar')).toFixed(0));
                    }
                } else {
                    if ($.Window.data('w') / $.Window.data('h') < $item.data('ar')) {
                        $item
                        .height($.Window.data('h'))
                        .width(($.Window.data('h') * $item.data('ar')).toFixed(0));
                    } else {
                        $item
                        .height(($.Window.data('w') / $item.data('ar')).toFixed(0))
                        .width($.Window.data('w'));
                    }
                }
            }
        });

The javascript part is being sourced from the example at your website.

Thanks!

[akv2]

Hey man, Is the demo site working correctly for you?

Often times it is most helpful if I can see the error in action. Can you post the issue somewhere that I can view it?

[pushpinderbagga]

@akv2 thanks for the reply mate. The demo is working correctly but there is an issue when this plugin uses remote images I believe. I shall give you a jSFiddle soon.

1. Why does it need the width and height of the image? Doesn't the plugin use the new Image() in Javascript to get these fields?
2. When these remote images are loaded the first time - that is where the issue lies. When I do a CTRL + F5 these plugin simply doesn't show the images at all.

Cheers!

[pushpinderbagga]

Hey mate,

The issue was with images not being loaded before the width was set. I modified the function to do so so the setting of data, margins and dimensions only take place once all the images are loaded.

                        $('.mc-loader').children('img').each(function(i){

                            var $img = $(this), theImage, imageWidth, imageHeight;

                            if($img.hasClass('not-loaded')){
                                if( $img.height() > 0 ){

                                    $(this).removeClass('not-loaded');

                                    var $img1 = $('div.mc-image-n' + i).children('img').first();

                                    theImage = new Image();                                    
                                    theImage.onload = function() {
                                        imageWidth = this.width;
                                        imageHeight = this.height;

                                        $img1
                                        .data('h', imageHeight)
                                        .data('w', imageWidth)
                                        .data('ar', (imageWidth / imageHeight));

                                        Old.onceLoaded(i)

                                    };
                                    theImage.src = $img1.attr("src");

                                }
                            }
                        });

May be we can improve this function so the images are shown as soon as they are loaded and dont wait up for all of the lost of load. Cheers!

[akv2]

Nice man! Can you confirm this works in IE back to IE7? If so, want to submit a pull request and I will add it to the base?

Thanks for looking into this!

[pushpinderbagga]

Hey mate, I just checked it - it works on IE 7 too. There is just one issue regarding the margins of these pictures in all browsers - am now gonna repair that and then will post the solution here.

I also would later want videos to work seamlessly in all browsers - will also contribute to that functionality.

Sure, will submit a pull request post it.

Cheers!

[pushpinderbagga]

This code works for me. Just a tip for bootstrap users trying to implement this - IMG tag has a max-width:100% by default which will cause this to break.

What are the issues you have for Video stretching mate - lemme know and lets work and resolve those!

Cheers!

[lambdaka]

Hi, plugin is great I used it several times..! Thanks for that tips, it fixed the strecthed image problem on the site I m workin on.!! It happened that starting the 6th slide, the images were width stretched.

But now sometimes I can see the first slide loaded big and being resized immediately..

Do you think it's possible to combine the two solutions..? Or maybe make something different for the first slide..? here is the site : http://goo.gl/6ErDgd thanks a lot !