Caption overlapping image

[PerBerntsen]

First of all, thank you for a great script. It's perfect for my use, and does almost everything I want out of the box.

There is one small problem - when the image fills the height of the viewport, the caption overlaps the image. I prefer the image to overlap the caption, so I gave the imgCSS a zIndex of 1000. This works on desktop browsers, but on my Android (4.2.2) phone it only works on the first image. Swipe to the next, and the problem is back. Is there any way to get around this?
(Swiping doesn't work properly with the Android Browser. You can swipe from the first image to the second, the second displays with no border, and stops reacting to touch)

I have a test page up at http://perberntsen.com/Test/metsa1.php
I should mention that I'm using Retina Images (https://github.com/Retina-Images/Retina-Images/) to load @2x images, and it seems to be working perfectly with ABigimage.

[makryl]

Thank you! I'll check this soon ...

[makryl]

Just tested it in "UC Browser" on Android 4.4 - same problems as you described. But works fine in mobile Chrome/Firefox/Opera
Do you use "UC Browser"?

[PerBerntsen]

Sorry I wasn't more specific - on Android 4.2.2 the problem shows in all tested browsers - Chrome, Firefox, and Opera. (and the Android browser) I have just updated all the browsers to the latest version, and the problem persists. (I don't have the UC browser)
I was also able to test briefly on iPhone 4 and iPad 2, same problem here.

Thanks for looking into this!

[makryl]

Can you set imgCSS: 1000 at your test page? This setting doesen't exist on your test page at the moment.

[PerBerntsen]

I see now that zIndex is declared twice - to 102 in line 499, and to 1000 in line 503.
I deleted my declaration in line 503, and changed line 499 from 102 to 1000. No change - the problem is still there. (and I think the 1000 declaration would have overridden the 102 declaration anyway, since it appeared further down in the code - but redundant code should of course be avoided ...)

[makryl]

There is some kind of bug or feature with z-index and CSS3 translate3d for swiping. I'll find some info about this later. At the moment you can use following options:

$('a[href$=".jpg"]').abigimage({
    boxCSS: {
        zIndex: 102
    },
    bottomCSS: {
        zIndex: 101
    },
    onopen: function (target) {
        this.bottom.html(
            $('img', target).attr('alt')
        );
    }
});

Btw, you don't need to change plugin's code, just use options.

[PerBerntsen]

Thanks a lot, this works.
Would it be possible to hide the caption div (display:none) whenever the image starts to overlap the caption? This is only for aesthetic reasons, to hide the black box on both sides of the image. I don't do javascript myself, so I have no idea if this is possible ...

[makryl]

Try this:

var abigimage = $('a[href$=".jpg"]').abigimage({
    boxCSS: {
        zIndex: 102
    },
    bottomCSS: {
        zIndex: 101
    },
    onopen: function (target) {
        this.bottom.html(
            $('img', target).attr('alt')
        );
    }
});

abigimage.img.bind('load', function() {
    if (abigimage.img.height() > $(window).height() - abigimage.bottom.height()) {
        abigimage.bottom.fadeOut('fast');
    } else {
        abigimage.bottom.fadeIn('fast');
    }
});

[PerBerntsen]

Thank you, but this did not have any effect. If it's difficult to do, I could change the caption's background-color to the same as the overlay. It looks quite good, actually.
BTW, I made a donation from your homepage - hope you received it.

[makryl]

Very much thanx for donation! 👍 It's received, just checked.

I forgot that you using image borders, so just change height() to outerHeight() at img and bottom. Because height() dont includes borders, and outerHeight() includes. Notice, that $(window).height() should not change.

var abigimage = $('a[href$=".jpg"]').abigimage({
    boxCSS: {
        zIndex: 102
    },
    bottomCSS: {
        zIndex: 101
    },
    onopen: function (target) {
        this.bottom.html(
            $('img', target).attr('alt')
        );
    }
});

abigimage.img.bind('load', function() {
    if (abigimage.img.outerHeight() > $(window).height() - abigimage.bottom.outerHeight()) {
        abigimage.bottom.fadeOut('fast');
    } else {
        abigimage.bottom.fadeIn('fast');
    }
});

[PerBerntsen]

This works, but if you turn your phone from portrait to landscape, (or from landscape to portrait) it doesn't affect the open image - you have to swipe to the next for the bottom div to disappear (or appear.)
May be it's possible to change that behavior, but I'm also perfectly happy with changing the bottom div's background color to the same as the overlay, which solves the whole problem.
Thanks anyway!

[PerBerntsen]

I have to trouble you with one more question -
I'd like to have a smaller image border on small screens, so how can I implement this css in the script? (imgCSS)

@media screen and (max-width:640px) {
img {
border: 10px solid white;
border-bottom: 12px solid white;
}
}

I've tried fiddling with the script, but I can't figure out the correct syntax.

[makryl]

Use same function for image load event and window resize event.
For the second question: add class to img using imgAttrs option, and use it in CSS.

var abigimage = $('a[href$=".jpg"]').abigimage({
    boxCSS: {
        zIndex: 102
    },
    bottomCSS: {
        zIndex: 101
    },
    imgAttrs: {
        class: 'abigimage-img'
    },
    onopen: function (target) {
        this.bottom.html(
            $('img', target).attr('alt')
        );
    }
});

function adjustABigImageBottom() {
    if (abigimage.img.outerHeight() > $(window).height() - abigimage.bottom.outerHeight()) {
        abigimage.bottom.fadeOut('fast');
    } else {
        abigimage.bottom.fadeIn('fast');
    }
}

abigimage.img.bind('load', adjustABigImageBottom);
$(window).bind('resize', adjustABigImageBottom);

.abigimage-img {
    border: 20px solid black;
    border-bottom: 25px solid black;
}
@media screen and (max-width:640px) {
    .abigimage-img {
        border: 10px solid black;
        border-bottom: 12px solid black;
    }
}

[PerBerntsen]

Now everything works perfectly! I'm really pleased.
I will certainly mention you and your script on the credits page of my new site, which will hopefully be launched before Christmas.
What I really like about ABigimage is that there are no annoying arrows, navigation overlays, etc. and the touch functionality is a must for me. And I was very pleased to see that it works perfectly with retina-images. Thank you!

[makryl]

Thanx! I'm glad to help you.