На моем сайте у меня есть горизонтальная палитра миниатюр, которая включена с помощью скроллера.Поскольку для каждого изображения мне нужно отображать название изображения, я использовал figure и figcaption.Эскизы заполняются с использованием php-кода динамически в зависимости от категории, которую выбирает пользователь.У меня есть полоса прокрутки внизу, чтобы включить маневрирование.
Однако я сталкиваюсь с определенной проблемой:
Иногда могут быть заполнены тысячи эскизов.Когда пользователь получает, скажем, 400-е изображение и обновляет страницу, скроллер автоматически снова указывает на изображение 1.Когда я искал варианты, я наткнулся на сообщение, которое содержит минимальный пример, который позволяет пользователю оставаться на той же позиции при обновлении страницы.
<!DOCTYPE html>
<html>
<head>
<style>
li{display: table-cell; padding:20px;}
ul{display: table-row; }
.cont{overflow: auto;}
li.active{border: 1px solid blue;}
</style>
</head>
<body>
<div class="book-list-headbox">
<div class="page-number-box">
<label for="" id="total-page" value="" class="mb-0"></label>
<span class="separator">of</span>
<input type="text" id="current-page" value="1">
</div>
</div>
<div class="cont">
<ul class="book-list" id="book-list">
<li class="book active"><img src="http://via.placeholder.com/300x300/?text=1" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=2" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=3" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=4" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=5" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=6" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=7" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=8" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=9" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=11" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=12" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=13" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=14" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=15" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=16" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=17" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=18" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=19" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=20" alt="Book Page"></li>
</ul>
</div>
<div>another content</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(function(){
$('#current-page').change(function() {
setStorage($(this).val() -1)
});
$('.book-list').on('click', '.book', function(){
setStorage($(this).index())
});
});
window.addEventListener('load', function() {
var clicki = (localStorage.getItem('clicki')) ? (localStorage.getItem('clicki')) : 0 ;
// alert(clicki);
activeBook(clicki);
});
function setStorage(myNum){
localStorage.setItem('clicki', myNum);
activeBook(myNum);
}
function activeBook(i){
$('.book').removeClass('active');
var active = $('.book').eq(i).addClass('active');
var left = active.position().left;
var currScroll= $(".cont").scrollLeft();
var contWidth = $('.cont').width()/2;
var activeOuterWidth = active.outerWidth()/2;
left= left + currScroll - contWidth + activeOuterWidth;
$('.cont').animate( {
scrollLeft: left
},'slow');
}
</script>
</body>
</html>
Это работает очень хорошо и подходит для моего варианта использования.Однако мой текущий код выглядит следующим образом:
for ($i=0; $i<count($files); $i++)
{
$num = $files[$i];
$filname = basename($num, ".jpg");
$imgname = basename($num);
$img = $imgdir . $imgname;
$filnam = substr($filname, -5);
$filnam = rtrim($filnam);
echo '<figure class="item">';
echo '<img class="matchImages" name="matchImages" onclick="clickedImage(this.id); setGoToFrame(this.id); return false" src="'.$img.'" id="thumbNails'.$filnam.'"/>';
echo '<figcaption class="caption" name="caption">' . $filnam . '</figcaption>';
echo '</figure>';
}
или если мне нужно вставить только данные рисунка и детали рисунка, это будет выглядеть следующим образом:
<figure class="item">;
<img src="../images/test1.jpg" id="thumbNails"/>
<figcaption class="caption" name="caption">Test1.jpg</figcaption>
</figure>
Я пробовал с двумя вариантами.
- Заменены теги ul и li на теги figure: не сработало
- Вложил рисунок и figcaption внутри тега ul li: не сработал.