1

我的 CMS 的灯箱式照片库输出代码如下。我提供了两个缩略图的代码。

“m”和“s”的参数值将始终为“150”和“true”。我想将其更改为 m=250 和 s=false。

我是 JavaScript 和 jQuery 的新手。如果您有任何建议，请帮助我将代码放在页面上的位置。谢谢你。

<div class="thumbTight MainContent">
    <div class="thumbContents">
        <a href="/PhotoGallery/banana.jpg" rel="lightbox[2065379]" title="Banana">
            <img src="/ResizeImage.aspx?img=/PhotoGallery/banana.jpg&amp;m=150&amp;s=true" alt="Banana" />
        </a>
        <div class="description" style="display: none;"></div>
    </div>
</div>

<div class="thumbTight">
    <div class="thumbContents">
        <a href="/PhotoGallery/cantaloupe.jpg" rel="lightbox[2065379]" title="Cantaloupe">
            <img src="/ResizeImage.aspx?img=/PhotoGallery/cantaloupe.jpg&amp;m=150&amp;s=true" alt="Cantaloupe" />
        </a>
        <div class="description" style="display: none;"></div>
    </div>
</div>
4

2 回答 2

0

在您的文档就绪处理程序中，使用each迭代缩略图（具有thumbContents类的 div 内的图像）并将属性分配给具有所需替换src的原始属性。src

$(function() {
    $('.thumbContents img').each( function() {
        var $img = $(this);
        $img.attr('src', $img.attr('src').replace(/m=150/,'m=250').replace(/s=true/,'s=false') );
    });
});
于 2011-08-01T22:11:23.217 回答
0

您可以在页面加载后运行此 jQuery。图像将使用不同的 URL 开始加载，您的代码将运行并更改图像 URL，然后新的 URL 将加载并显示。除非您实际使用 CSS，否则您无法在客户端执行任何操作来阻止初始显示，这样它们的图像最初是隐藏的，并且仅在您设置所需的 URL 后才可见。

$(".thumbTight img").each(function() {
    this.src = this.src.replace(/m=150/, "m=250").replace(/s=true/, "s=false");
});

你可以在这里看到一个演示：http: //jsfiddle.net/jfriend00/UdnFE/。

于 2011-08-01T22:12:52.620 回答