CODEWITHSUNDEEP
javascripthtmljquery
r0naldinio
r0naldinio

Reputation: 191

Display selected image on the side with jQuery?

So I'm building this script.

Right now you can select an image and it will select the appropriate dropdown selection (which will be hidden) for the form submission.

What I'm trying to do, is also show the selected image on the right side using jQuery.

So that when a user select from the collection of images, he/she will see her selection.

Basically what I want is simply for the div id appear as the image name.

So when you click on the first image, jQuery should change the image name to 'region1':

<img src="https://www.example.com/region1.png">

On the second image..

<img src="https://www.example.com/region2.png">

and so on...

I want to integrate this feature into the following script:

const containers = $('.image-container')
const select = $('#sel1')

// Initialize at position 1
selectElement('region1')

containers.on('click', function() {
  selectElement($(this).attr('id'))
  select.val($(this).attr('id'))
})

select.change(function() {
  selectElement($(this).val())
})

function selectElement(id) {
  let others = containers.not($('#' + id))
  $('#' + id).addClass("selected")
  others.removeClass("selected")
}
#wrapper .image-container {
  position: relative;
  width: 100px;
  height: 100px;
  display: inline-block;
}

#wrapper img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.image-container.selected::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4)
}
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<div id="wrapper">
  <div id="region1" class="image-container">
    <img src="https://cdn.mos.cms.futurecdn.net/DEpYy8jSdvD9dkvVDSPNoD.jpg" alt="">
  </div>
  <div id="region2" class="image-container">
    <img src="https://www.starwarsnewsnet.com/wp-content/uploads/2014/05/star-20wars-20video-20games-20hoth-20atat-20empire-20at-20war-201680x1050-20wallpaper_wallpaperswa.com_551.jpg" alt="">
  </div>
  <div id="region3" class="image-container">
    <img src="https://www.austinchronicle.com/binary/e3fd/AllisonLefcort_CaptainPhasma_Add.jpg" alt="">
  </div>
  <div id="region4" class="image-container">
    <img src="https://cdn.mos.cms.futurecdn.net/ew7hxbJKwPewaRmjYW79bi.jpg" alt="">
  </div>
  <div id="region5" class="image-container">
    <img src="https://www.starwarsnewsnet.com/wp-content/uploads/2021/01/Empire-at-War_wall.jpg" alt="">
  </div>
</div>

<select class="form-control" id="sel1">
  <option value="region1">1 - Udine Centro</option>
  <option value="region2">2 - Rizzi / S. Domenico / Cormor / S. Rocco</option>
  <option value="region3">3 - Laipacco / San Gottardo</option>
  <option value="region4">4 - Udine sud</option>
  <option value="region5">5 - Cussignacco</option>
</select>

Upvotes: 1

Views: 497

Answers (2)

biberman
biberman

Reputation: 5777

You could clone the selected image and append it to a div on the right side:

$('#' + id + ' img').clone().appendTo("#big_img");

Before that you should empty that div, for example with $('#big_img').html('');.

By the way: There are many missing semicolons. Don't rely on auto correction!

Working example: (i added main and another div for aligning the right div)

const containers = $('.image-container');
const select = $('#sel1');

// Initialize at position 1
selectElement('region1');

containers.on('click', function() {
  selectElement($(this).attr('id'));
  select.val($(this).attr('id'));
})

select.change(function() {
  selectElement($(this).val());
})

function selectElement(id) {
  let others = containers.not($('#' + id));
  $('#' + id).addClass("selected");
  others.removeClass("selected");
  
  $('#big_img').html('');
  $('#' + id + ' img').clone().appendTo("#big_img");
}
main {
  display: flex;
}

#wrapper .image-container {
  position: relative;
  width: 100px;
  height: 100px;
  display: inline-block;
}

#wrapper img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.image-container.selected::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4)
}

#big_img img {
  width: 300px;
}
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<main>
  <div id="wrapper">
    <div id="img-wrapper">
      <div id="region1" class="image-container">
        <img src="https://cdn.mos.cms.futurecdn.net/DEpYy8jSdvD9dkvVDSPNoD.jpg" alt="">
      </div>
      <div id="region2" class="image-container">
        <img src="https://www.starwarsnewsnet.com/wp-content/uploads/2014/05/star-20wars-20video-20games-20hoth-20atat-20empire-20at-20war-201680x1050-20wallpaper_wallpaperswa.com_551.jpg" alt="">
      </div>
      <div id="region3" class="image-container">
        <img src="https://www.austinchronicle.com/binary/e3fd/AllisonLefcort_CaptainPhasma_Add.jpg" alt="">
      </div>
      <div id="region4" class="image-container">
        <img src="https://cdn.mos.cms.futurecdn.net/ew7hxbJKwPewaRmjYW79bi.jpg" alt="">
      </div>
      <div id="region5" class="image-container">
        <img src="https://www.starwarsnewsnet.com/wp-content/uploads/2021/01/Empire-at-War_wall.jpg" alt="">
      </div>
    </div>

    <select class="form-control" id="sel1">
      <option value="region1">1 - Udine Centro</option>
      <option value="region2">2 - Rizzi / S. Domenico / Cormor / S. Rocco</option>
      <option value="region3">3 - Laipacco / San Gottardo</option>
      <option value="region4">4 - Udine sud</option>
      <option value="region5">5 - Cussignacco</option>
    </select>
  </div>

  <div id="big_img"></div>
</main>

Upvotes: 3

Oded Dahari
Oded Dahari

Reputation: 92

Something like that?

const containers = $('.image-container')
const select = $('#sel1')

// Initialize at position 1
selectElement('region1')

containers.on('click', function() {
  selectElement($(this).attr('id'))
  select.val($(this).attr('id'))
})

select.change(function() {
  selectElement($(this).val())
})

function selectElement(id) {
  let elem = $('#' + id);
  let others = containers.not(elem)
  //elem.addClass("selected");
  //others.removeClass("selected");
  let clone = elem.clone();
  let preview = $("#image-preview");
  preview.empty();
  clone.appendTo(preview);
  // 

}
#wrapper .image-container {
  position: relative;
  width: 100px;
  height: 100px;
  display: inline-block;
}

#wrapper img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.image-container.selected::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4)
}

#image-preview img {
  width: 200px;
}
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="wrapper">
  <div id="region1" class="image-container">
    <img src="https://cdn.mos.cms.futurecdn.net/DEpYy8jSdvD9dkvVDSPNoD.jpg" alt="">
  </div>
  <div id="region2" class="image-container">
    <img src="https://www.starwarsnewsnet.com/wp-content/uploads/2014/05/star-20wars-20video-20games-20hoth-20atat-20empire-20at-20war-201680x1050-20wallpaper_wallpaperswa.com_551.jpg" alt="">
  </div>
  <div id="region3" class="image-container">
    <img src="https://www.austinchronicle.com/binary/e3fd/AllisonLefcort_CaptainPhasma_Add.jpg" alt="">
  </div>
  <div id="region4" class="image-container">
    <img src="https://cdn.mos.cms.futurecdn.net/ew7hxbJKwPewaRmjYW79bi.jpg" alt="">

  </div>
  <div id="region5" class="image-container">
    <img src="https://www.starwarsnewsnet.com/wp-content/uploads/2021/01/Empire-at-War_wall.jpg" alt="">
  </div>
</div>
<div style="display:flex;">
  <div>
    <select class="form-control" id="sel1">
      <option value="region1">1 - Udine Centro</option>
      <option value="region2">2 - Rizzi / S. Domenico / Cormor / S. Rocco</option>
      <option value="region3">3 - Laipacco / San Gottardo</option>
      <option value="region4">4 - Udine sud</option>
      <option value="region5">5 - Cussignacco</option>
    </select>
  </div>
  <div id="image-preview"></div>
</div>

Upvotes: 3

Related Questions