Solved

Applying jquery.reel.js to scroll a panoramic image

Posted on 2013-05-12
8
1,810 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
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 

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

To Patch or not to Patch? That is the question!

Don't get caught out like thousands of others around the world in the recent Ransomware Fiasco!
Discuss..
- Why it's not a good idea to wait before Patching
- Sensible approaches to Patching discussed
- Add your feedback, comments and suggestions

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS (jquiry mobile) question 3 34
Difference between Highcharts and Mapbox 10 44
prevented Firefox in organization 7 40
Firefox CSS Help. 1 10
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Do you come here a lot? Are you lazy like me and don't want to go through the "trouble" of having to click your Dock's Safari icon and then having to click your Experts Exchange Favorites bookmark to get here? Well then this article is for you.
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.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

732 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