Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1914
  • Last Modified:

Applying jquery.reel.js to scroll a panoramic image

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
ddantes
Asked:
ddantes
  • 4
  • 3
1 Solution
 
Rainer JeschorCommented:
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
 
ddantesAuthor Commented:
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
ddantesAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
ddantesAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
ddantesAuthor Commented:
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

Hire Technology Freelancers with Gigs

Work with 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.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now