Как увеличить размер изображения, нажав на него на руле? - PullRequest
Новая
       9

Как увеличить размер изображения, нажав на него на руле?

0 голосов
/ 05 октября 2019

Я использую node.js с механизмом шаблонов руля. В настоящее время уменьшенные изображения из базы данных отображаются с шириной и высотой 70, что указано в коде. Смотри ниже. Как я могу позволить пользователю щелкнуть изображение на руле и увидеть увеличенное изображение фотографии? Текущие изображения слишком малы, чтобы их видеть, но я бы хотел, чтобы они увеличивались только при нажатии на них.

Я использую рули .... так что изменение этого поможет. .. (без метода "onClick =", так как я использую node.js, и он не будет работать) 

<style>
img.std {
    height: 10%;
}
img.big {
    height: 40%;
}
</style>

<img id="img" class="std" onClick="(this.className=='std')?this.className='big':this.className='std'" src="/uploads/{{photo_image}}">

Ответы [ 3 ]

0 голосов
/ 05 октября 2019

Вот хак-флажок, реализованный в вашем коде: 

.imgcontainer {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  justify-content: stretch;
}

.imgcontainer input[type='radio'] {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.imgcontainer input[type='radio'] + img.std  {
  height: auto;  
  width: 100px;  
}

.imgcontainer input[type='radio']:checked + img.std {  
  width: 200px;
}
<div class="imgcontainer">
  <input type="radio" name="imgcontainerradio">
  <img id="img" class="std" src="http://placeimg.com/640/480/any">
</div>
<div class="imgcontainer">
  <input type="radio" name="imgcontainerradio">
  <img id="img" class="std" src="http://placeimg.com/640/480/arch">
</div>
<div class="imgcontainer">
  <input type="radio" name="imgcontainerradio">
  <img id="img" class="std" src="http://placeimg.com/640/480/nature">
</div>
0 голосов
/ 05 октября 2019

Вы можете добавить функцию типа IIFE и использовать функцию стрелки, чтобы ключевое слово this ссылалось на изображение: 

.container{
   height: 200px;
   border: solid 1px gray;
}

img.std {
  height: 60%;
}

img.big {
  height: 80%;
}
<div class="container">
  <img id="img" class="std" onClick="(() => {
      this.className = this.className === 'std' ? 'big' : 'std';
    })(); return false;" src="http://placekitten.com/200/200">
</div>
0 голосов
/ 05 октября 2019

Вы можете сделать это довольно легко с помощью jQuery с: 

$(document).on('click','img',function(){
   if (this.id == "img") {
       this.className=='std' ? this.className = 'big' : this.className='std';
   }
});

<img id="img" class="std" src="/uploads/{{photo_image}}">

Я бы предложил использовать уникальный идентификатор для тега, чтобы избежать будущей неоднозначности (потенциальных ошибок).

...