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
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.
jQuery(document).ready(function($) {
var si = $('#gallery-1').royalSlider({
addActiveClass: true,
arrowsNav: false,
controlNavigation: 'none',
autoScaleSlider: true,
autoScaleSliderWidth: 960,
autoScaleSliderHeight: 340,
loop: true,
fadeinLoadedSlide: false,
globalCaption: true,
keyboardNavEnabled: true,
globalCaptionInside: false,
visibleNearby: {
enabled: true,
centerArea: 0.5,
center: true,
breakpoint: 650,
breakpointCenterArea: 0.64,
navigateByCenterClick: true
}
}).data('royalSlider');
$('.slide4link').click(function(e) {
si.goTo(4);
return false;
});
});
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;
}
.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);
}
@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.
<div id="gallery-1" class="royalSlider rsDefault visibleNearby">
<a class="rsImg" href="../img/paintings/700x500/1.jpg" data-rsw="400" data-rsh="500">Still Life: Vase with Twelve Sunflowers<span>Vincent van Gogh</span></a>
<a class="rsImg" href="../img/paintings/700x500/3.jpg" data-rsw="336" data-rsh="500">Mona Lisa<span>Leonardo da Vinci</span></a>
<a class="rsImg" href="../img/paintings/700x500/4.jpg" data-rsw="417" data-rsh="500">American Gothic<span>Grant DeVolson Wood</span></a>
<a class="rsImg" href="../img/paintings/700x500/5.jpg" data-rsw="601" data-rsh="500">The Night Watch<span>Rembrandt</span></a>
<a class="rsImg" href="../img/paintings/700x500/2.jpg" data-rsw="632" data-rsh="500" data-rsvideo="http://www.youtube.com/watch?v=HFbHRWwyihE">The Starry Night (with video)<span>Vincent van Gogh</span></a>
<a class="rsImg" href="../img/paintings/700x500/6.jpg" data-rsw="350" data-rsh="500">Girl with a Pearl Earring<span>Johannes Vermeer</span></a>
<a class="rsImg" href="../img/paintings/700x500/7.jpg" data-rsw="596" data-rsh="500">Card Players<span>Paul Cezanne</span></a>
<a class="rsImg" href="../img/paintings/700x500/8.jpg" data-rsw="700" data-rsh="500">Reply of the Zaporozhian Cossacks<span>Ilya Repin</span></a>
<a class="rsImg" href="../img/paintings/700x500/9.jpg" data-rsw="470" data-rsh="500">Chesmabattle<span>Ivan Aivazovsky</span></a>
<a class="rsImg" href="../img/paintings/700x500/10.jpg" data-rsw="500" data-rsh="500">The Kiss<span>Gustav Klimt</span></a>
<a class="rsImg" href="../img/paintings/700x500/11.jpg" data-rsw="700" data-rsh="475">Morning in a Pine Forest<span>Ivan Shishkin</span></a>
</div>
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.
<script src="../assets/royalslider/jquery-1.8.3.min.js" />
<script src="../assets/royalslider/jquery.royalslider.min.js" />
<link href="../assets/royalslider/royalslider.css" rel="stylesheet">
<link href="../assets/royalslider/skins/default/rs-default.css" rel="stylesheet">
List of Starter Templates