Solved

Applying jquery.reel.js to scroll a panoramic image

Posted on 2013-05-12
8
1,827 Views
Last Modified: 2013-05-12
I have a panoramic image which scrolls horizontally, automatically, at http://mauitradewinds.com/view.htm    An expert recommend that I replace the existing javascript plugin with the jquery plugin which is demonstrated at http://jquery.vostrel.cz/reel.  The recommendation was based on the thought that the scrolling performance would be better when viewed with mobile browsers.
However, I would need some guidance in implementing this.  Can you provide specific code so that the image on the view.htm page would scroll horizontally, automatically, using the jquery plugin?
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
  • 4
  • 3
8 Comments
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39159434
Hi,
load the plugin and use
<script>
      $(function(){ // when DOM ready

        $('#pic1').reel({
          frames:      32,
          footage:     4,
          speed:       0.1
        });

      });
    </script>

Open in new window


Question is:
- which effect do you want to achieve?
Samples:
http://test.vostrel.cz/jquery.reel/example/index.html
Just adjust the options in the above code

On your HTML page you reference the same pic twice so you should remove the second one (pic2).
HTH
Rainer
0
 

Author Comment

by:ddantes
ID: 39159770
Thank you.  I'm not sure which option to adjust, because none of the examples seem to perform an automatic, unidirectional, horizontal scroll.  I'm looking to duplicate the effect which you see at view.htm, using the jquery.reel plugin.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 39159810
0
Raise the IQ of Your IT Alerts

From IT major incidents to manufacturing line slowdowns, every business process generates insights that need to reach the people required to take action. You need a platform that integrates with your business tools to create fully enabled DevOps toolchains.

You need xMatters.

 

Author Comment

by:ddantes
ID: 39159852
Thank you.  

It appears that the sprite panorama example requires the panoramic image to have a "reel" version, consisting of many frames.  My panoramic image is a single frame.  I have experimented with varying the options, but it won't scroll smoothly, because each "frame" is really the entire image.  

The Click-Free Stitched Panorama is working (please see http://mauitradewinds.com/test.htm) .

How does the scrolling perform in your iPad?    Do you still feel this plugin is superior to the existing view.htm or view3.htm?  If I compare  them in browserstack.com, using iPad simulation,  I can't appreciate any improvement with the jQuery version.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39160299
Neither can I. Can you tweak the speed and frames parameters please?
Could it also have something to do with the image size itself?
0
 

Author Comment

by:ddantes
ID: 39160316
Thank you for your observations.  What you see now is a combination of speed and frames variables which I optimized for the smoothest scrolling and a reasonable rate of motion.  And yes, I think the size of the image does have a bearing on the performance of this plugin.  Over the years, I've seen many solutions for panoramic image scrolling, which looked perfect in the author's example, but didn't perform as well with a very large image.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39160437
I remember from previous posts from Maui that your pics are very large. I strongly suggest making the smaller and use media detection on what size to use so mobile devices get much smaller images
0
 

Author Comment

by:ddantes
ID: 39160466
I'm more motivated to implement your recommendation than I was previously.  Now there are around 14% of visitors to my website using mobile browsers, and this is a relatively new increase.  I have just posted another question about this, because I am unfamiliar with media detection.  That question is at http://www.experts-exchange.com/Software/Internet_Email/Web_Browsers/Q_28126657.html  I'd appreciate your participation if you are willing.
0

Featured Post

Independent Software Vendors: 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

Citrix XenApp, Internet Explorer 11 set to Enterprise Mode and using central hosted sites.xml file.
This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

690 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