CODEWITHSUNDEEP
jqueryhtmlcss
Arkos
Arkos

Reputation: 23

Resizing selected image in image-list HTML/CSS/JQuery

I have a list with images which can be selected by clickin or by arrows. Selected image needs to be resized and with green border. Here is my code:

    $("#book-list li").click(function(e) {
  var target = e.target;
  var src = target.src;
  console.log(src);
  
  //record which thumb was clicked
  $("#book-list li").removeClass("active"); //remove class
  $(this).addClass("active"); //apply class to selected thumb
});

//move next
$("#left-arrow").click(function() {
  if ($("#book-list li.active").next("#book-list li").length > 0) {
    $("#book-list li.active").next().children( 'img' ).trigger("click");
  } else {
    $("#book-list li:first > img").trigger("click"); //go to first
  }
  return false;
});

//move previous 
$("#right-arrow").click(function() {
  if ($("#book-list li.active").prev("#book-list li").length > 0) {

    $("#book-list li.active").prev().children( 'img' ).trigger("click");
  } else {
    $("#book-list li:last > img").trigger("click"); //go to end
  }
  return false;
});

//click the first thumb to begin
$("#book-list li:first > img").trigger("click");
.active {
  border: 5px solid green;
  width: 50px;
  height: 50px;
}


.book-list {
  display: inline;
}

.book {
  float: left;
  list-style: none;
  margin: 2px;
}

.thumb {
  border: 5px solid yellow;
  width: 30px;
  height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<br>
<ul class="book-list" id="book-list">
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=A" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=B" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=C" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=D" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=E" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=F" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=G" />
  </li>
</ul>
<br>
<a href="#" class="next" id="right-arrow">&larr;</a>
<a href="#" class="prev" id="left-arrow">&rarr;</a>

So now it's only a border getting bigger, not the actual image. Also when another image will be clicked, the old one must return to normal size. The same event need to happen if image was clicked manually, not by arrows.

Upvotes: 2

Views: 78

Answers (2)

Andy Hoffman
Andy Hoffman

Reputation: 19119

I added some CSS to enlarge the thumbs and change their yellow border to green. The - 10px in the calc function is to subtract the border width around the image (5px per side).

enter image description here

It was unclear to me whether you wanted only the outer green border or if you wanted both the outer and inner borders (both green).

Thin border

.active .thumb {
  width: 100%;
  height: 100%;
  border: none;
}

enter image description here

Thick border

.active .thumb {
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border-color: green;
}

Demo (thick border)

$("#book-list li").click(function(e) {
  var target = e.target;
  var src = target.src;
  console.log(src);
  
  //record which thumb was clicked
  $("#book-list li").removeClass("active"); //remove class
  $(this).addClass("active"); //apply class to selected thumb
});

//move next
$("#left-arrow").click(function() {
  if ($("#book-list li.active").next("#book-list li").length > 0) {
    $("#book-list li.active").next().children( 'img' ).trigger("click");
  } else {
    $("#book-list li:first > img").trigger("click"); //go to first
  }
  return false;
});

//move previous 
$("#right-arrow").click(function() {
  if ($("#book-list li.active").prev("#book-list li").length > 0) {

    $("#book-list li.active").prev().children( 'img' ).trigger("click");
  } else {
    $("#book-list li:last > img").trigger("click"); //go to end
  }
  return false;
});

//click the first thumb to begin
$("#book-list li:first > img").trigger("click");
.active {
  border: 5px solid green;
  width: 50px;
  height: 50px;
}

.active .thumb {
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border-color: green;
}

.book-list {
  display: inline;
}

.book {
  float: left;
  list-style: none;
  margin: 2px;
}

.thumb {
  border: 5px solid yellow;
  width: 30px;
  height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<br>
<ul class="book-list" id="book-list">
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=A" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=B" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=C" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=D" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=E" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=F" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=G" />
  </li>
</ul>
<br>
<a href="#" class="next" id="right-arrow">&larr;</a>
<a href="#" class="prev" id="left-arrow">&rarr;</a>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337656

The issue is because the .active class is placed on the parent li, so you need to tweak your CSS to apply the new border and dimensions to the child img based on the class on the li:

li.active .thumb {
  border: 5px solid green;
  width: 50px;
  height: 50px;
}

Also note that you can extract the common logic to its own function and call that directly instead of triggering events. You've also got 'left' and 'right' the wrong way around in the arrow ids. Try this:

$("#book-list li").click(function(e) {
  setActiveLi($(this));
});

function setActiveLi($el) {
  $("#book-list li").removeClass("active");
  $el.addClass("active");
}

$(".arrow").click(function(e) {
  e.preventDefault();
  var $target = $("#book-list li.active")[$(this).data('dir')]("li");
  if ($target.length === 0)
    $target = $("#book-list li")[$(this).data('dir') == 'next' ? 'first' : 'last']();
  setActiveLi($target);
});

$("#book-list li:first").addClass('active');
.book-list {
  display: inline;
}

.book {
  float: left;
  list-style: none;
  margin: 2px;
}

.thumb {
  border: 5px solid yellow;
  width: 30px;
  height: 30px;
}
li.active .thumb {
  border: 5px solid green;
  width: 50px;
  height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<br>
<ul class="book-list" id="book-list">
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=A" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=B" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=C" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=D" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=E" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=F" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=G" />
  </li>
</ul>
<br>
<a href="#" class="arrow next" data-dir="prev">&larr;</a>
<a href="#" class="arrow prev" data-dir="next">&rarr;</a>

Upvotes: 0

Related Questions