akv2 / maximage Goto Github PK

The line 73 in jquery.maximage.js has an issue.

if (typeof settings == 'object' || settings === undefined) config = $.extend( $.fn.maximage.defaults, settings || {} );

It's supposed to be:

if (typeof settings == 'object' || settings === undefined) config = $.extend({}, $.fn.maximage.defaults, settings || {} );

because according to the jQuery docs http://api.jquery.com/jquery.extend/ the first parameter gets to be modified.

First of all, great plugin!

I worked with it for some days till I took notice that you can't have two divs with a ".slideshow" class activated by maximage on the same page.
I would like to have multiple slideshows but always displayed separately.
They are non-displayed until they are shown.
Only the first one works…

Is there a way to make them all work?

I have found it is impossible to get 10-second iterations between slides, speed is set to 3751 and its 2 seconds too long, I do 3750 and its 2 seconds too short, I do 3750.5 and it's still 2 seconds too long, I have even tried 3750.1 and it still 2 seconds too long.

Is there a way to get multiple fill elements working on the same page?

Hi,

first of all thanks for your great plugin!

I have an issue during loading the site. Unfortunately the Images already appear one second before the slideshow is shown.I guess it´s because the imgs are already there before the javascript files are loaded, which are nesting the images inside the maximage structure....? Is there a way to avoid this? Im using your plugin inside a wordpress, see link below. Help is much appreciated!

http://bao-nghi.com/site/the-cart/

Regards
Phil

I got some console errors in firefox when using maximage along with jquery cycle. And maximage would only apply to the first element of the cycle.

Error Message:

useless setTimeout call (missing quotes around argument?)

I fixed it with this change on line 622:

•                                                   to = setTimeout( Adjust[settings]($self), 200 );
  

•                                                   to = setTimeout(function(){Adjust[settings]($self);}, 200 );
  

hi
if u do this

#maximage {
    display:none;
    position:relative !important; /* instead of the default "absolute" */
}

the caption links behaves like any other text when u hover over it? non-clickable. even the video is now a simple plain cover image.

Hey mate, the maximage implementation I did suddenly stopped working and the issue I found was with the Utils.sizes().h not giving a value when it was set in the data of the $.Window variable.

Any clues why that is happening? And also the possible reason of using the Utils.sizes().h instead of $(window).height() etc?

Cheers!

Took me a while to figure out the problem. But if there is one single image in #maximage then the javascript will throw up an error and won't work.

Is there a bug fix planned?

Hello,
I'm working with a number of images of a standing model and would prefer to crop the feet rather than the head, is it possible to anchor the image so the top of the image is always fixed to the top of the screen?

For example:

Centered Crop

vs.

Top Fixed Crop

When using a fixed header and maximage2, the header will fail to be fixed during each slide/fade. After the animation, the header works again.

EDIT:
It's a bug in webkit!

Hi,
MaxImage is great but is there any way to have it work with images wrapped in links? I need to wrap my images in links so they can go somewhere as well as have tooltips connected to them via the jquery tooltip plugin.

Currently, if I wrap the image in a link, each link takes up its own slide in the cycle somehow?

Hi, great plugin!

I am using it for a video background slideshow and i noticed that the videos constantly keep reloading. When I view the network panel in chrome to see how the slide assets are loading they just keep reloading. Is it possible to prevent that and have them load only once? Or is there a reason why they keep reloading?

I also noticed that it does this in your big bunny video background example (http://www.aaronvanderzwan.com/maximage/examples/html5video.html). The reason why I want to prevent this is because it is causing the videos to playback a little choppy even after they have loaded the first time. I have 5 videos loading into the slideshow already and that is a lot to begin with and since they keep reloading it causes the videos to playback poorly.

thanks

Scratch that duplicate includes of the same file caused this error nothing to do with maximage! Sorry.

Line: 236
Error: '$.Slides[...].content.length' is null or not an object

Guessing it's a similar issue to the last one I filed...?

Hello,
Is it possible to use Maximage with Picturefill?

http://scottjehl.github.io/picturefill/

Thanks

Martin

How to use MaxImage with Cycle v2?
Just load cycle2.js instead of cycle.js?
Any other modification is needed?

Hello,
It's a really nice script but I have to use it with jQuery 1.9.1 on a project, and I'm really struggling with this.
I tried to download the fix for 1.9 commit, but the customized.html does not work.
Could you please tell me what could be wrong ?
Best regards,
David

Hi, plugin is great I used it several times..!
I found that thread : #21

Thanks for the 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 (at original size) 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 !

I've add data-href values to my images. They are applied to the .mc-image div.
However I cannot bind a onclick event on the div.

I've added in the document ready:

$('.mc-image').click(function() {

console.log('working?'); // For testing
});

But no 'working?' in the firebug console.

Also not working:

$('.mc-image').each(function() {
$(this).attr('onclick', 'console.log("working?");');
});

The onclick attribute is added when I inspect the element with Firebug but still no action.

What is the way to add onclick to the div/image?

I have gotten the video to load into the slide but it will not autoplay, I have used the correct HTML tags and it still won't autoplay, Is there something else I can do to make the video play?

<div class="slides-container">
      <img src="images/people.jpeg" alt="Cinelli">
      <video class="html5video" preload="auto" autoplay loop="loop"><source src="video.mp4" type="video/mp4" /></video>
      <img src="images/surly.jpeg" width="1024" height="682" alt="Surly">
      <img src="images/cinelli-front.jpeg" width="1024" height="683" alt="Cinelli">
      <img src="images/affinity.jpeg" width="1024" height="685" alt="Affinity">

    </div>

I have literally tried everything HTML but nothing js, is there an internal function I have to use?

in the older browser
There have this code in doneResizing function:
$($.Scroll).addClass('mc-hide-scrolls');
$($.Scroll).removeClass('mc-hide-scrolls');

because doneResizing function will recall every 200ms.
When your web body have a scroll bar(overflow-y:scroll),
it will force to scroll to top.
When i remove this two code, all will be fine.

This project is a good and useful project. Nice.

Hi - really not sure what's going on and I am pulling my hair out over this - everything is working perfectly when I preview this locally, but when I upload it to any server, it breaks and I just get a scrollbar and all the images stacked on top of each other. I have the exact same file structure, copying the entire folder to the server with all the same paths and cannot seem to figure this out.

Did some troubleshooting and all my js files are being loaded correctly, can you think of any other reason why this could be happening?

See: http://www.tchoupindustries.com/test/index-test.html

Any and all help would be very very much appreciated.
Thanks!
Erin

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!

Is it possible to use video tag in slides?

I just tried it, but it failed.

I have a strange problem here:
http://jackyon.com.s146246.gridserver.com/thehappymonk/

I'm using the queryloader2 plugin and maximage2 plugin. it is works fine on all the modern browsers, but is showing the javascript error on IE8 or below. Even ie9 shows an error, but it still can normally run.

js error: 'a.Slide[...].content.length' is null or not an object.

when remove either plugin, the page run without errors.

plugin link for queryloader2: https://github.com/Gaya/QueryLoader2
plugin link for maximage2: https://github.com/akv2/MaxImage

this problem already drive me crazy few dayz. plz help me! thx!!

When using prototype & jQuery - even with noconflict - numerous extra slides are generated. See example: http://jsfiddle.net/verism/GYWQQ/1/

If the site is taller than the viewport in Mobile Safari (iOS6), the image don't fill the background.

When first loads (no scroll), everything is OK: http://cl.ly/KOOP
On first scroll, this happens: http://cl.ly/KOHk

The site is live at http://trijoiaconceito.com.br/

Maybe I'm doing something wrong? Any help?

BTW, EXCELLENT plugin, before this I used supersized, but yours is responsive and loads faster :D

I am using maximage2 on a project and on mobile orientation change I don't get the full width results. Is there a way to reinitialize maximage2 on the orientationchange event?

source: http://www.33demo.com/rulestoolset

Hello,

I am using your marvelous jquery plug-in, but I have one bug and I can't get rid of it.

So, I have a video element:

hi
any way it could be customized only to the front serving page with footers and headers and other such content not overlapping over it??

thanks
(something like this)

hi everyone,
the video background plays on PC but not on mobile, any suggestion ?
thank you :)

I have the same Problem like #14, but just if i use jquery.maximage.min.js.
if i minify jquery.maximage.js and use that file, it works fine.

Hi,

Can we use Maximage slider with cycle2 plugin options??

Hey, maintainer(s) of akv2/MaxImage!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library akv2/MaxImage is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "akv2/MaxImage",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!