Solved

Preference for thumbnail response to touch-screen tap?

Posted on 2013-06-01
12
547 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Are you looking to clear some space on your phone for the latest iOS 8 update? Did you switch to Spotify so you no longer need to keep music native on your phone? Run out of space for taking photos while in the middle of vacation? Sometimes the quic…
Let Bitmoji into your life. Now is the time to learn a new language of smartphone messaging with this brief introduction.
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 > …
The goal of the tutorial is to teach the user how to use import presets downloaded from the internet into Adobe Lightroom. Once you downloaded the presets go into the preset folder and press import then import your preset and your set it to go.

920 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

15 Experts available now in Live!

Get 1:1 Help Now