jquery scroll для привязки разных горизонтальных изображений страницы

Мне нужна помощь с javascript!

У меня есть две страницы. На одной странице есть миниатюры изображений, а на другой странице те же изображения, увеличенные с помощью горизонтальной прокрутки (размер изображения здесь составляет около 600 пикселей в высоту).

Итак, первая страница (selected.html) выглядит так:

    <div class="thumbs">    

    <a href="work.html#1"><img src="images/1.jpg" height="170"></a>
    <a href="work.html#2"><img src="images/2.jpg" height="170"></a>
    <a href="work.html#3"><img src="images/3.jpg" height="170"></a>
    <a href="work.html#4"><img src="images/4.jpg" height="170"></a>
    <a href="work.html#5"><img src="images/5.jpg" height="170"></a>
    <a href="work.html#6"><img src="images/6.jpg" height="170"></a>
    <a href="work.html#7"><img src="images/7.jpg" height="170"></a>
    <a href="work.html#8"><img src="images/8.jpg" height="170"></a>
</div>

А вторая страница (work.html) выглядит так:

<div class="images">    

    <a name="1"><img src="images/1.jpg"></a>
    <a name="2"><img src="images/2.jpg"></a>
    <a name="3"><img src="images/3.jpg"></a>
    <a name="4"><img src="images/4.jpg"></a>
    <a name="5"><img src="images/5.jpg"></a>
    <a name="6"><img src="images/6.jpg"></a>
    <a name="7"><img src="images/7.jpg"></a>
    <a name="8"><img src="images/8.jpg"></a>

</div>

CSS для страниц:

.thumbs {

    margin-top: 60px;   
    margin-left:auto;
    margin-right:auto;  
    text-align: center;}

.thumbs img {

    padding: 10px 10px 10px 10px;}


.images  {

        white-space: nowrap; width: auto; margin-top: 25px; }

.images img {

        padding: 0 50px 0 50px; margin: 50px 0 0 0; max-width: 100%; height: auto; width: auto\9; /* ie8 */ }

Мой вопрос: какой код мне нужен, чтобы, когда я нажимаю на одну миниатюру на странице selected.html, я переходил на страницу work.html и автоматически прокручивал до идентификатора привязки того же изображения (и центрировал его горизонтально на странице)? Я пробовал плагин scroll-to без везения.

ЛЮБАЯ помощь от кого-то, кто знает, что они делают повторно, будет принята с благодарностью!

Спасибо.


scroll jquery scrollto anchor
person user3684761    schedule 01.06.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Для передачи данных, в вашем случае идентификатора изображения, с одной страницы на другую вы можете использовать localstorage html5.
Например, если у вас есть эта страница с именем p1.html с этим кодом

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('a').click(function(){
        var id=$(this).attr('id')
        localStorage["idImage"] = id;
    })
})
</script>
</head>
<body>
<div class="thumbs">
    <a id="image1" href="p2.html"><img src="one.jpg" width="110" height="80"></a>
    <a id="image2" href="p2.html"><img src="two.jpg" width="110" height="80"></a>
</div>
</body>
</html>

и еще одна страница с именем p2 с этим кодом

<!DOCTYPE HTML>
<html>
<head>
<style>
img{display:none;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var id=localStorage["idImage"]
    $('#'+id).show()
    alert(id)
})
</script>
</head>
<body>
<img id="image1" src="big-one.jpg" width="520" height="300">
<img id="image2" src="big-two.jpg" width="520" height="300">
</body>
</html>

Если вы замените изображения своими собственными (сохраняя те же идентификаторы образцов), вы увидите, что, щелкнув миниатюру p1.html, вы перейдете к p2.html, где изображение с тем же идентификатором отображается на странице и в предупреждающем сообщении отображается идентификатор изображения, на которое нажали.
На первой странице при нажатии идентификатор ссылки сохраняется в локальном хранилище, на второй странице эти данные отображаются для отображения правильного изображения.
Для работы скрипта идентификаторы ссылок на первой странице должны совпадать с идентификаторами изображений на второй странице

person Devima    schedule 01.06.2014
comment
@ user3684761: если вам нравится этот ответ, вы можете отметить его зеленым цветом;) спасибо. - person Devima; 02.06.2014