Question

我正在为我在学校的项目创建一个图片库。我遇到了一个问题，我不知道如何添加图片描述，只能在大预览图片下显示，而不是在顶部的小图片旁边。每张小图片都会有不同的描述。我自己尝试了一些东西，但我失败了，我仍然对这一切都很陌生：）

该问题的任何解决方案？

<head>
    <title>Gallery</title>
    <link href="galery.css" rel="stylesheet" type="text/css">
</head>

<body background="cosmic.jpg">
  <div class="gallery" align="center">



    <div class="smallpics">
<img onclick="getElementById('bigpic').src=this.src" id="picture1" src="images/picture1.png"  /> 
<img onclick="getElementById('bigpic').src=this.src" id="picture2" src="images/picture2.png"  /> 
<img onclick="getElementById('bigpic').src=this.src" id="picture3" src="images/picture3.png"  /> 
<img onclick="getElementById('bigpic').src=this.src" id="picture4" src="images/picture4.png"  />
<img onclick="getElementById('bigpic').src=this.src" id="picture5" src="images/picture5.png"  />
<img onclick="getElementById('bigpic').src=this.src" id="picture6" src="images/picture6.png"  />
<img onclick="getElementById('bigpic').src=this.src" id="picture7" src="images/picture7.png"  />
<img onclick="getElementById('bigpic').src=this.src" id="picture8" src="images/picture8.png"  />
<img onclick="getElementById('bigpic').src=this.src" id="picture9" src="images/picture9.png"  />
</div>

     <div class="bigpic" align="center">
   <img id="bigpic" src="images/picture1.png" alt="" />

</div>

Answer 1

<div class="smallpics">
   <img onclick="getElementById('bigpic').src=this.src; getElementById('bigpicDesc').innerHTML(this.alt) " id="picture1" src="images/picture1.png" alt="The Description" /> 
....
</div>

<div class="bigpic" align="center">
   <img id="bigpic" src="images/picture1.png" alt="" />
   <div id="bigpicDesc"> </div>

</div>

或

<div class="smallpics">
       <img onclick="showInBig(this)" id="picture1" src="images/picture1.png" alt="The Description" /> 
....
</div>

<div class="bigpic" align="center">
   <img id="bigpic" src="images/picture1.png" alt="" />
   <div id="bigpicDesc"> </div>

</div>
function showInBig(element){

 document.getElementById('bigpic').setAttribute('src',element.getAttribute('src')); 

 document.getElementById('bigpicDesc').innerHTML(element.element.getAttribute('alt'));
}

鉴于小图像的alt是描述。

Answer 2

首先要清理HTML并分离出JavaScript。这有很多好处。它可以让你的HTML和JS分开，而不会与另一个混淆。

因此可以处理所有div代码：

onclick

现在，让我们考虑添加说明。第一个问题是，你将如何存储这些以及与图像相关的内容？

一个显而易见的解决方案是将它们存储在图片元素的数据属性中。因此，正如我们从点击的图片元素中读取var big_pic = document.querySelector('#bigpic'); document.querySelector('body').addEventListener('click', function(evt) { if (!/^picture\d+$/.test(evt.target.id)) return; big_pic.src = evt.target.src; }, false);一样，我们将从同一来源阅读其描述。

所以我们的元素变成了：

src

然后你需要在大图片区域中添加描述占位符，所以添加一个段落。

最后，更改上面的JS代码以考虑描述：

<img id='picture1' src='some/src.jpg' data-descr='Picture description here' />

Answer 3

可以通过两种方式完成，首先使用<action name="secondpattern" class="com.opensymphony.xwork2.ActionSupport"> <result type="chain">firstpattern</result> </action>属性^（1）

jsFiddle 1

data-

var pics = document.querySelectorAll('.smallpics img'),
  bigPic = document.getElementById('bigpic'),
  descP = document.getElementById('description');

for (var i = 0, ln = pics.length; i < ln; i++) {
  // we pass each img with its src and data-desc attributes to the function.
  var $this = pics[i];
  theClickFunction($this, $this.getAttribute('src'), $this.getAttribute('data-desc'));
}

function theClickFunction($th, $src, $desc) {
  $th.addEventListener('click', function() {
    //on click we update the bigpic display and thedescription  paragraph
    bigPic.setAttribute('src', $src);
    bigPic.style.display = 'block';
    descP.innerHTML = $desc;
  });
}

body { margin: 0; padding: 0; }
.smallpics img { width: 19%; cursor: pointer; }
#bigpic { display:none}

另一种方法是使用一些隐藏元素，我在这里<div class="gallery" align="center"> <div class="smallpics"> <img id="pic1" src="//dummyimage.com/300x100?text=pic1" data-desc="description of picture 1" /> <img id="pic2" src="//dummyimage.com/300x100?text=pic2" data-desc="description of picture 2" /> <img id="pic3" src="//dummyimage.com/300x100?text=pic3" data-desc="description of picture 3" /> <img id="pic4" src="//dummyimage.com/300x100?text=pic4" data-desc="description of picture 4" /> <img id="pic5" src="//dummyimage.com/300x100?text=pic5" data-desc="description of picture 5" /> <img id="pic6" src="//dummyimage.com/300x100?text=pic6" data-desc="description of picture 6" /> <img id="pic7" src="//dummyimage.com/300x100?text=pic7" data-desc="description of picture 7" /> <img id="pic8" src="//dummyimage.com/300x100?text=pic8" data-desc="description of picture 8" /> <img id="pic9" src="//dummyimage.com/300x100?text=pic9" data-desc="description of picture 9" /> <img id="pic10" src="//dummyimage.com/300x100?text=pic10" data-desc="description of picture 10" /> </div> <hr> <div class="bigpic" align="center"> <img id="bigpic" src="images/picture1.png" alt="" /> <p id="description"></p> </div>使用了<ul>，但它可以是li s或div等。这种方式为页面添加额外的标记，当你有HTML，样式和/或长描述而不仅仅是普通文本时，它会更适合。

jsFiddle 2

^（1） _{使用 var pics = document.querySelectorAll('.smallpics img'),
DescLis = document.querySelectorAll('#hiddenDescs li'),
bigPic = document.getElementById('bigpic'),
descP = document.getElementById('description');

for (var i = 0, ln = pics.length; i < ln; i++) {
// we pass each img with its src attribute.
var $this = pics[i];
theClickFunction($this, $this.getAttribute('src'), i);
}

function theClickFunction($th, $src, i) {
$th.addEventListener('click', function() {
//on click we update the bigpic display and thedescription paragraph
bigPic.setAttribute('src', $src);
bigPic.style.display = 'block';
// get the inner html of the corresponding li and inject it as innerHTML
// of the descreption p
descP.innerHTML = DescLis[i].innerHTML;
});
}
属性，如@Thuin's answer，而不是 alt 更好，因为： data-*}

更改预览中的图片说明

3 个答案: