Stylish jQuery Image Gallery with Slider Control - Slider Gallery

Stylish jQuery Image Gallery with Slider Control - Slider Gallery
File Size: 857 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Slider Gallery is an easy jQuery image gallery plugin that allows you to scroll through a set of images with a slider bar control at the bottom of the gallery.

How to use it:

1. Load the jQuery slider gallery plugin after jQuery javascript library.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/gallery.js"></script>

2. The markup structure to create an image gallery.

<div id="gallery">

<div id="galleryArea">
<ul id="galleryCon">
<li><a href="#"><img src="images/img1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/img2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/img3.jpg" alt=""></a></li>

...

</ul>
</div>

<div id="scrollbar"> 
<a id="scrollBtn" href="javascript:;"></a>
<div id="scrollBg"></div>
</div>

<a id="prevBtn" href="javascript:;"></a> 
<a id="nextBtn" href="javascript:;"></a> 

</div>

3. The CSS to style the gallery and controls.

#gallery {
position: absolute;
top: 50%;
left: 50%;
width: 1320px;
margin: -125px 0 0 -672px;
}
#galleryArea {
width: 100%;
overflow: hidden;
}
#galleryCon {
height: 154px;
padding: 13px 0;
margin-bottom: 50px;
background-color: #1D1D1F;
background: -webkit-linear-gradient(top, #27252A 0%, #232027 50%, #1D1D1F 50%, #1B1B1D 100%);
box-shadow: 0 1px 3px rgba(0,0,0,0.5), inset 0 1px 0 #37343B;
overflow: hidden;
}
#galleryCon li {
float: left;
display: inline;
margin: 0 10px;
border: 2px solid #37343B;
}
#galleryCon li img {
display: block;
width: 240px;
height: 150px;
}
#scrollbar {
position: relative;
width: 500px;
height: 7px;
margin: 0 auto 13px auto;
background: #1A1819;
box-shadow: inset 0 0 5px #0F0D12;
border-radius: 6px;
}
#scrollBtn {
display: block;
position: absolute;
top: -10px;
left: 0;
margin-left: 0;
width: 23px;
height: 23px;
cursor: pointer;
border: 2px solid #151318;
background-color: #1B1B1D;
background: -webkit-linear-gradient(top, #27252A 0%, #232027 50%, #1D1D1F 50%, #1B1B1D 100%);
}
#scrollBg {
position: absolute;
top: 0;
left: 0;
height: 7px;
background-color: #6B32B5;
background: -webkit-linear-gradient(top, #7532BD, #432364);
border-radius: 6px 0 0 6px;
overflow: hidden;
}
#scrollBtn:before {
content: '';
position: absolute;
top: 7px;
left: 7px;
width: 9px;
height: 9px;
background-color: #514559;
}
#scrollBtn:hover {
box-shadow: 0 0 10px #7337BB;
}
#scrollBtn:hover:before { /* IE10不支持该方法 */
background-color: #CE9CE1;
box-shadow: 0 0 5px #7337BB;
}
/* 扩展 */
#prevBtn, #nextBtn {
display: block;
position: absolute;
top: 68px;
width: 40px;
height: 40px;
border: 2px solid #151318;
box-shadow: inset 0 1px 0 #37343B;
background-color: #1B1B1D;
background: -webkit-linear-gradient(top, #27252A 0%, #232027 50%, #1D1D1F 50%, #1B1B1D 100%);
}
#prevBtn {
left: -50px;
}
#nextBtn {
right: -50px;
}
#prevBtn:before, #nextBtn:before {
content: '';
position: absolute;
top: 10px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
#prevBtn:before {
left: 14px;
border-right: 10px solid #514559;
}
#nextBtn:before {
right: 14px;
border-left: 10px solid #514559;
}
#prevBtn:hover:before {
border-right: 10px solid #CE9CE1;
-webkit-filter: drop-shadow(0 1px 8px #7337BB);
}
#nextBtn:hover:before {
border-left: 10px solid #CE9CE1;
-webkit-filter: drop-shadow(0 1px 8px #7337BB);
}

4. Modify the CSS however you like to create your own style.


This awesome jQuery plugin is developed by zhonglimh. For more Advanced Usages, please check the demo page or visit the official website.