Search code examples
jqueryimagereplacesrcsliders

How to replace a list of images with jQuery?


I'd like to replace the images in a list item by changing the name from "portrait.jpg" to "landscape.jpg" follow by sequence numbers.

For example:

<img src="images/slider_01_portrait.jpg">
<img src="images/slider_02_portrait.jpg">
<img src="images/slider_03_portrait.jpg">
<img src="images/slider_04_portrait.jpg">
<img src="images/slider_05_portrait.jpg">   

Change to ↓

<img src="images/slider_01_landscape.jpg">
<img src="images/slider_02_landscape.jpg">
<img src="images/slider_03_landscape.jpg">
<img src="images/slider_04_landscape.jpg">
<img src="images/slider_05_landscape.jpg">

Here is my code:

<div class="slider fullscreen">
    <ul class="slides">
        <li>
            <img src="images/slider_01_portrait.jpg">
        </li>
        <li>
            <img src="images/slider_02_portrait.jpg">
        </li>
        <li>
            <img src="images/slider_03_portrait.jpg">
        </li>
        <li>
            <img src="images/slider_04_portrait.jpg">
        </li>
        <li>
            <img src="images/slider_05_portrait.jpg">
        </li>
    </ul>
</div>

Solution

  • var img = $('img');
    for (var i = 0; i < img.length; i++) {
      var src = $(img[i]).prop('src').replace('portrait', 'landscape');
      $(img[i]).prop('src', src);
    }
    

    Hope this will help you!