jqTouch - Making an image trigger an animation, rather than a <li>

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.

Answer 2

Yes the transition works fine!

But still, navigating back in the history does not work. Once you are in the largeImage Panel, clicking on Back does nothing...

Any additional hint?