← Gallery with Visible Nearby Images
Video Gallery →

Gallery with fullscreen

Automatically loads larger images in fullscreen, uses native browser fullscreen (if supported, it may be disabled).

Keyboard arrow navigation is automatically added when fullscreen is entered (but you may enable it for normal state too).

Thumbnails are dynamically resized via media queries on smaller screen size.

Gallery keeps only a few images in DOM to save memory.

Markup for current slider

For better understanding please don't use this HTML file as a starter file, create your own and follow steps in basic usage section of documentation

Slider JavaScript initialization code.

Additional CSS styles for current slider.

#gallery-1 {
  width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;  
  user-select: none;
}

HTML markup of slider.

You should include: jQuery, main slider JavaScript file, main slider CSS file, skin CSS file.
It's recommended to get jquery.royalslider.min.js from build tool. Feel free to combine files in one.
Make sure that paths match locations of files.

List of Starter Templates