更改基於屏幕大小的圖像源

我有一些圖片：

圖像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

更改基於屏幕大小的圖像源

回答

相關問題