← Slider with Animated Blocks
Image Gallery with Fullscreen Option →

Gallery with Visible Nearby Images

You may easily remove all these zoom and fade effects add thumbnails, or make this one vertical.

Video can be added to each slide if required, like it's done on fifth slide.

Animated zoom and fade animation is applied only in CSS3-supported browsers.

Non-linear scaling technique is used. When width less then 700px height of gallery is forced to be 400px. Naturally, you can modify this.

Since 9.2.3 update nearby slides option is enabled via JS, you may specify width in percentage of center area.

Markup for current slider

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.

.visibleNearby {
  width: 100%;
  background: #141414;
  color: #FFF;
  padding-top: 25px;
}
.visibleNearby .rsGCaption {
  font-size: 16px;
  line-height: 18px;
  padding: 12px 0 16px;
  background: #141414;
  width: 100%;
  position: static;
  float: left;
  left: auto;
  bottom: auto;
  text-align: center;
}
.visibleNearby .rsGCaption span {
  display: block;
  clear: both;
  color: #bbb;
  font-size: 14px;
  line-height: 22px;
}


/* Scaling transforms */
.visibleNearby .rsSlide img {
  opacity: 0.45;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;

  -webkit-transform: scale(0.9);  
  -moz-transform: scale(0.9); 
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}
.visibleNearby .rsActiveSlide img {
  opacity: 1;
  -webkit-transform: scale(1);  
  -moz-transform: scale(1); 
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

/* Non-linear resizing on smaller screens */
@media screen and (min-width: 0px) and (max-width: 900px) { 
  #gallery-1 {
    padding: 12px 0 12px;
  }
  #gallery-1 .rsOverflow,
  .royalSlider#gallery-1 {
    height: 400px !important;
  }
}
@media screen and (min-width: 0px) and (max-width: 500px) { 
  #gallery-1 .rsOverflow,
  .royalSlider#gallery-1 {
    height: 300px !important;
  }
}

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 and jquery.js from its official site. Always use the latest version. Feel free to combine files in one.
Make sure that paths match locations of files.

List of Starter Templates