CODEWITHSUNDEEP
javascriptjqueryhtmlimage
Jeff S
Jeff S

Reputation: 109

Click image and be redirected to new page with clicked image added dynamically to new page?

I'm creating a fictitious online guitar store. I have an image carousel on my main page and I want to be able to click on an image and be redirected to a product page with information about the item clicked, the clicked image and three additional images.

I know how to redirect to pages and I know how to dynamically load images (the gallery was gone this way) but I cannot seem to accomplish both when working between two files. Right now my product page images are hard coded.

This is the div where I want the new image src to be added. I can do it this way or create a new img tag dynamically, it doesn't matter

<div class="product-img-focus">
    <img id="clickImg" class="img-fluid" src="../../img/sale/gibson/295-1.jpg" alt="guitar1"> 
</div>

This is the code I've been playing around with. I left the lines comments out so you can see what I've been trying. Basically, when the clicked src matches one of the img1 srcs in the json file, I want the images from that object loaded. Right now I'm just concerned with img1

$(".more-info").on("click", function(e) {

    let moreSrc = $(e.target).attr('src')

    $.getJSON("../json/guitars.json", function(json) {
      var more_info = '';

      for(var i in json) {
        if (moreSrc === json[i].img1 ) {
          var image1 = json[i].img1
          var image2 = json[i].img2
          var image3 = json[i].img3
          var image4 = json[i].img4
          var alt = json[i].alt

          more_info += `<img id="clickImg" class="img-fluid" src="${image1}" alt="${alt}">`
          // console.log(moreSrc)
          // console.log(json[i].img1)
          // window.location.href = "./pages/html/product.html";
          // $('#clickImg').attr('src', moreSrc);
        }
      }
      $('.product-img-focus').html(more_info)
      window.location.href = "./pages/html/product.html"
    })
  })

Example of the json

{
    "category": "1",
    "condition": "used",
    "justIn": "true",
    "brand": "Gibson",
    "year": "1952",
    "code": "456def",
    "img1": "../img/sale/gibson/295-1.jpg",
    "img2": "../img/sale/gibson/295-2.jpg",
    "img3": "../img/sale/gibson/295-3.jpg",
    "img4": "../img/sale/gibson/295-4.jpg",
    "alt": "guitar1",
    "title": "Gibson ES-295 1952",
    "price": "$6,000.00",
    "description": "A beautiful ES-295 with wear you can't fake! The ES-295 was originally produced from 1952 to 1958 and is best known for being the model played by Scotty Moore with Elvis. This particular example plays well with a fantastic feeling neck! The guitar has heavy finish wear with the beautiful greening that you often see on '50s goldtops. Glaser has refretted the guitar and replaced the tailpiece crossbar. The pickguard is missing.",
    "specs": ["Body Wood - Laminated Maple",
              "Neck Wood - Mahogany",
              "Fingerboard Wood - Rosewood",
              "Scale Length - 24.75",
              "Nut Width - 1 11/16",
              "Pickup(s) - Original P-90s",
              "Case - Hard Case"
            ]
  },

JQuery or vanilla JS is fine. I searched everywhere before posting here. Thank you!

Upvotes: 1

Views: 877

Answers (1)

thingEvery
thingEvery

Reputation: 3434

You're going to need a way to tell the new page what image to display. I'd try passing that info with a URL parameter.

Maybe something like this:

window.location.href = "./pages/html/product.html?item=img1"

Then, on the product page, load the JSON and use the URL param as the object key.

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}
var guitar = getUrlVars()["item"];

...

$('#clickImg').attr('src', '../' + guitar;

Upvotes: 1

Related Questions