Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts

    Jcarousel lite parameter problem

    I am working on adding a feature to jcarousel lite which will allow
    for continous scrolling when a button is hovered over previous or
    next. So far I am about half way there but I need to write an ending
    statment to tell jquery to stop the scroll upon the hover out event.
    What I have in the commented brackets is the part I tried to write
    (which would just advance the carousel one more cell then stop), but
    that didnt take at all.

    Also for any one that is familiar with jcarousels inner workings, how
    can I go about setting the pause speed between each cell to 0? I have
    looked around in the library plug in and made adjustsments where I
    could see them, but still there is a noticable pause.
    Code:
    if(o.hvrPrev)
                $(o.hvrPrev).hover(function() {
                    setInterval(function() {
                    go(curr-o.scroll);
                },    o.auto-o.speed);
    
                /*function() {
                    return go(curr-o.scroll);
                }
                });*/
    
            if(o.hvrNext)
                $(o.hvrNext).hover(function() {
                    setInterval(function() {
                    go(curr+o.scroll);
                },  o.auto+o.speed);
    
                /*function() {
                    return go(curr+o.scroll);
                }
                });*/
    Basically what I have done here is merged the btnNext function and the
    auto function together to create the scrolling effect I am aiming for.
    Like I said, for the most part it works.

    I appreciate any help

  • #2
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    Alter your code to look like this:

    Code:
    	if(o.hvrPrev)
    			$(o.hvrPrev).hover(function() {
    				leftscrl = setInterval(function() {
    				go(curr-o.scroll);
    			},    o.auto-o.speed);
    			},
    			function() {
    				clearInterval(leftscrl);
    			});
    
    
    	if(o.hvrNext)
    		$(o.hvrNext).hover(function() {
    				rightscrl = setInterval(function() {
    				go(curr+o.scroll);
    			},  o.auto+o.speed);
    			},
    			function() {
    				clearInterval (rightscrl);
    			});
    Ta-da... it stops. Enjoy.

  • Users who have thanked Eldarrion for this post:

    surreal5335 (03-05-2009)

  • #3
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts
    freakin beautiful! I have been trying all sorts of different methods to accomplish this.

    Do you happen to know how to alter the pause speed, so there isnt any pause inbetween each picture as it scrolls through? I have set the default speed to 1, but that didnt change anything (to be expected), and I cant find anywhere in the code that refers to the auto.speed default which does control the pause length.

    Thanks a lot for all your help

  • #4
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    The part that decides how long to take between each scrolling is marked in red:

    Code:
    	if(o.hvrPrev)
    			$(o.hvrPrev).hover(function() {
    				leftscrl = setInterval(function() {
    				go(curr-o.scroll);
    			},    o.auto-o.speed);
    			},
    			function() {
    				clearInterval(leftscrl);
    			});
    
    
    	if(o.hvrNext)
    		$(o.hvrNext).hover(function() {
    				rightscrl = setInterval(function() {
    				go(curr+o.scroll);
    			},  o.auto+o.speed);
    			},
    			function() {
    				clearInterval (rightscrl);
    			});
    Changing the variable in question or just replacing it with a number (think milliseconds) should make it fire more or less often, depending on how big the number is. Enjoy.

  • #5
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts
    I can make the speed adjustments right there? I thought the auto.speed was refering to another place in the code where the speed default was set. Thanks a lot for all the help.

    Another thing I have been running into and getting no results from no matter what method I use is positioning the jcarousel in the table cell. I have used both css and html to set it to top center...This method has worked with other parts in the web site, but doesnt seem to work with the carousel.

    Also the carousel is now scrolling through the images awkwardly that it wasnt before. To scroll i have created invisible buttons which are positioned to the left and right side of the carousel just above it. I mean to have them hang over the images on the left and right side, but not sure how to achieve it... tried using background assignments with css, which got about half way to the solution.

    http://royalvillicus.com/photo_site/photo.html

    Thank you so much for helping me through this.

  • #6
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    The variable "o.auto" does indeed exist in the code, but it is commented out in the original jcarousel lite plug-in. Unless you've changed that part of the code, it is really equal to 0.

    I can't seem to access your site at the moment, so looking more into it will have to wait until the problematic ISP involved resolves their connection issue.

  • #7
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts
    It does mention you can adjust the auto speed by adding auto: (speed) into the code on your page... But doing that will just make the carousel go into auto function and ignore the hvr function we have created. I tried adjusting the auto speed where you mentioned... But I seem to have the wrong syntax, every way I try gets it all screwed up.

    auto.0

    auto.speed: 0

    auto.speed (0)


    If you mention the default is already set to 0 then how can we make the pause any shorter?

    Ya I was having problems too with the site loading. hostmonster has been doing that often lately.

  • #8
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    Well, if you haven't uncommented it... it should be null aka 0... the only way to alter the speed at this point would be to reduce the speed variable... that you are adding to the setInterval function. (I think you had it set at like 800 at the moment) That's 8/10s of a second. Now, that's the amount of time it pauses before trying to slide again, keep in mind that JS does rely on your own computer and the browser you're using to interpret the code, so... in most cases, unless you have a pretty good PC (that you're browsing with) and are using FF3/Safari 4/opera 10, you won't see a very good effect, like at times the animation would seem a bit jumpy, no matter what you do. I have no idea why it behaves like this, considering the animation itself isn't anything that great to be bothered with, so... I'd personally leave it at what it is or even increase the interval, rather than reducing it... it might increase the actual quality. (For some reason even minor JS effects seem to go for the throat of your CPU in most browsers... usage jumping up to over 50%, which in turn causes the flaky animation) All in all... to alter the interval though, just change that variable you have there in the hovernext and hoverprev functions to a hard-coded number (in milliseconds). Should be easier to play around with.

  • #9
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts
    I hate to ask this, but how would that syntax look? Every way I try only seems to succeed in screwing everything else up.


    I appreciate your help and patience in this.

  • #10
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    It would look something like:

    Code:
    if(o.hvrPrev)
    			$(o.hvrPrev).hover(function() {
    				leftscrl = setInterval(function() {
    				go(curr-o.scroll);
    			},    200);
    			},
    			function() {
    				clearInterval(leftscrl);
    			});
    
    
    	if(o.hvrNext)
    		$(o.hvrNext).hover(function() {
    				rightscrl = setInterval(function() {
    				go(curr+o.scroll);
    			}, 200);
    			},
    			function() {
    				clearInterval (rightscrl);
    			});
    The number, marked in red is the pause duration in milliseconds. You can tweak it to your liking.

  • Users who have thanked Eldarrion for this post:

    surreal5335 (03-13-2009)

  • #11
    New to the CF scene
    Join Date
    May 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is a great plugin, it seems to suit every project with image slider.

    I using it on my site, I set the image auto slide

    I there any way, I hover on the image, the auto will stop, hover out, the auto continue ?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •