Preference for thumbnail response to touch-screen tap?

I'm struggling to retrofit my website so it is mobile-browser-friendly.  Two of my pages feature thumbnail images which popup moderately-enlarged versions with mouseover on a desktop, and a full-sized image with mouse click on a desktop.  I'm trying to resolve how these thumbnails should respond to touch-screen taps.  

In one version (www.mauitradewinds.com/TestA/StarWind.htm) tapping the thumbnail once does nothing, but double-tapping the screen anywhere produces a modest enlargement.  In another version (www.mauitradewinds.com/TestB/StarWind.htm) tapping a thumbnail once launches a full-screen image.  The user needs to tap the back button to return to the original content. I'm aware that users can also zoom the thumbnails.  But the quality of a zoomed thumbnail is not equivalent to the quality of the full-sized image.  

I'd appreciate some guidance on which method is preferable (A or B).
ddantesAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
GaryConnect With a Mentor Commented:
Double tapping is a zoom natively, double tapping again zooms back - nothing to do with your website.
As you are using jquery why not use the lightbox plugin - prevents leaving the page to just view an image.
0
 
ddantesAuthor Commented:
Thank you for that suggestion.  I'm unfamiliar with lightbox, and will do some research and post again.
0
 
ddantesAuthor Commented:
Would you please have a look at http://mauitradewinds.com/TestB/test.htm    I tried to apply the lightbox plugin to all links of the "links-horiz" class, but (on my desktop), clicking those links still opens a new page.
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
GaryCommented:
The lightbox script tag needs to be after the jquery tag.
0
 
ddantesAuthor Commented:
Understood, and thank you.  I moved the lightbox script tag, but clicking on the thumbnail still behaves the same (large image in new window).
0
 
GaryCommented:
Move this block below where you have the lightbox script, it won't work if its before the jquery/lightbox inclusion as jquery has not been initialised.

<script type="text/javascript">
$(function() {
		$('a.lightbox').links-horiz(); // Select all links with links-horiz class
});
</script>

Open in new window

0
 
ddantesAuthor Commented:
Sorry, I did move that block, but then I uploaded the file to the wrong location.  Please check it again.
0
 
GaryCommented:
Can you post the link to the lightbox plugin you are using
Normal usage would be
Your thumbnail...

<a href="/image.jpg" class="thumbs">
<img width="50" height="50" alt="" src="photos/thumb_image.jpg">
</a>

Where image.jpg is the full size image, and we use thumbs to identify the thumbnails

And then to activate the plugin
<script type="text/javascript">
$(function() {
      $('.thumbs').lightbox() // attach the event to all links with class thumbs
});
</script>


Will get back to this tomorrow.
0
 
ddantesAuthor Commented:
I'm not sure what is meant by the link to the lightbox plugin I am using.  The page where I'm trying to apply the plugin is http://mauitradewinds.com/TestB/test.htm

The plugin itself is at http://mauitradewinds.com/TestB/js/jQuery.lightbox.js
0
 
GaryCommented:
Where did you get download it from.
Change
$('a.lightbox').links-horiz();
to
$('.links-horiz a').lightbox();
0
 
ddantesAuthor Commented:
I don't recall where I got that plugin.  I've made a simplified page at
http://mauitradewinds.com/lightbox/test.htm
It has only one image and thumbnail, and the lightbox code.  Still not working yet.
0
 
ddantesAuthor Commented:
I don't have a dedicated stylesheet for lightbox.  Is that an issue?
I also posted a new question at
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28145102.html
 I'd appreciate your participation in that.  Meanwhile, I want to award points for this question, because we're off on a tangent with lightbox, and you really answered my original question with your initial comment.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.