Solved

Preference for thumbnail response to touch-screen tap?

Posted on 2013-06-01
12
550 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Apple watch forgot password 2 71
Need a Marquee for Windows 4 78
Is there any way to delete a Google Maps label? 7 26
Sharing Google Photos 7 15
A professional opinion on which Apple product to buy, and a tidbit about the WWDC.
Is your phone running out of space to hold pictures?  This article will show you quick tips on how to solve this problem.
This video demonstrates how to use each tool, their shortcuts, where and when to use them, and how to use the keyboard to improve workflow.
Users will learn how resize a batch of photos from a single command in Photoshop via Photoshop's Image Processor. Open up an Image you'd like to resize in Adobe Photoshop: Adjust the image size according to your preferences. Image > Adjustments > …

756 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