Jquery 循环 - 在不破坏缩略图分页器的情况下将图像包装在 div 标签中

Posted 2023-02-26

【中文标题】Jquery 循环 - 在不破坏缩略图分页器的情况下将图像包装在 div 标签中

【英文标题】：Jquery cycle - wrap images in div tags without breaking thumbnail pagers

【发布时间】：2012-10-02 16:05:36

【问题描述】：

我正在使用jquery循环插件并将每个图像包装在一个div标签中以使每张幻灯片居中，所有这些都是不同的宽度：

<div><img src="img1.jpg"    /></div>
<div><img src="img2.jpg"    /></div>
<div><img src="img3.jpg"    /></div>

这工作正常，但它破坏了 pagerAnchorBuilder 脚本。

从这个页面：Jquery cycle - How can I wrap my images in span tags without breaking the thumbnail pager?，我有这个：

pagerAnchorBuilder: function(idx, slide) 

    var src = $("img", slide).attr("rel");

        return '<a href="#"><img src="' + src + '"   style="position:absolute; top:540px;"/></a></li>';

但它似乎不起作用。

我确定我不需要指出我对 javascript 很陌生！如有任何提示，我将不胜感激！

有问题的页面在这里：http://wildwood-design.org/twagons.html

【问题讨论】：

“似乎不起作用”是什么意思？你能给你的页面链接，或者小提琴吗？

为什么你没有所有图像的父元素，只使用 text-align: center;在那？

我已经更新了我的帖子，其中包含指向相关页面的链接。对我可能犯的其他一百万个错误感到有点尴尬！

我不认为 text-align 会起作用，因为我认为 javascript 正在动态创建顶部和左侧属性或其他东西。不过我应该试试看。

【参考方案1】：

嘿，我为在这个线程上发生的任何人找到了答案（希望 6 个月后不是我）。将上面函数中的返回行替换为：

return '<li><a href="#"><img src="' + jQuery(slide).find('img').attr('src') + '"   style="position:absolute; top:540px;"/></a></li>';