Trouble removing slides with the jQuery method

centinel3's Avatar

centinel3

12 Dec, 2012 10:34 AM

I have successfully removed slides with the specific slide number (sliderinstance.data(royalslider).removeSlide) though I need use the jQuery way to remove slides by specific image and not by slide position (due to the fact that removal of a slide changes the slide position of all other slides which makes it impossible to target after a couple are removed).

I have implemented the jQuery method and I can't get the slides to remove. I have tried the appendSlide and it appends the first 'top-left' slide and no others. Also, is the index of the slide needed with the jQuery method?

I'm not sure what I'm doing wrong here and any help would be much appreciated. Thank you in advance! -Chris

Dev site: http://www.beingproperties.com/match-game/

My code:

var sliders = [  $("#top-left").data('royalSlider'), $("#top-right").data('royalSlider'), $("#bottom-left").data('royalSlider'), $("#bottom-right").data('royalSlider') ]; // slider instances

    $.each(sliders, function(key, value) {
        this.ev.on('rsAfterSlideChange', function() {

            if (($('#top-left .rsActiveSlide img').attr('alt') == '1') && ($('#top-right .rsActiveSlide img').attr('alt') == '1') && ($('#bottom-left .rsActiveSlide img').attr('alt') == '1') && ($('#bottom-right .rsActiveSlide img').attr('alt') == '1')) {


                    // - This is a starburst for each match
                    $("#starBurst").fadeIn('slow', function(){
                        $("#starBurst").delay(500).fadeOut(500,function(){
                        $score();
                        });
                    });

                    //console.log($('#bottom-right').data('royalSlider').slides);

                    // This works with non Dynamic slides 
                    $('#top-left').royalSlider('removeSlide', '<img class="rsImg" src="images/[email blocked]" alt="1" />', 0);
                    $('#top-right').royalSlider('removeSlide', '<img class="rsImg" src="images/[email blocked]" alt="1" />', 0);
                    $('#bottom-left').royalSlider('removeSlide', '<img class="rsImg" src="images/[email blocked]" alt="1" />', 0);
                    $('#bottom-right').royalSlider('removeSlide', '<img class="rsImg" src="images/[email blocked]" alt="1" />', 1);

                    // This works with non Dynamic slides - OLD WAY with slide number - WORKS
                    //$('#top-left').data('royalSlider').removeSlide(0);
                    //$('#top-right').data('royalSlider').removeSlide(0);
                    //$('#bottom-left').data('royalSlider').removeSlide(0);
                    //$('#bottom-right').data('royalSlider').removeSlide(1);


                } 

                else {
                    //Do nothing
            }
        });
    });
  1. Support Staff 1 Posted by Dmytro Semenov on 12 Dec, 2012 10:08 PM

    Dmytro Semenov's Avatar

    Hi,

    Those methods (jQuery and non-jqueyr) are completely equal, "jQuery" method is just shorthand.
    removeSlide method only supports ID.

    But you may loop through list of slides to find id by image url

    var slider = jQuery('.royalSlider').data('royalSlider');
    var slides = slider.slides;
    for(var i = 0; i < slides.length; i++ ) {
        console.log(slides[i].image);
        if(slides[i].image == 'your-path-to-image') {
         // do something
       }
    }
    

    Dmitry

  2. 2 Posted by centinel3 on 13 Dec, 2012 02:01 AM

    centinel3's Avatar

    I am struggling with the way to incorporate this into the afterSlideChange event. I have tried a handful of ways to incorporate this and am falling short. Once the id is identified what would be the proper way to remove that specific slide?

    I have been toying around with a different approach since I can't figure this out. That code is below, though not ideal as I would like to be able to target the image to be removed a bit easier than this. Thank you for your help and insight with this.

    Here is my code:

    var sliders = [  $("#top-left").data('royalSlider'), $("#top-right").data('royalSlider'), $("#bottom-left").data('royalSlider'), $("#bottom-right").data('royalSlider') ]; // slider instances
    
        $.each(sliders, function(key, value) {
            this.ev.on('rsAfterSlideChange', function() {
    
    if (($('#top-left .rsActiveSlide img').attr('alt') == '1') && ($('#top-right .rsActiveSlide img').attr('alt') == '1') && ($('#bottom-left .rsActiveSlide img').attr('alt') == '1') && ($('#bottom-right .rsActiveSlide img').attr('alt') == '1')) {
    
    
                        $("#top-left").data('royalSlider').removeSlide(0);
                        $("#top-right").data('royalSlider').removeSlide(12);
                        $("#bottom-left").data('royalSlider').removeSlide(17);
                        $("#bottom-right").data('royalSlider').removeSlide(5);
                        $("#top-left").data('royalSlider').goTo(1);
    
    
                    }
    
    else if (($('#top-left .rsActiveSlide img').attr('alt') == '2') && ($('#top-right .rsActiveSlide img').attr('alt') == '2') && ($('#bottom-left .rsActiveSlide img').attr('alt') == '2') && ($('#bottom-right .rsActiveSlide img').attr('alt') == '2')) {
    
    
    
                        $("#top-left").data('royalSlider').removeSlide(1);
                        $("#top-right").data('royalSlider').removeSlide(7);
                        $("#bottom-left").data('royalSlider').removeSlide(1);
                        $("#bottom-right").data('royalSlider').removeSlide(3);
    
    
                    } 
    
                    else {
                        //Do nothing
                }
            });
        });
    
  3. Support Staff 3 Posted by Dmytro Semenov on 14 Dec, 2012 11:49 PM

    Dmytro Semenov's Avatar

    I'm sorry, I can't help you much here, as I don't understand whole picture. Please provide link to your page and localize problem.

    Dmitry

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