Selectable thumbnail list
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<ul class="listrap">
<li>
<div class="listrap-toggle">
<span></span>
<img src="http://lorempixel.com/60/60/people/?v=1" class="img-circle" />
</div>
<strong>My Lorem Option #1</strong>
</li>
<li class="active">
<div class="listrap-toggle">
<span></span>
<img src="http://lorempixel.com/60/60/people/?v=2" class="img-circle" />
</div>
<strong>Your Ipsum Option #2</strong>
</li>
<li class="active">
<div class="listrap-toggle">
<span></span>
<img src="http://lorempixel.com/60/60/people/?v=3" class="img-circle" />
</div>
<strong>Their Consectuer Option #3</strong>
</li>
<li>
<div class="listrap-toggle">
<span></span>
<img src="http://lorempixel.com/60/60/people/?v=4" class="img-circle" />
</div>
<strong>His Adjascent Option #4</strong>
</li>
<li class="active">
<div class="listrap-toggle">
<span></span>
<img src="http://lorempixel.com/60/60/people/?v=5" class="img-circle" />
</div>
<strong>Her Split Option #5</strong>
</li>
</ul>
</div>
</div>
/*
// Listrap v1.0, by Gustavo Gondim (http://github.com/ggondim)
// Licenced under MIT License
// For updates, improvements and issues, see https://github.com/inosoftbr/listrap
*/
.listrap {
list-style-type: none;
margin: 0;
padding: 0;
cursor: default;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.listrap li {
margin: 0;
padding: 10px;
}
.listrap li.active, .listrap li:hover {
background-color: #d9edf7;
}
.listrap strong {
margin-left: 10px;
}
.listrap .listrap-toggle {
display: inline-block;
width: 60px;
height: 60px;
}
.listrap .listrap-toggle span {
background-color: #428bca;
opacity: 0.8;
z-index: 100;
width: 60px;
height: 60px;
display: none;
position: absolute;
border-radius: 50%;
text-align: center;
line-height: 60px;
vertical-align: middle;
color: #ffffff;
}
.listrap .listrap-toggle span:before {
font-family: 'Glyphicons Halflings';
content: "\e013";
}
.listrap li.active .listrap-toggle span {
display: block;
}
,The author is ggondim
Loading...
