Drag to new gallery

ramon.crusellas's Avatar

ramon.crusellas

26 Nov, 2012 02:31 PM

Hi!

I'm using the rsBeforeMove property and it working well when you click the arrows or when you press the keyboard for change the gallery of sliders. The trouble begin when you dragging the images, is possible control the last and the first image with some property with the drag effect and change the gallery when the user is in the last image o in the first image?

I see that c.jallet was in the same problem but i don't know if he solved the problem.

thank.

  1. Support Staff 1 Posted by Dmitry Semenov on 26 Nov, 2012 04:05 PM

    Dmitry Semenov's Avatar

    Hi,

    Use rsBeforeAnimStart, beforeMove doesn't trigger on completel of swipe/drag.

    Dmitry

  2. 2 Posted by ramon.crusellas on 26 Nov, 2012 04:21 PM

    ramon.crusellas's Avatar

    Hi,

    this is my code for the arrows and the key, how i insert the new code for the swipe/drag?

    $(document).ready(function(){    
        
        $(".rsArrowRight").click(function () {
            
                sliderInstance.ev.on('rsBeforeMove', function(e,type,action) {
                            
                    if(type=="next" && sliderInstance.numSlides==sliderInstance.currSlideId+1){                   
                            slideRight();                       
                    } 
            }); 
        });
        
        $(".rsArrowLeft").click(function () {
            
                sliderInstance.ev.on('rsBeforeMove', function(e,type,action) {
                    
                    if(type=="prev" && sliderInstance.currSlideId==0){
                            
                            slideLeft();                                
                    }   
            }); 
        }); 
        
            
    }); <!-- document.ready -->   
    
     $(document).keydown(function(e) {
         
         if(e.keyCode===39) {
            
            sliderInstance.ev.on('rsBeforeMove', function(e,type,action) {
                            
                    if(type=="next" && sliderInstance.numSlides==sliderInstance.currSlideId+1){
                            
                            slideRight();                       
                    }
            });
            
            }   
        
        if(e.keyCode===37) {
            
            sliderInstance.ev.on('rsBeforeMove', function(e,type,action) {
                    
                    if(type=="prev" && sliderInstance.currSlideId==0){
                            
                            slideLeft();                                
                    }       
            });
            
            }   
            
        });
    
  3. Support Staff 3 Posted by Dmitry Semenov on 26 Nov, 2012 04:37 PM

    Dmitry Semenov's Avatar

    I don't understand why you add this code instead of just enabling keyboardNav, e.t.c. Can you explain why?

    Dmitry

  4. 4 Posted by ramon.crusellas on 26 Nov, 2012 04:53 PM

    ramon.crusellas's Avatar

    This code is for load a new set of pictures when last slide of first. ANd i do the same when i drag the images

  5. Support Staff 5 Posted by Dmitry Semenov on 26 Nov, 2012 05:21 PM

    Dmitry Semenov's Avatar

    Oh, you should have mentioned that )

    As I said use rsBeforeAnimStart instead of rsBeforeMove. It'll fire when user will release mouse/finger and when slide changed via arrows/thumbs. You don't need all your code above, all you need is:

    var slider = $('.royalSlider').data('royalSlider');
    slider.ev.on('rsBeforeAnimStart', function() {
         console.log( slider.currSlideId );
    });
    

    Dmitry

  6. 6 Posted by ramon.crusellas on 26 Nov, 2012 05:48 PM

    ramon.crusellas's Avatar

    HI,

    this is the website where i work the code:

    http://www.ramoncrusellas.com/copy/projectes_more.php

    Look the source code (at the end of the page) and look my functions, I don't know how apply the source that you send me ...

    sorry for my english ;)

  7. 7 Posted by ramon.crusellas on 26 Nov, 2012 05:51 PM

    ramon.crusellas's Avatar

    First of all, what I do is apply a different function should click the arrow to the right or the left.

    You see I use two functions: one to load the new gallery to the right and another to load the new galleria on the left.

    I do not know what it's like to do the same when the user drags the images and reach the end or beginning of the gallery.

    I explain?

  8. Support Staff 8 Posted by Dmitry Semenov on 26 Nov, 2012 09:34 PM

    Dmitry Semenov's Avatar

    Thanks, I get your problem now.

    Unfortunately it might be complex to make such feature as no events fire when dragging "over" last slide.. Also, imo, such interaction is complex for user.

    As an option you may change look of arrow when on last slide, so it point to next project.
    Another option is to add empty fake slides on first and last slide and when user enters them go to next gallery.

    Sorry, can't assist you more here, as it's far out of support.

    Dmitry

  9. 9 Posted by ramon.crusellas on 27 Nov, 2012 03:10 PM

    ramon.crusellas's Avatar

    OK! thanks!!!

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac