The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Lightbox for too large images

View previous topic View next topic Go down

Lightbox for too large images

Post by 10spetter10 on January 10th 2014, 5:35 pm

Hi,

First of  all i'm not someone who speaks a lot of english, so there may be a lot of errors in my post.  Embarassed

I was trying to make a lightbox that only works for images that are too large to show in the div of the post. I have at the moment a code that almost works perfectly but, sometimes it doesn't give the class to images that are too large. When I refresh then is it sometimes fixed for that image but than another image doesn't have the class.  :/ 


Code:
$(function () {
    var maxWidth = $('.entry-content').width()-4;
 
    $('.entry-content img').each( function() {
    var imgWidth = $(this).width();
 
        if(imgWidth >  maxWidth)
        {
            $(this).addClass('verkleind');
            $(this).width(maxWidth);
        }
 
    });
 });
 
jQuery(document).ready(function() {
    $('.verkleind').click(function(e) {
        var image_src = $(this).attr("src");
        var mHeight = $(window).height();
        var mWidth = $(window).width();
 
        if ($('#lightbox').length > 0) {
            $('#content2').html('<img src="' + image_src + '" />');
            $('#lightbox').show('slow');
        }
        else {
            var lightbox =
            '<div id="lightbox">' +
                '<p>X</p>' +
                '<div id="content2">' +
                    '<img src="' + image_src +'" />' +
                '</div>' +
            '</div>'+
           '<style type="text/css">#content2 img{max-width: ' + mWidth +'px; max-height: ' + mHeight +'px;}</style>';
            $('body').append(lightbox);
        }
    });
    $('#lightbox').live('click', function() {
        $('#lightbox').hide();
    });
});
It was made for punBB.


Spetter
avatar
10spetter10
Forumember

Posts : 195
Reputation : 82
Language : Dutch

Back to top Go down

Re: Lightbox for too large images

Post by 10spetter10 on January 15th 2014, 6:53 pm

*Bump* Embarassed
avatar
10spetter10
Forumember

Posts : 195
Reputation : 82
Language : Dutch

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum