Solved

Applying jquery.reel.js to scroll a panoramic image

Posted on 2013-05-12
8
1,764 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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

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.
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
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.

760 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

23 Experts available now in Live!

Get 1:1 Help Now