RoyalSlider – Touch-Enabled jQuery Image Gallery

Hey I was just needing to have a dynamic height for my RoyalSlider and this is how I did it:

 $('#testimonial-gallery').royalSlider({
            captionShowEffects:["fade"],
            controlNavThumbs:true,
            imageAlignCenter:true,
            directionNavEnabled: true,
            welcomeScreenEnabled:false,
            hideArrowOnLastSlide:true,
            //adjust height of slide
            afterSlideChange: function(){
                //set height variable based on total height of desired selector
                var royalSlideHeight = $('.royalCaption:visible .blockquote-wrap').outerHeight();
                //animate the height of the entire slider
                 $('#testimonial-gallery').animate({
                     height: royalSlideHeight
                 });

            }

        });

Hopefully this will help some people. As you can see you’ll have to change the selectors and most likely fiddle with setting the height variable. It’s working pretty well for me now. This slider is awesome, but should have something like this built in.

Does it have callbacks on before? Also, is there a way for it to know in which direction the touch/swipe happened?

What I mean is:

- I swipe to the left, I will see the next image, from the right.

- just as I start the swipe, or after the swipe has finished, I need a callback so I can execute my own stuff.

- I only want the callback to execute if swiping to the left, not also when swiping to the right. So, is it aware of that?

I see ‘afterSlideChange’ above – guess that’s a callback for animation completion. It would be useful to see a list of all the options it has.

Thanks!

Hi there, Have purchased royalslider, and it is generally working like a charm. Very nice! However, I do have an issue: When using classes with -webkit-transitions internally in slides, then: Either a) slides are blinking/glitching on iOS/Anroid or b) (if -webkit-backface-visibility is set to “hidden”) no blinking/glithing but swiping from slide to slide is no longer working on iOS/Anroid, except for the first slide. Testet on iOS 5 iPhone 4/iPad 3 + Android 4.02 on Nexus. Wonder if there is a work-around for this?

Thanks /lars

Hi Dmitry

awesome jquery plugin! I already installed it succesfully and also bought the license for the TouchCarousel

I wanted to ask if it’s possible to have other effects when slideshowEnabled is set to true (ie when the auto slideshow is enabled). As of now it just pulls the slides as one would do manually. Is there a way to have other effects, such as simple as fade or even better a kevin burns pan/zoom?

thank you!

Hi,

I have a slideshow containing about 300 pictures. and i need to have thumbnail navigation enabled. Unfortunately the first picture of the slideshow doesn’t show until the 300 thumbnails are loaded (which takes about 20-30s). I have lazy loading enabled but as far as i can tell it does not work on thumbnails.

It would be nice if the script only loaded 3 pages of thumbnails (current, before, after), instead of all of them. Would this be complicated to add? Please contact me vweb@mcarnolds.be

I’m sorry if this was asked before but i couldn’t find a search on the comments…

Thank you!

Is the slider capable of having a bg image, text and a couple of images in on each slide ?

Excellent and such an useful program. Works like a charm and got a very quick answer to my question!

@PacificWebDesigner

Hi there, From which element you get the height? Where is the class .royalCaption:visible .blockquote-wrap' ? Could you help me with this or is there another way to get autoHeight working?

Thx in advance!