Change image with click on thumbnail

Question

How can I change the image by click on the thumbnail below? Because the thumbnail is display with background-image.

How can I get the url by click on the thumbnail to change the bigger image?

.ci-top {
  clear: both;
  display: inline-block;
  width: 100%;
}

.top-left {
  float: left
}

.ci-bottom {
  text-align: right;
}

.ci-thumb {
  height: 150px;
  width: 150px;
  margin: 0;
  display: inline-block;
}

.ci-thumb-1 {
  background-image: url(http://placeholder.pics/svg/300/FF2209);
}

.ci-thumb-2 {
  background-image: url(http://placeholder.pics/svg/300/5BFF76);
}

.ci-thumb-3 {
  background-image: url(http://placeholder.pics/svg/300/325BFF);
}

<div class="ci-main">

  <div class="ci-top">
    <div class="top-left"><img id="change-img" src="http://placeholder.pics/svg/300/FF2209"></div>
    <div class="top-right">
      <h1>test</h1>
      <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span></div>
  </div>


  <div class="ci-bottom">
    <div class="ci-thumb ci-thumb-1"></div>
    <div class="ci-thumb ci-thumb-2"></div>
    <div class="ci-thumb ci-thumb-3"></div>
  </div>
</div>

I know, how to get and change the url by click somewhere but I don't know how to get the url of a background image and then change it at the bigger image.

<img id="change-img" .. >

you din't show us the js you tried so far to accomplish your task? — Alive to die - Anant, Sep 20 '17 at 09:26
Get background-image url using: [Background Image url](https://stackoverflow.com/questions/8809876/can-i-get-divs-background-image-url) — akbansa, Sep 20 '17 at 09:30

score 1 · Accepted Answer · answered Sep 20 '17 at 09:28

Here is your answer, store the background-image in a variable, remove the url() and replace it with the image src

$(".ci-thumb").on("click",function(){
  var bg = $(this).css('background-image');
 bg = bg.replace('url(','').replace(')','').replace(/\"/gi, "");
 $("#change-img").attr("src",bg);
 })

.ci-top {
    clear: both;
    display: inline-block;
    width: 100%;
}

.top-left{
float: left
}

.ci-bottom {
    text-align: right;
}

.ci-thumb {
    height: 150px;
    width: 150px;
    margin: 0;
    display: inline-block;
}

.ci-thumb-1 {
    background-image: url(http://placeholder.pics/svg/300/FF2209);
}

.ci-thumb-2 {
    background-image: url(http://placeholder.pics/svg/300/5BFF76);
}

.ci-thumb-3 {
    background-image: url(http://placeholder.pics/svg/300/325BFF);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ci-main">

<div class="ci-top">
    <div class="top-left"><img id="change-img"src="http://placeholder.pics/svg/300/FF2209"></div>
    <div class="top-right"><h1>test</h1>
        <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span></div>
</div>


   <div class="ci-bottom">
    <div class="ci-thumb ci-thumb-1"></div>
      <div class="ci-thumb ci-thumb-2"></div>
      <div class="ci-thumb ci-thumb-3"></div>
   </div>
  </div>

Change image with click on thumbnail

1 Answers1