Replace image and text using javascript

Question

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

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 !

Praveen Kumar Purushothaman · Accepted Answer · 2016-10-25 12:56:16Z

1

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">

answered Oct 25, 2016 at 12:56

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fabien Nguyen Over a year ago

Hello, Thanks for your reply ! I mixed your proposals. I kept your code modification in the changeImage(numero_image) function and updated the function call in the web page code : in the thumbnails img code, I changed the onclick="changeImage(image001);" instruction by onclick="changeImage(this);".

Mamdouh Saeed · Accepted Answer · 2016-10-25 13:48:14Z

0

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>

edited Oct 25, 2016 at 13:48

answered Oct 25, 2016 at 13:35

Mamdouh Saeed

2,3231 gold badge12 silver badges11 bronze badges

2 Comments

Praveen Kumar Purushothaman Over a year ago

Not sure if it is just me, but can't see anything in the snippet.

Mamdouh Saeed Over a year ago

Its working with me. did console shows you any error?

Collectives™ on Stack Overflow

Replace image and text using javascript

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related