How to swap between photos in single page app?

Question

I have 4 thumbnail images in a row, that each image is related to another 4 images and I explain: the main 4 images are characters in the game (warrior, swordsman, etc') and I want to click on warrior image and move on in the same page to the warrior gear page(armor, boots weapons, etc'). I try a lot of methods here but still no success. can someone please try to help me?

 count = 1; total = 4; $(".img-swap1").on('click', function() { $(this).fadeOut(400, function() { $(this).attr('src', 'images/swordsman' + count + '.jpg'); }).fadeIn(400); count++; if (count > total) { count = 1; } }); 

 .column { float: left; width: 18%; padding: 14px; } img { display: block; margin-left: auto; margin-right: auto; max-width: 40%; height: auto; } /* Clear floats after image containers */ .row::after { content: ""; clear: both; display: table; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row"> <div class="column"> <img src="images/swordsman.jpg" class="img-swap1" alt="Swordsman" style="width:100%"> </div> <div class="column"> <img src="images/Mage-0.png" class="img-swap" alt="Mage" style="width:100%"> </div> <div class="column"> <img src="images/Warrior-0.png" class="img-swap" alt="Warrior" style="width:100%"> </div> <div class="column"> <img src="images/GhostFighter-0.png" class="img-swap" alt="GhostFighter" style="width:100%"> </div> </div> 

Answer 1

I suggest you use an array of objects, that contain both: the link to the image and also the name of the subset.

This way, for the future, you can simply get your array from a json.

Implementation would be like:

 var sets = []; sets['default'] = [ { link: "https://image.shutterstock.com/image-vector/fantasy-rpg-game-character-monsters-450w-1220706547.jpg", set: "swordsman" }, { link: "https://image.shutterstock.com/image-vector/fantasy-rpg-game-character-monsters-450w-1220706535.jpg", set: "swordsman" }, { link: "https://image.shutterstock.com/image-vector/fantasy-rpg-game-character-monsters-450w-1221331996.jpg", set: "swordsman" }, { link: "https://image.shutterstock.com/image-vector/fantasy-rpg-game-character-monsters-450w-1220706532.jpg", set: "swordsman" } ]; sets['swordsman'] = [ { link: "https://image.shutterstock.com/image-illustration/hero-swordsman-bright-armor-medieval-450w-1288381915.jpg", set: "default" }, { link: "https://image.shutterstock.com/image-illustration/hero-swordsman-bright-armor-medieval-450w-1288381921.jpg", set: "default" }, { link: "https://image.shutterstock.com/image-illustration/hero-swordsman-bright-armor-medieval-450w-1288381924.jpg", set: "default" }, { link: "https://image.shutterstock.com/image-illustration/hero-swordsman-bright-armor-medieval-450w-1288381930.jpg", set: "default" } ]; $(".img-swap").click(function() {replaceImgSet(this);}); function replaceImgSet(obj) { var _clicked_elem = obj; $(obj).parent().parent().fadeOut(400, function() { var rset = $(_clicked_elem).data("set"); var rowdiv = $(obj).parent().parent(); rowdiv.children(".column").remove(); sets[rset].forEach(function(elem) { var imgdiv = $('<div class="column"></div>'); var img = $('<img src="'+elem.link+'" data-set="'+elem.set+'" class="img-swap" alt="Mage" style="width:100%">'); img.click(function() {replaceImgSet(this)}); $(rowdiv).append(imgdiv.append(img)); }); $(rowdiv).fadeIn(); }); } 

 .column { float: left; width: 18%; padding: 14px; } img { display: block; margin-left: auto; margin-right: auto; max-width: 100%; height: auto; } /* Clear floats after image containers */ .row::after { content: ""; clear: both; display: table; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row"> <div class="column"> <img src="https://image.shutterstock.com/image-vector/fantasy-rpg-game-character-monsters-450w-1220706547.jpg" class="img-swap" data-set="swordsman" alt="Swordsman" style="width:100%"> </div> <div class="column"> <img src="https://image.shutterstock.com/image-vector/fantasy-rpg-game-character-monsters-450w-1220706535.jpg" class="img-swap" data-set="swordsman" alt="Mage" style="width:100%"> </div> <div class="column"> <img src="https://image.shutterstock.com/image-vector/fantasy-rpg-game-character-monsters-450w-1221331996.jpg" class="img-swap" data-set="swordsman" alt="Warrior" style="width:100%"> </div> <div class="column"> <img src="https://image.shutterstock.com/image-vector/fantasy-rpg-game-character-monsters-450w-1220706532.jpg" class="img-swap" data-set="swordsman" alt="GhostFighter" style="width:100%"> </div> </div>