Я создаю приложение фляги, которое перечисляет все видео из базы данных в шаблоне HTML.При нажатии на ссылку видео начинает воспроизводиться во всплывающем окне с кнопками со стрелками для перехода к следующему видео и кнопкой закрытия, чтобы закрыть всплывающее окно.
Мой шаблон jinja2 с кодом js выглядит следующим образом:
{% extends "base_nav2.html" %}
{% block content %}
<div id="works">
<div class="container">
{% if results %}
<center><h2>Results for Query: {{ query }}</h2></center>
<div class="row text-center page" style="display:flex; flex-wrap:wrap;">
{% for p in results %}
<div class="col-md-3 col-sm-6">
<div class="thumbnail" style="height: 162; width: 284">
<img src="{{ url_for('static', filename=p.thumb) }}">
<div class="caption">
<a href="#media-popup" data-media="{{ url_for('static', filename=p.path) }}">{{p.filename}}</a><br>
</div>
</div>
</div>
{% endfor %}
<div class="popup" id="media-popup">
<a href="#media-close" id="media-prev" style="margin-top: -10;"><i class="fa fa-arrow-left fa-4x" style="margin-top: -10;"></i></a>
<a href="#media-close" id="close" align="right"><i class="fa fa-window-close fa-4x" aria-hidden="true"></i></a>
<a href="#media-close" id="media-next"><i class="fa fa-arrow-right fa-4x"></i></a>
</div>
</div>
{% else %}
<center><h2>No results found for Query: {{ query }}</h2></center>
{% endif %}
<div>
</div>
<script>
var links = [];
var current_entry = 0;
var full_links = $("[data-media]");
for (var key in full_links)
{
if(typeof full_links[key] === 'number')
break;
links.push(full_links[key].dataset.media);
}
var length = links.length;
var next;
var prev;
$("[data-media]").on("click", function(e) {
e.preventDefault();
var $this = $(this);
var videoUrl = $this.attr("data-media");
var popup = $this.attr("href");
$("#media-popup").append("<iframe id=\"vid\" width=\"560\" height=\"315\" src=\"\" frameborder=\"0\" allowfullscreen></iframe>");
var $popupIframe = $(popup).find("iframe");
$popupIframe.attr("src", videoUrl);
current_entry= links.indexOf(videoUrl);
if(current_entry == length-1)
{
next = 0;
prev = current_entry - 1;
}
else if(current_entry == 0)
{
next = current_entry + 1;
prev = length - 1;
}
else
{
next = current_entry + 1;
prev = current_entry - 1;
}
$this.closest(".page").addClass("show-popup");
window.scrollTo(0, 0);
});
$("#media-next").on("click", function(e){
document.getElementById("vid").src = "http://localhost:5000" + links[next];
current_entry = next;
if(current_entry == length-1)
{
next = 0;
prev = current_entry - 1;
}
else if(current_entry == 0)
{
next = current_entry + 1;
prev = length - 1;
}
else
{
next = current_entry + 1;
prev = current_entry - 1;
}
});
$("#media-prev").on("click", function(e){
document.getElementById("vid").src = "http://localhost:5000" + links[prev];
current_entry = prev;
if(current_entry == length-1)
{
next = 0;
prev = current_entry - 1;
}
else if(current_entry == 0)
{
next = current_entry + 1;
prev = length - 1;
}
else
{
next = current_entry + 1;
prev = current_entry - 1;
}
});
$("#close").on("click", function(e) {
e.preventDefault();
e.stopPropagation();
$(".page").removeClass("show-popup");
$("iframe").remove();
});
$(".popup > iframe").on("click", function(e) {
e.stopPropagation();
$(".page").removeClass("show-popup");
});
</script>
{% endblock %}
CSS :
.page {
position: relative;
height:100%;
}
.popup {
position:absolute;
z-index:2;
margin-top: 10;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
opacity:0;
visibility:hidden;
transition:.3s ease;
}
.show-popup .popup {
opacity:1;
visibility: visible;
}
Так выглядит всплывающее окно с видео
Я хочу расположить кнопки со стрелкамипо обе стороны от игрока и кнопки закрытия в углу исчезнувшей области, но мне это не удалось.Какой должна быть рекомендованная стратегия для этого?