<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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">
<div class="col-md-12 selected_element">
<div class="col-md-12">
<div class="col-sm-6">
<div class="thumb-container">
<div class="thumb-img"><img src="https://fakeimg.pl/400x250/"></div>
</div>
</div>
<div class="col-sm-6">
<h3 class="product-title" style="color:black; text-align:center">Product Name</h3>
<p class="product-description">Product Description</p>
<h4 class="price">current price: 69$</h4>
<p class="vote">Currently in stock: <strong>12 </strong>products</p>
<h5 class="sizes">sizes:
<span class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Small">S</span>
<span class="btn btn-default" data-toggle="tooltip" title="Medium">M</span>
<span class="btn btn-default" data-toggle="tooltip" title="Large">L</span>
<span class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Extra large">XL</span>
<span class="btn btn-default disabled" data-toggle="tooltip" title="Not Available">XXL</span>
</h5>
<h5 class="colors">colors:
<span class="btn btn-default" data-toggle="tooltip" title="White">White</span>
<span class="btn btn-black" data-toggle="tooltip" title="Black">Black</span>
<span class="btn btn-success" data-toggle="tooltip" title="Green">Green</span>
<span class="btn btn-danger" data-toggle="tooltip" title="Red">Red</span>
<span class="btn btn-primary" data-toggle="tooltip" title="Blue">Blue</span>
<span class="btn btn-warning" data-toggle="tooltip" title="Yellow">Yellow</span>
</h5>
<div class="col-lg-3">
<h5 class="quantity" style="text-align:left; margin-left:-15%">Quantity:</h5>
</div>
<div class="col-lg-5">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="quantity-minus btn btn-danger btn-number" data-toggle="tooltip" data-placement="left" title="Remove Produce" data-type="minus" data-field="">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" style="text-align:center" id="quantity" name="quantity" class="form-control input-number" value="10" min="1" max="100">
<span class="input-group-btn">
<button type="button" class="quantity-plus btn btn-success btn-number" data-type="plus" data-toggle="tooltip" data-placement="right" title="Add Produce" data-field="">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</input>
</div>
</div>
<div class="col-md-4"></div>
<div class="action">
<button class="add-to-cart btn btn-warning" type="button"><i class="glyphicon glyphicon-shopping-cart"></i> Add to cart</button>
<button class="like btn btn-success" type="button"><i class="glyphicon glyphicon-usd"></i>Buy Now</span></button>
<button class="add-to-cart btn btn-danger" type="button" data-toggle="tooltip" data-placement="right" title="Favourite Item"><i class="glyphicon glyphicon glyphicon-heart"></i></button>
</div>
</div>
</div>
<div class="col-sm-12" style="margin:1%">
<button class="btn btn-block btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Gallery</button>
</div>
<div class="collapse" id="collapseExample">
<div class="well">
<div class="col-sm-6" id="slider-thumbs">
<!-- Bottom switcher of slider -->
<ul class="hide-bullets">
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-16">
<img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/Thumb/falko_gallery_accessories16.jpg">
</a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-1"><img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/Thumb/falko_gallery_accessories01.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-2"><img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/Thumb/falko_gallery_accessories02.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-3"><img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/Thumb/falko_gallery_accessories03.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-4"><img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/Thumb/falko_gallery_accessories04.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-5"><img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/Thumb/falko_gallery_accessories05.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-6"><img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/Thumb/falko_gallery_accessories06.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-7"><img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/Thumb/falko_gallery_accessories07.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-8"><img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/Thumb/falko_gallery_accessories08.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-9"><img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/Thumb/falko_gallery_accessories09.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-10"><img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/Thumb/falko_gallery_accessories10.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-11"><img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/Thumb/falko_gallery_accessories11.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-12"><img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/Thumb/falko_gallery_accessories12.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-13"><img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/Thumb/falko_gallery_accessories13.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-14"><img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/Thumb/falko_gallery_accessories14.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-15"><img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/Thumb/falko_gallery_accessories15.jpg"></a>
</li>
</ul>
</div>
<div class="col-sm-6">
<div class="col-xs-12" id="slider">
<div class="row">
<div class="col-sm-12" id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="16">
<img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/falko_gallery_accessories16.jpg"></div>
<div class="item" data-slide-number="1">
<img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/falko_gallery_accessories01.jpg"></div>
<div class="item" data-slide-number="2">
<img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/falko_gallery_accessories02.jpg"></div>
<div class="item" data-slide-number="3">
<img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/falko_gallery_accessories03.jpg"></div>
<div class="item" data-slide-number="4">
<img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/falko_gallery_accessories04.jpg"></div>
<div class="item" data-slide-number="5">
<img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/falko_gallery_accessories05.jpg"></div>
<div class="item" data-slide-number="6">
<img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/falko_gallery_accessories06.jpg"></div>
<div class="item" data-slide-number="7">
<img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/falko_gallery_accessories07.jpg"></div>
<div class="item" data-slide-number="8">
<img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/falko_gallery_accessories08.jpg"></div>
<div class="item" data-slide-number="9">
<img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/falko_gallery_accessories09.jpg"></div>
<div class="item" data-slide-number="10">
<img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/falko_gallery_accessories10.jpg"></div>
<div class="item" data-slide-number="11">
<img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/falko_gallery_accessories11.jpg"></div>
<div class="item" data-slide-number="12">
<img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/falko_gallery_accessories12.jpg"></div>
<div class="item" data-slide-number="13">
<img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/falko_gallery_accessories13.jpg"></div>
<div class="item" data-slide-number="14">
<img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/falko_gallery_accessories14.jpg"></div>
<div class="item" data-slide-number="15">
<img src="https://bufiles.blob.core.windows.net/co3628/gallery/accessories/falko_gallery_accessories15.jpg"></div>
</div>
<!-- Carousel nav -->
<!--<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/Slider-->
</div>
<p>Thanks to <a href="http://bootsnipp.com/Harut">Harut</a> for <a href="http://bootsnipp.com/snippets/WPmbr"> gallery slider</a> snippet</p>
</div>
@import url('https://fonts.googleapis.com/css?family=Lato');
body
{
font-family:Lato;
}
.selected_element
{
background: #eee;
border: 1 solid gray;
padding-top:10px;
}
.product-title, .price, .sizes, .colors, .quantity
{
text-transform: UPPERCASE;
font-weight: bold;
}
.checked, .price span
{
color: #ff9f1a;
}
.product-title
{
margin-top: 0;
}
.action
{
margin-top:15%;
}
.btn-black
{
background-color:black;
color:white;
}
.btn-black:hover
{
color:white;
border: 1px solid gray;
}
.thumb-container {
position: relative;
padding-bottom:45px;
margin: 0px;
overflow: hidden;
width:500px;
height:300px;
}
.thumb-img {
position: absolute;
width: 100%;
height: 100%;
border-radius: 0px;
padding: 0px;
overflow: hidden;
border: 0px;
}
.thumb-img img {
position: absolute;
top: 0;
bottom: 0;
left: -100%;
right: -100%;
height:100%;
margin: auto;
width: auto;
}
.hide-bullets {
list-style:none;
margin-left: -40px;
margin-top:20px;
}
.thumbnail {
padding: 0;
}
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
width: 100%;
}
.col-sm-3 a {
border: 1px solid transparent;
border-radius: 0;
transition: all 3s ease;
}
.col-sm-3 a:hover {
border: 1px solid #ff4647;
border-radius: 100% 60% / 30% 10%;
background: linear-gradient(rgba(56,123,131,0.7),rgba(56,123,131,0.7));
}
// Used for tooltips
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
jQuery(document).ready(function($) {
$('#myCarousel').carousel({
interval: 5000
});
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click(function () {
var id_selector = $(this).attr("id");
try {
var id = /-(\d+)$/.exec(id_selector)[1];
console.log(id_selector, id);
jQuery('#myCarousel').carousel(parseInt(id));
} catch (e) {
console.log('Regex failed!', e);
}
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid.bs.carousel', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});
$(document).ready(function()
{
var q=0;
$('.quantity-plus').click(function(e){
e.preventDefault();
var q = parseInt($('#quantity').val());
$('#quantity').val(q + 1);
});
$('.quantity-minus').click(function(e){
e.preventDefault();
var q = parseInt($('#quantity').val());
if(q>0){
$('#quantity').val(q - 1);
}
});
});
