class wordt niet aangepast bij al de afbeeldingen

[p3t3r]

Hallo,

Een tijdje geleden heb ik eens geprobeerd een lightbox te maken die enkel werkt voor 'te grote' afbeeldingen aan de hand van een aantal tutorials.
De bedoeling was dat ik deze liet verkleinen tot ze in het scherm pasten en dan een kader rond zich kregen, zodat het zichtbaar was dat hierop de lightbox werkt.

Voor het grootste deel werkt dit allemaal. Enkel zit ik met het probleem dat het script soms een afbeelding vergeet die te groot is. Hier zit totaal geen patroon in, soms is het zelfs zo dat hij geen enkele afbeelding verkleint.

Mijn code:
[JS]// geef te grote afbeeldingen class verkleind
$(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);
}

});
});

// lightbox
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();
});
});[/JS]

Ik hoop dat iemand hier een antwoord op heeft.

Alvast bedankt

 

[Milenko]

En als je de functie die de classes meegeeft, nou ook eens de document.ready plaatst? Waarschijnlijk zijn de afbeeldingen zo groot, dat het laden ervan erg lang duurt en het script al uitgevoerd is. Door hem in de document.ready te plaatsen, zal het script wachten tot dat de afbeeldingen geladen zijn.

 

[p3t3r]

Bedankt voor de reactie, maar het probleem blijft nog steeds hetzelfde.

Ik heb het nu op deze manieren gedaan, ik denk toch dat dit het was dat je bedoelde?

[js]// geef te grote images class
jQuery(document).ready(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);
}

});




// lightbox
$('.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();
});
});[/js]