使用CSS和JQuery在画廊中的活动图像周围边框

Question

I am rendering thumbnail images from a directory as horizontal gallery using PHP. 我正在使用PHP将目录中的缩略图图像显示为水平画廊。 I am trying to put a border around the clicked image by setting the image to active , which is not working. 我正在尝试通过将图像设置为active来在单击的图像周围放置边框，这是行不通的。 The following is the html and css. 以下是html和CSS。

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<style>
  #loaded_img_panel {
    display:flex;
    flex-wrap: nowrap;
  }

  #loaded_img_panel > ul > li {
    list-style: none;
  }

  #loaded_img_panel ul li img {
    display: inline;
    width: 210px;
    height:175px;
    margin: 0;
    padding:0;
    cursor: pointer;
  }

  #loaded_img_panel img:active {
      border: 0.4em solid red;
  }


  #loaded_img_panel img:hover {
      opacity: 0.5;
      border: 0.4em solid red;
  }
</style>

</head>
<body>
  <div class="loaded_img_panel" id="loaded_img_panel">    
  </div>
</body>
</html>

<script>
  window.addEventListener('load',function(e) {
  var folder = "thumbnails";
  if (folder !== null && folder !== "") {
    $.post("loadimages.php", {'folder' : folder}, function(output){
      $("#loaded_img_panel").html(output).show();
      });
    }   
  });

  //Put border around the selected image
  $('#loaded_img_panel').on('click', 'img', function() {
    $('#loaded_img_panel img').removeClass('active');
    $(this).addClass('active');
  })
</script>

The following is the php script: 以下是php脚本：

loadimages.php loadimages.php

<?php
session_start();
$folder = $_POST['folder'];
$tardir = "projects/" . $folder . "/thumb/*.jpg" ;
$files = glob($tardir);
for ($i=0; $i<count($files); $i++)
{
    $num = $files[$i];
    $filname = basename($num, ".jpg");
    $filnam = substr($filname, -5);
    $filnam = rtrim($filnam);
    echo '<ul class="item">';
    echo '<li><img src="'.$num.'" id="thumbNails'.$filnam.'"/>';
    echo '<figcaption class="caption" name="caption">' . $filnam . '</figcaption>';
    echo '</li></ul>';
}

?>

The php renders images from the directory and the css sets it to horizontal gallery. PHP从目录中渲染图像，而CSS将其设置为水平画廊。 On hover and onclick I am able to see the red border, but when I release the mouse the box disappears. 在悬停和onclick上，我能够看到红色边框，但是当我释放鼠标时，该框消失了。

I tried, changing the click path from img to #loaded_img_panel > ul > li > img and similar other variations but they were not working. 我尝试过，将点击路径从img更改为#loaded_img_panel > ul > li > img和类似的其他变体，但它们无法正常工作。

Answer 1

You need to change #loaded_img_panel img:active to #loaded_img_panel img.active . 您需要将#loaded_img_panel img:active更改为#loaded_img_panel img.active 。 That way once you assign the active class to the image it will remain highlighted instead of just while you click on it (which is what :active ) means. 这样，将active类分配给图像后，它将保持突出显示状态，而不仅仅是单击它（即:active ）的意思。

使用CSS和JQuery在画廊中的活动图像周围边框

问题描述

1 个解决方案

解决方案1
1 2018-09-23 04:09:55

使用CSS和JQuery在画廊中的活动图像周围边框

问题描述

1 个解决方案

解决方案1 1 2018-09-23 04:09:55

解决方案1
1 2018-09-23 04:09:55