Question

Playing around a bit more with jqTouch and am running into a problem with images that should link to a separate page.

My code is

<div id="home" class="current">
<div class="toolbar">
    <h1>Title</h1>
    <img src="images/logo.png" />
</div>
<div class="images">
    <a href="#largeImage"><img src="/images/thumbnail_1.jpg" /></a>
    <a href="#largeImage"><img src="/images/thumbnail_2.jpg" /></a>
    <a href="#largeImage"><img src="/images/thumbnail_3.jpg" /></a> 
</div>
</div>
<div id="largeImage">
<div class="toolbar">
    <h1>Large Image</h1>
    <a class="back" href="#">Back</a>
</div>
<div>Large Image will be loaded here</div>
</div>

So, jqTouch doesn’t recognize the anchors wrapped around the images, it seems. If i put those in an unordered list – it behaves as expected, and the page transitions to the #largeImage screen.

Any idea how to get this to work without making the images an unordered list?

Answer 1

Are you trying to control the slide transition? You may want to try initializing jQTouch with a different “SlideSelector” option:

$.jQTouch({slideSelector: "body > * > div a"})

This might work in your case, you may need to tweak around with the selector to make it work as you want, read more about it here.