Replace image and text using javascript

Question

I'm working on my cameras website. Here's what it looks like :

Example of the web page

How it works :

• All the cameras, photos, texts are stored in a JSON array.
• The big image ('image0') comes with a description text (in a div named 'texte_image0').
• Everytime one clicks on a thumbnail (image1 to image10), the thumbnail image replaces the big image (image0) and the description text. This text is stored in the 'title' field of every thumbnail image.

Here is the code for image1 :

image1 = "<img class=\"petite\" id=\"image001\" onclick=\"changeImage(image001);\" src=\"photos/" + data.APPAREILS[numero].IMAGE1 + "\" alt=\"" + data.APPAREILS[numero].TEXTE_IMAGE1 + "\" title=\"" + data.APPAREILS[numero].TEXTE_IMAGE1 + "\">";
$('#image1').append(image1);

Every click on the thumbnail calls the 'change_image' function :

    function changeImage(numero_image) { //Permet d'afficher l'image cliquée dans le grand cadre, ainsi que le texte associé.
        $('#texte_image0').html("");
        image000.src = numero_image.src; 
        $('#texte_image0').append(numero_image.title);
    }

As you can read, I replace the image0 'src' field by the clicked thumbnail 'src' field and use its 'title' field to change the description text in the 'texte_image0' div.

This code works fine in Mozilla Firefox but it doesn't in Google Chrome/Chromium. I guess these replacements are not allowed in Chrome/Chromium.

How can I fix it ?

Thanks !

Answer 1

This is an example

var data = [{
  img: "https://dummyimage.com/300x250/ff00ff/ffffff.png&text=1",
  alt: "this is image alt 1",
  desc: "this is image description 1"
}, {
  img: "https://dummyimage.com/300x250/ff00ff/ffffff.png&text=2",
  alt: "this is image alt 2",
  desc: "this is image description 2"
}, {
  img: "https://dummyimage.com/300x250/ff00ff/ffffff.png&text=3",
  alt: "this is image alt 3",
  desc: "this is image description 3"
}];

if (data.length > 1) {
  $("#thumbs").html("");
  changeImage(0);
}
$.each(data, function(k, v) {

  $("#thumbs").append("<img src='" + v.img + "' onclick='changeImage(" + k + ")' title='" + v.alt + "' alt='" + v.alt + "'>");
});



function changeImage(i) {
  $("#top").hide();
  $("#description").html(data[i].desc);
  $("#img").attr("src", data[i].img);
  $("#top").fadeIn("slow");
}

#top {
  width: 100%;
  height: 200px;
}
#img {
  width: 40%;
}
#img-con {
  width: 40%;
}
#description {
  width: 58%;
  float: right;
}
#img-con,
#description {
  display: inline;
height:98%;
}
#thumbs {
  width: 100%;
  height: 100px;
}
#thumbs img {
padding:2px;
  width: 100px;
  height: 100px;
display:inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top">
  <div id='img-con'>
    <img id='img' src='default.png'>
  </div>
  <div id='description'>There is no description</div>
</div>
<div id='thumbs'>There is no thumbs</div>

Answer 2

Make a point to use only one way:

function changeImage(numero_image) { //Permet d'afficher l'image cliquée dans le grand cadre, ainsi que le texte associé.
    $("#image1").attr("src", numero_image.src);
}

Use the same image. I would do something like this:

$(function () {
  $(".click").click(function () {
    $("#image1").attr("src", this.src);
  });
});

body {text-align: center;}
#image1 {display: block; width: 95%; margin: 15px auto;}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<img src="https://placehold.it/100?text=1" alt="" id="image1" />
<img src="https://placehold.it/100?text=1" alt="" class="click">
<img src="https://placehold.it/100?text=2" alt="" class="click">
<img src="https://placehold.it/100?text=3" alt="" class="click">
<img src="https://placehold.it/100?text=4" alt="" class="click">
<img src="https://placehold.it/100?text=5" alt="" class="click">