Solved

Preference for thumbnail response to touch-screen tap?

Posted on 2013-06-01
12
546 Views
Last Modified: 2013-06-01
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).
0
Comment
Question by:ddantes
  • 7
  • 5
12 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39213460
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
 

Author Comment

by:ddantes
ID: 39213467
Thank you for that suggestion.  I'm unfamiliar with lightbox, and will do some research and post again.
0
 

Author Comment

by:ddantes
ID: 39213588
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
 
LVL 58

Expert Comment

by:Gary
ID: 39213605
The lightbox script tag needs to be after the jquery tag.
0
 

Author Comment

by:ddantes
ID: 39213614
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
 
LVL 58

Expert Comment

by:Gary
ID: 39213622
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:ddantes
ID: 39213639
Sorry, I did move that block, but then I uploaded the file to the wrong location.  Please check it again.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39213642
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
 

Author Comment

by:ddantes
ID: 39213662
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
 
LVL 58

Expert Comment

by:Gary
ID: 39213689
Where did you get download it from.
Change
$('a.lightbox').links-horiz();
to
$('.links-horiz a').lightbox();
0
 

Author Comment

by:ddantes
ID: 39213697
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
 

Author Comment

by:ddantes
ID: 39213719
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

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

PaperPort 14.5 Patch 1 update is often not detected or downloaded automatically. This article provides direct download links to solve the problem for retail (non-bundled) versions of the Standard and Professional editions, as well as the Professiona…
You should read OS supplied guidelines before developing. I can't stress that enough. The guidelines will help you understand the reasons mobile app developers do what they do.  Apple is very particular when they review appstore submissions.
The goal of the tutorial is to teach the user how to use the cropping tool and to straighten there photos so it does not look tilted. You will choose which photo you want to edit, crop it to you liking and make it straight.
The goal of the tutorial is to teach the user how to import photos into Adobe Lightroom efficiently and to keep everything organized.

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now