Блог

У меня есть приложение, которое использует основной шаблон html для создания HTML-страниц для разных продуктов. Каждому продукту в приложении присвоено определенное количество фотографий. Приложение автоматически вставляет тег img для каждой фотографии в копию основного шаблона, используя внутренний цикл, и создает веб-страницу для этого продукта.

При первом появлении каждого изображения его размер должен соответствовать его родительскому контейнерному подразделению. Когда пользователь нажимает на изображение в первый раз, я хочу, чтобы изображение отображалось в исходном размере с вертикальными и горизонтальными полосами прокрутки внутри родительского контейнера. Если пользователь нажимает на изображение во второй раз, оно возвращается к своему ограниченному размеру. Я не хочу, чтобы родительский контейнер менял размер, когда пользователь нажимает на изображение.

Я пытаюсь использовать флажок ввода для этого, но, похоже, не могу правильно настроить код для переключения вперед и назад.

То, что я пытаюсь сделать, это позволить пользователю сначала увидеть серию вертикально расположенных уменьшенных изображений, которые автоматически отображаются на 90% от их ширины экрана. Если они хотят увидеть больше деталей, я хочу, чтобы они щелкнули по изображению и прокрутили изображение в натуральную величину в его родительском разделе.

В прошлом я использовал простую целевую ссылку «», чтобы позволить им видеть изображения в натуральную величину, но в ближайшем будущем это будет запрещено (т. Е. Ссылки за пределами сайта запрещены). Я также не могу использовать какие-либо скрипты, фреймы или любые другие методы, которые будут помечены как «активный контент».

Я использую следующие css и html. Я использовал индекс каждого изображения в программе (0, 1, 2 и т.д.), Чтобы предоставить уникальный входной идентификатор и метку для атрибута для каждого изображения. Таким образом, первому изображению будет присвоено 0 для каждого из этих атрибутов, в то время как второму изображению будет присвоен 1.

 .imgholder .checkimg{
    display:none;
}

.imgholder{
    position:relative;
    width:90vw;
    overflow:auto;
    margin: 10px 0px;
    clear: both;
}

img{
    max-width:100%;
    max-height:100%;
}

.checkimg:checked ~ label img{

}


<!--Begin Program Loop-->

<div class="imgholder">
<input class="checkimg" type="checkbox" id="[[image.index]]"><label for="[[image.index]]"><img src="[[image.imageURL]]"></label>
</div>

<!--End Program Loop-->
 

Вот рабочий пример. Это только показывает, как достичь основной функциональности. Вероятно, вам придется поиграть с размерами изображений, поскольку они могут быть искажены из-за странных соотношений сторон.

 .imgholder {
  position: relative;
  width: 90vw;
  height: 300px;
  overflow: auto;
  margin: 10px 0px;
  clear: both;
}

.imgholder .checkimg{
  display: none;
}


img {
  display: block;
  width: 100%;
  max-height: 100%;
}

.checkimg:checked   img {
  width: auto;
  max-height: none;
} 

 <div class="imgholder">
  <label for="i1">
    <input class="checkimg" type="checkbox" id="i1">
    <img src="http://lorempixel.com/g/1000/500"/>
  </label>
</div>

<div class="imgholder">
  <label for="i2">
    <input class="checkimg" type="checkbox" id="i2">
    <img src="http://lorempixel.com/g/1000/500"/>
  </label>
</div>

<div class="imgholder">
  <label for="i3">
    <input class="checkimg" type="checkbox" id="i3">
    <img src="http://lorempixel.com/g/1000/500"/>
  </label>
</div>