Question

I have run into a big problem, on my mobile website I have a bunch of images linked to the same images on a different page using the #imagelocation code, but in jQuery Mobile you cant use # to jump to a certain part of a page on a different HTML file than your currently on, does anyone have a work around to jump to a certain part of a external page in jQuery Mobile? thanks 🙂

Page1 snippet:

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

Page2 snippet:

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

Answer 1

I know it’s kinda a hack but you could do something like this:

• http://jsfiddle.net/hWHFr/2/
• http://jsfiddle.net/hWHFr/3/ (More space between pics)

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>