Solved

Applying jquery.reel.js to scroll a panoramic image

Posted on 2013-05-12
8
1,776 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
  • 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
 

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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

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

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 …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
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…

895 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

14 Experts available now in Live!

Get 1:1 Help Now