Changing multiple img sources, img-1.png --> image-1w.png , img-2.png --> img-2w.png etc. [Jquery/CSS/HTMML]

[crispybagel]

Hi! I'm trying to make my current function better. Short explanation is: When the user clicks a button, i change multiple img sources by using the function below. Instead of this i would like to have a function that looks at each img source, deletes ".png", adds "w" and then adds ".png" again. I've tried to find each functions that do this but i've have not yet managed to get it to work.

 

.color-toggle is the button

.active-color is a class that adds a highlight to the clicked button.

There are two buttons, one that swaps images to a lighter version and one that swaps them to a darker version, essentially these buttons toggle each other. 

 

Glad for any help i can get!

$(".color-toggle").click(function(){
    $(".color-toggle").removeClass("active-color"),
    $(this).addClass("active-color");
    if ($(this).text() == "LIGHT") {
      $(this).parent().parent().find(".img-carousel img:nth-child(2)").attr("src", "assets/images/luna-1w.png"),
      $(this).parent().parent().find(".img-carousel img:nth-child(3)").attr("src", "assets/images/luna-2w.png"),
      $(this).parent().parent().find(".img-carousel img:nth-child(4)").attr("src", "assets/images/luna-3w.png"),
      $(this).parent().parent().find(".img-carousel img:nth-child(5)").attr("src", "assets/images/luna-4w.png"),
      $(this).parent().parent().find(".img-carousel img:nth-child(6)").attr("src", "assets/images/luna-5w.png");
    } else if ($(this).text() == "DARK") {
      $(this).parent().parent().find(".img-carousel img:nth-child(2)").attr("src", "assets/images/luna-1b.png"),
      $(this).parent().parent().find(".img-carousel img:nth-child(3)").attr("src", "assets/images/luna-2b.png"),
      $(this).parent().parent().find(".img-carousel img:nth-child(4)").attr("src", "assets/images/luna-3b.png"),
      $(this).parent().parent().find(".img-carousel img:nth-child(5)").attr("src", "assets/images/luna-4b.png"),
      $(this).parent().parent().find(".img-carousel img:nth-child(6)").attr("src", "assets/images/luna-5b.png");
    }
  });

 

[colonel_mortis]

You can get the current value of the attribute using the attr function with just the first argument, so

var currentSrc = $(...).attr("src")

If the images will always have a PNG extension, you can use .slice to trim off the current extension:

var withoutDotPng = currentSrc.slice(0, -4); // Remove 4 characters from the end

you can then add the new suffix.

 

To iterate through all of the images, you can use jQuery's each function

$(this).parent().parent().find(".img-carousel img").each(function() {
    // $(this) refers to an individual image here - update the src
});

 

[crispybagel]

4 hours ago, colonel_mortis said:

You can get the current value of the attribute using the attr function with just the first argument, so

var currentSrc = $(...).attr("src")

If the images will always have a PNG extension, you can use .slice to trim off the current extension:

var withoutDotPng = currentSrc.slice(0, -4); // Remove 4 characters from the end

you can then add the new suffix.

 

To iterate through all of the images, you can use jQuery's each function

$(this).parent().parent().find(".img-carousel img").each(function() {
    // $(this) refers to an individual image here - update the src
});

 

Thanks, i'm having trouble setting this up though. This is what i've tried but it doesn't work. 

$(".color-toggle").click(function(){ // click button
    $(".color-toggle").removeClass("active-color"), // remove highlight from all buttons
    $(this).addClass("active-color"); // add highlight to clicked button
    
    carouselimg = $(this).parent().parent().find(".img-carousel img"); // get carouselimg
    currentsrc = $(this).parent().parent().find(".img-carousel img").attr("src"); // get src
    srcnoext = currentsrc.slice(0, -5); // remove last 5 letters
    
    if ($(this).text() == "LIGHT") { // if light is clicked
    	$(carouselimg).each(function(){
        	newsrc = srcnoext + "w.png"; // create new src
            $(this).attr("src", newsrc); // apply src
        })
    } else if ($(this).text() == "DARK") { // if dark is clicked
    	$(carouselimg).each(function(){
        	newsrc = srcnoext + "b.png"; // create new src
            $(this).attr("src", newsrc); // apply src
        })
    }
  });

 

[colonel_mortis]

36 minutes ago, Crispy Customs said:

Thanks, i'm having trouble setting this up though. This is what i've tried but it doesn't work. 

$(".color-toggle").click(function(){ // click button
    $(".color-toggle").removeClass("active-color"), // remove highlight from all buttons
    $(this).addClass("active-color"); // add highlight to clicked button
    
    carouselimg = $(this).parent().parent().find(".img-carousel img"); // get carouselimg
    currentsrc = $(this).parent().parent().find(".img-carousel img").attr("src"); // get src
    srcnoext = currentsrc.slice(0, -5); // remove last 5 letters
    
    if ($(this).text() == "LIGHT") { // if light is clicked
    	$(carouselimg).each(function(){
        	newsrc = srcnoext + "w.png"; // create new src
            $(this).attr("src", newsrc); // apply src
        })
    } else if ($(this).text() == "DARK") { // if dark is clicked
    	$(carouselimg).each(function(){
        	newsrc = srcnoext + "b.png"; // create new src
            $(this).attr("src", newsrc); // apply src
        })
    }
  });

 

The reason that's not working is that you're getting the current src outside of the each loop, so it's not specific to each image. If you move the currentsrc and srcnoext variables into the each (using $(this) for the currentsrc query), it should work better. If it still doesn't work, what exactly is happening/not happening?

[crispybagel]

On 12/22/2020 at 10:49 PM, colonel_mortis said:

The reason that's not working is that you're getting the current src outside of the each loop, so it's not specific to each image. If you move the currentsrc and srcnoext variables into the each (using $(this) for the currentsrc query), it should work better. If it still doesn't work, what exactly is happening/not happening?

This is what i've done but i can't seem to make it work.

 

$(".color-toggle").click(function(){ // click button
    carouselimg = $(this).parent().parent().find(".img-carousel img"); // get carouselimg
    $(".color-toggle").removeClass("active-color"), // remove highlight from all buttons
    $(this).addClass("active-color"); // add highlight to clicked button

    if ($(this).text() == "LIGHT") { // if light button is clicked
    	$(carouselimg).each(function(){
          currentsrc = $(carouselimg).attr("src"); // get src
          srcnoext = currentsrc.slice(0, -5); // remove current extension
        	newsrc = srcnoext + "w.png"; // add new extension
          $(carouselimg).attr("src", newsrc); // apply new extension
        });
    } else if ($(this).text() == "DARK") { // if dark button is clicked
    	$(carouselimg).each(function(){
          currentsrc = $(carouselimg).attr("src"); // get src
          srcnoext = currentsrc.slice(0, -5); // remove current extension
        	newsrc = srcnoext + "b.png"; // add new extension
          $(carouselimg).attr("src", newsrc); // apply new extension
        });
    }
  });

I've also tried including the variable carouselimg inside the if and else if statement as well as inside the each functions. 

[colonel_mortis]

1 hour ago, Crispy Customs said:

This is what i've done but i can't seem to make it work.

 

$(".color-toggle").click(function(){ // click button
    carouselimg = $(this).parent().parent().find(".img-carousel img"); // get carouselimg
    $(".color-toggle").removeClass("active-color"), // remove highlight from all buttons
    $(this).addClass("active-color"); // add highlight to clicked button

    if ($(this).text() == "LIGHT") { // if light button is clicked
    	$(carouselimg).each(function(){
          currentsrc = $(carouselimg).attr("src"); // get src
          srcnoext = currentsrc.slice(0, -5); // remove current extension
        	newsrc = srcnoext + "w.png"; // add new extension
          $(carouselimg).attr("src", newsrc); // apply new extension
        });
    } else if ($(this).text() == "DARK") { // if dark button is clicked
    	$(carouselimg).each(function(){
          currentsrc = $(carouselimg).attr("src"); // get src
          srcnoext = currentsrc.slice(0, -5); // remove current extension
        	newsrc = srcnoext + "b.png"; // add new extension
          $(carouselimg).attr("src", newsrc); // apply new extension
        });
    }
  });

I've also tried including the variable carouselimg inside the if and else if statement as well as inside the each functions. 

You want to be using $(this) rather than $(carouselimg) inside the .each callbacks, and you're not declaring your variables (you need `var newsrc` (etc) somewhere, ideally where you're currently doing newsrc=. If that's still not working, try adding some console.log statements to narrow down where it's not working (eg log newsrc to see whether it's being hit and what value it's trying to use).