javascript - Javascript照片库——查看完整图像
问题描述
我在 Flask 应用程序中建立了一个画廊。出于加载目的,网页会加载缩略图。我正在尝试使用 Javascript 来允许用户单击缩略图并查看完整图像。我遇到的问题是 javascript 似乎只适用于<div id="image_con"></div>
. 如何使该功能适用于 div 的所有实例?或者,这甚至可以通过我设置事物的方式来实现吗?
HTML:
{% block content %}
{% for x in names %}
<div class="date_con">
<h2>{{ x }}</h2>
{% for y in names[x] %}
<div class="event_con">
<span class="event_data">{{ y['date_parsed'] }}</span>
<span class="event_data">{{ y['title'] }}</span>
</div>
<div class="image_con" id="image_con">
{% for w in y['thumbs'] %}
<img class="image_small" src="{{ url_for('static', filename='thumbnails/' + w + '')}}" alt="{{ y['id'] }}">
{% endfor %}
</div>
<div class="cover" id="{{ y['id'] }}">
{% for z in y['fulls'] %}
<img class="image_big" id="{{ z }}" style="display: none;" onclick="EventHandler(this.id)"
src="{{ url_for('static', filename='gallery/' + z + '')}}" alt="error">
{% endfor %}
</div>
{% endfor %}
</div>
{% endfor %}
{% endblock content %}
Javascript:
var hit = false,
image_small = document.getElementById('image_con'),
active = null;
image_small.onclick = function (e) {
var i = 0, tgt = e.target, items;
if (tgt === this) return;
items = children(image_small);
var id = tgt.getAttribute('alt');
console.log(id);
while (tgt.parentNode !== this) tgt = tgt.parentNode;
while (items[i] !== tgt) i++;
// activate the image
var tar = document.getElementById(id).children;
tar[i].style.display = 'block';
document.getElementById(id).style.display = 'block';
output('index : ' + i);
// helpers
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
document.getElementsByClassName('cover')[0].style.display = 'flex';
};
function children(el) {
var i = 0, children = [], child;
while (child = el.childNodes[i++]) {
if (child.nodeType === 1) children.push(child);
}
return children;
};
function output(s) {
console.log(s);
};
function EventHandler(e) {
console.log('id = ' + e);
document.getElementById(e).style.display = 'none';
document.getElementsByTagName('body')[0].style.overflow = 'auto';
document.getElementsByClassName('cover')[0].style.display = 'none';
};
解决方案
要确保每个图像都有一个侦听器,请尝试将侦听器添加到父级,image_con
而不是每个图像。
document.getElementById('image_con').addEventListener('click', event => {
const { target } = event;
if (target.classList.contains('image_small')) {
/**
* the rest of the click handler goes here
*/
}
});
推荐阅读
- angular - 在角度项目中运行代码时出错
- r - 如何使用 ggplot2 获得具有连接点和配对 U 测试的完美“前后”图?
- django - 添加或更改相关名称参数
- firebase - 根据引用文档的字段查询
- python - 如何转换现有的多模块 python 脚本以在 AWS Lambda 中使用?
- java - 一次从 2 个进程接收来自麦克风的输入
- apache-camel - 使用带有代理和 sslcontext 的 Camel-http4 时出现 HTTP 401 错误
- android - 如何使用 navGraph 范围初始化 viewModel
- python - 将变量从无重新分配到值python
- sql-server - sp_xp_cmdshell_proxy_account 为多个需要在没有系统管理员的情况下运行 xp_cmdshell 的用户提供权限