Question

我让开发人员根据960px布局设计制作幻灯片。现在，我正在创建一个响应式设计。我一直很难修复幻灯片加载功能。当您单击下一个img时，幻灯片放映下方的内容将向上滑动，然后向下滑动。它在缓存图像时效果很好。

我尝试了很多东西，但我的jQuery知识有点缺乏。有没有人有建议？您可以在以下assembla链接中找到代码和脚本： https://www.assembla.com/code/cfrepo/subversion/node/blob/trunk/index.html#image=JohnMerriam

http://jsfiddle.net/doobada/HDyyk/

我试图将#real_display li高度设置为等于预加载的图像，但我无法理解。我还尝试将#real_display li高度设置为等于当前图像，然后隐藏li，然后在加载图像后将#real_display li高度设置为auto。

JS：

$('#real_display li:visible').hide(0); 

var customURL = window.location.href;

$('#info_box').remove();

$('#real_display').append('<div id="info_box"><ul id="social_buttons_box"></ul>'+
                                '<p>'+curr_obj["img_caption"]+'&nbsp;'+
                                '<a href="'+curr_obj["img_href"]+'">'+curr_obj["img_author"]+'</a></p></div>');

$('#social_buttons_box').hide();

setTimeout(function(){$('#social_buttons_box').fadeIn(500);}, 0);

var curr_dom_obj_li = $('#rimg_id_'+img_num);
var curr_dom_obj = curr_dom_obj_li.find('img');

if(curr_dom_obj.attr("src") == ""){
    curr_dom_obj.attr("src", curr_dom_obj.attr("link"));
}

curr_dom_obj_li.fadeIn(500);

我被困住了，到处寻找答案。

Answer 1

您可能只想使用JQuery预加载图像，而不是尝试确定下一个图像的大小并动态更改高度。这将为您提供一旦您提到的您满意的图像加载后获得的效果。

解释使用JQuery预加载图像here。

响应式jQuery幻灯片高度w /多个img维度

1 个答案: