Solved

Preference for thumbnail response to touch-screen tap?

Posted on 2013-06-01
12
548 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Recently, an awarded photographer, Selina De Maeyer (http://www.selinademaeyer.com/), completed a photo shoot of a beautiful event (http://www.sintjacobantwerpen.be/verslag-en-fotoreportage-van-de-sacramentsprocessie-door-antwerpen#thumbnails) in An…
A brief look into what is, how to use, and how to make GIFs
In this sixth video of the Xpdf series, we discuss and demonstrate the PDFtoPNG utility, which converts a multi-page PDF file to separate color, grayscale, or monochrome PNG files, creating one PNG file for each page in the PDF. It does this via a c…
CodeTwo Sync for iCloud (http://www.codetwo.com/sync-for-icloud?sts=6554) automatically synchronizes your Outlook 2016, 2013, 2010 or 2007 folders with iCloud folders available via iCloud Control Panel. This lets you automatically sync them with…

813 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

13 Experts available now in Live!

Get 1:1 Help Now