Ask your WordPress questions! Pay money and get answers fast! (more info)

Jquery and NextGen conflict WordPress

  • SOLVED

Hi, check this link http://www.kickagency.com/gadget/

Now, if you open 1 thumb, for example the 3th (Abbigliamento), you'll see the DIV open with relative content.

the problems are:

1 - the div is too height! I need that ends at the end of content.

2 - If you click on latest gallery thumb, the page scroll up, and you can't see the photo!


Help me please!

Answers (1)

2012-10-23

Christianto answers:

#1. Your script trying to get the height on the ".item" when it still has 235px width.
$(this).parent().find('.item')<strong>.css({'height':'212px', 'width':'235px'});</strong>
returnPosition = $('body').scrollTop();
var curHeight = $(this).height();
<strong> var autoHeight = $(this).css('height', 'auto').height();</strong>


so will calculate the height of ".item" bigger than if it has 1000px width

screenshot:
http://postimage.org/image/6eftshw05/

For #2, It bind a click event on ".item", which means it will fire if you click at any place as long still inside ".item" <article> section.
I think its best to bind it only on ".thumb" element instead of entire ".item".

based on 2 point above, the code will be:
$('.item .thumb').click(function(e) {
e.preventDefault();
var item = $(this).parent('.item');
item.parents('#content').find('.item').css({'height':'212px', 'width':'235px'});
returnPosition = $('body').scrollTop();

// we animate it twice, set the width to 1000px first, then get the autoHeight value
item.css('height', item.height()).animate({'width':'1000px'}, 200, function(){
var autoHeight = item.css('height', 'auto').height();
item.animate({'height':autoHeight+'px'}, 200, function(){
$('html, body').animate({scrollTop: item.offset().top}, 200);
});
});
});


Manlio Ma comments:

It's PERFECT !!!

Thank you very much !