更改基于屏幕大小的图像源

我有一些图片：

图像270x572.gif
图像220x466.gif（默认）
图像166x352.gif

这里的目标是，在大于1200像素的屏幕上，它将替换270x572中的220x446，对于小于980的屏幕，它会将220x446替换为166x352。

我认为这是非常基本的jQuery，但即时通讯这样的noob，无法让它工作。

这是我得到：

if($(window).width() > 1199) { 
    $('.slider .img').each(function() { 
     var element = $(this); 
     var src = $(this).attr('src'); 
     element.attr('src', src.replace('270','572')); 
    }); 
}

，比同为其他尺寸....猜测它都错了。

想得到一些帮助，谢谢。 /Paul

来源

2013-06-28 Kortschot

您是否在控制台中遇到错误？由于您没有在您提供的代码中关闭括号。 –

它也可以用CSS媒体查询http://css-tricks.com/css-media-queries/ – mkutyba

你能解释一下你的意思吗？是否有任何错误或问题？ –

您正在替换不存在的字符串。

当我找到你的时候，所有的图像都有一个初始源URL“image-220x466.gif”。在你的函数中，你用'572'取代了这个字符串的'270'部分，由于在“image-220x466.gif”中没有“270”，所以它不能工作。

我不知道为什么你不能只是设置源直接，就像这样：

element.attr('src', 'image-270x572.gif');

编辑

改变__ X __每个分辨率：

$('.slider .img').each(function() { 
    var element = $(this), 
     src = $(this).attr('src'), 
     newSrc; 

    if ($(window).width() > 1199) { 
    newSrc = src.replace('220', '270'); 
    newSrc = src.replace('466', '572'); 
    } 
    else if() { 

    } 
    else if() { 

    } 

    element.attr('src', newSrc); 
});

有似乎有些缺乏理解.replace（）所做的事情。简而言之，替换需要两个参数。第一个是应该替换的字符串，第二个定义要插入的内容。

所以，如果你的字符串为“220x466”，你可以更换220用别的东西，像这样：

"220x466".replace("220", "270");

将将输出"270x466"

来源

2013-06-28 08:19:23 Alex

由于图像通过cms上传，文件名是动态的。文件名中的度量不是，它们总是如上所述。 – Kortschot

这个信息本来会很好:)等待编辑答案，然后 – Alex

ooooooh'270'，'572'是文件名中的第1和第2个测量值吗？ – Kortschot

是“.IMG”已应用类到你的图片或是'.slider'还是两者兼而有之？如果它已经被应用到所有你想改变图像“.slider”，这里是你如何去了解它：

$(function(){ 
    $(".slider").each(function(){ 
    var current = $(this).attr("src"); 
    var newSrc = current.replace('270', '572'); 
    $(this).attr("src", newSrc); 
    }); 
});

我使用两个变量来帮助您了解我的回答更好。您可以将这些线条合并为一个，而不使用变量。

来源

2013-06-28 08:29:44

我的代码。它有一个限制 - 文件名必须只有一个“ - ” - 分割名称和大小。

http://jsfiddle.net/mattydsw/Gg79q/

if($(window).width() > 1199) { 
    $('.slider .img').each(function() { 
     var element = $(this); 
     var src = element.attr('src'); 
     var name = src.split("-"); 
     var ext = name[name.length-1]; 
     ext = (ext.split("."))[1]; 
     name = name[0]; 
     var newSize = "270x572"; 
     var newSrc = name + "-" + newSize + "." + ext; 
     alert(newSrc); 
     element.attr('src', newSrc); 
    }); 
}

来源

2013-06-28 08:39:00 mkutyba

也适用！谢谢！ +1 – Kortschot

-1

我就使在jsfiddle.net/vinhnguyenle/kw2V8/

例子。请检查出来！

来源

2013-06-29 02:56:20 vinhnguyen

请在此发布您的答案代码。现在我们必须复制/粘贴您的URL以查看它，而StackOverflow本身非常适合发布代码。 – Mischa

更改基于屏幕大小的图像源

回答

相关问题