Как привязать в jquery?

Question

Я столкнулся с большой проблемой, на моем мобильном веб-сайте у меня есть куча изображений, связанных с теми же изображениями, на другой странице с использованием кода #imagelocation, но в jQuery Mobile вы не можете использовать # для перехода к определенная часть страницы в файле HTML, отличном от вашего текущего, есть ли у кого-нибудь способ перейти к определенной части внешней страницы в jQuery Mobile? спасибо:)

Фрагмент страницы:

<a href="otherpage.html#2"><img src="imagelocation/2.jpg"></a>

Фрагмент страницы:

<a rel="external" href="imagelocation/22.jpg">
<img src="imagelocation/2.jpg"><br>
Description<br> <br>
<a name="2"></a>

Answer 1

Я знаю, что это что-то вроде хака, но вы могли бы сделать что-то вроде этого:

• http://jsfiddle.net/hWHFr/2/
• http://jsfiddle.net/hWHFr/3/ (Больше места между фотографиями)

JS

$('.displayImage').click(function() {
    var selectedImage = $(this).attr('id');
    var showImage = selectedImage.split('-');
    var image = showImage[1];

    $('#imageSelected').val(image);
});

$('#image').live('pageshow',function(event, ui){
    var id = $("#imageSelected").val();
    var imagePosition = $('#'+id).position();

    $.mobile.silentScroll(imagePosition.top);
});

HTML

<div data-role="page" id="home">
    <div data-role="content">

        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">Overview</li>
            <li><a href="#image" id="show-image1" class="displayImage">Show Image 1</a></li>
            <li><a href="#image" id="show-image2" class="displayImage">Show Image 2</a></li>
            <li><a href="#image" id="show-image3" class="displayImage">Show Image 3</a></li>            
        </ul>

        <input type="hidden" id="imageSelected" value="image1" />

    </div>
</div>

<div data-role="page" id="image">
    <div data-role="content">

        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">Overview</li>
            <li><a href="#home">Go Home</a></li>           
        </ul>

        <br />
        <br />
        <br />
        <br />
        <br />
        <img src="http://mostelegantflower.com/wp-content/uploads/2011/08/daffodil-elegant-flowers-1-150x150.jpg" id="image1" alt="Angry face" />
        <br />
        <br />
        <br />
        <br />
        <br />
        <img src="http://www.fiftyflowers.com/site_files/FiftyFlowers/Image/Product/Light_Pink_Peonies_Flower_150.jpg" id="image2" alt="Angry face" />
        <br />
        <br />
        <br />
        <br />
        <br />
        <img src="http://www.whats-your-sign.com/images/LilyFlowerMeanings.jpg" id="image3" alt="Angry face" />

    </div>
</div>