"Product Page"
Bootstrap 3.2.0 Snippet by anielka

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <div class="content-wrapper"> <div class="col-sm-12 col-md-5"> <div class="product col-sm-10 col-md-8 service-image-large"> <img id="item-display" src="https://i.imged.pl/big-sexy-lady.png" alt=""> </div> <div class=" service-items col-sm-2 col-md-4"> <a id="item-1" class="service-item" data-full="https://www.bras4you.com/wp-content/uploads/2017/08/xdoc.jpg" > <img src="https://pbs.twimg.com/profile_images/932819653574918145/2wtCSQiY_400x400.jpg" alt=""> </a> <a id="item-2" class="service-item" data-full="https://i.pinimg.com/564x/84/a9/09/84a909c01322244365718f99c21e56ed.jpg" > <img src="https://pbs.twimg.com/profile_images/932819653574918145/2wtCSQiY_400x400.jpg" alt=""> </a> <a id="item-3" class="service-item" data-full="https://i.imged.pl/big-sexy-lady.png" > <img src="https://pbs.twimg.com/profile_images/932819653574918145/2wtCSQiY_400x400.jpg" alt=""> </a> </div> </div> <div class="col-sm-12 col-md-7"> <div class="product-title">Corsair GS600 600 Watt PSU</div> <div class="product-desc">The Corsair Gaming Series GS600 is the ideal price/performance choice for mid-spec gaming PC</div> <div class="product-rating"><i class="fa fa-star gold"></i> <i class="fa fa-star gold"></i> <i class="fa fa-star gold"></i> <i class="fa fa-star gold"></i> <i class="fa fa-star-o"></i> </div> <hr> <div class="product-price">$ 1234.00</div> <div class="product-stock">In Stock</div> <hr> <div class="btn-group cart"> <button type="button" class="btn btn-success"> Add to cart </button> </div> <div class="btn-group wishlist"> <button type="button" class="btn btn-danger"> Add to wishlist </button> </div> </div> </div> </div> <div class="container-fluid"> <div class="col-md-12 product-info"> <ul id="myTab" class="nav nav-tabs nav_tabs"> <li class="active"><a href="#service-one" data-toggle="tab">DESCRIPTION</a></li> <li><a href="#service-two" data-toggle="tab">PRODUCT INFO</a></li> <li><a href="#service-three" data-toggle="tab">REVIEWS</a></li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="service-one"> <section class="container product-info"> The Corsair Gaming Series GS600 power supply is the ideal price-performance solution for building or upgrading a Gaming PC. A single +12V rail provides up to 48A of reliable, continuous power for multi-core gaming PCs with multiple graphics cards. The ultra-quiet, dual ball-bearing fan automatically adjusts its speed according to temperature, so it will never intrude on your music and games. Blue LEDs bathe the transparent fan blades in a cool glow. Not feeling blue? You can turn off the lighting with the press of a button. <h3>Corsair Gaming Series GS600 Features:</h3> <li>It supports the latest ATX12V v2.3 standard and is backward compatible with ATX12V 2.2 and ATX12V 2.01 systems</li> <li>An ultra-quiet 140mm double ball-bearing fan delivers great airflow at an very low noise level by varying fan speed in response to temperature</li> <li>80Plus certified to deliver 80% efficiency or higher at normal load conditions (20% to 100% load)</li> <li>0.99 Active Power Factor Correction provides clean and reliable power</li> <li>Universal AC input from 90~264V — no more hassle of flipping that tiny red switch to select the voltage input!</li> <li>Extra long fully-sleeved cables support full tower chassis</li> <li>A three year warranty and lifetime access to Corsair’s legendary technical support and customer service</li> <li>Over Current/Voltage/Power Protection, Under Voltage Protection and Short Circuit Protection provide complete component safety</li> <li>Dimensions: 150mm(W) x 86mm(H) x 160mm(L)</li> <li>MTBF: 100,000 hours</li> <li>Safety Approvals: UL, CUL, CE, CB, FCC Class B, TÜV, CCC, C-tick</li> </section> </div> <div class="tab-pane fade" id="service-two"> <section class="container"> </section> </div> <div class="tab-pane fade" id="service-three"> </div> </div> <hr> </div> </div> </div> </div>
/********************************************* Call Bootstrap *********************************************/ @import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"); /********************************************* Theme Elements *********************************************/ .gold{ color: #FFBF00; } /********************************************* PRODUCTS *********************************************/ .product{ border: 1px solid #dddddd; height: 321px; } .product>img{ max-width: 230px; } .product-rating{ font-size: 20px; margin-bottom: 25px; } .product-title{ font-size: 20px; } .product-desc{ font-size: 14px; } .product-price{ font-size: 22px; } .product-stock{ color: #74DF00; font-size: 20px; margin-top: 10px; } .product-info{ margin-top: 50px; } /********************************************* VIEW *********************************************/ .content-wrapper { max-width: 1140px; background: #fff; margin: 0 auto; margin-top: 25px; margin-bottom: 10px; border: 0px; border-radius: 0px; } .container-fluid{ max-width: 1140px; margin: 0 auto; } .view-wrapper { float: right; max-width: 70%; margin-top: 25px; } .container { padding-left: 0px; padding-right: 0px; max-width: 100%; } /********************************************* ITEM *********************************************/ .service-items { padding: 0px 0 0px 0; position: relative; overflow: hidden; max-width: 100%; height: 321px; } .service-item { height: 107px; width:110px; max-width: 100%; display: block; float: left; position: relative; padding-right: 20px; border-right: 1px solid #DDD; border-top: 1px solid #DDD; border-bottom: 1px solid #DDD; position:relative; } .service-item > img { max-width:100%; max-height:100%; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); opacity: 0.6; transition: all .2s ease-in; -o-transition: all .2s ease-in; -moz-transition: all .2s ease-in; -webkit-transition: all .2s ease-in; } .service-item > img:hover { cursor: pointer; opacity: 1; } .service-image-large { padding-right: 50px; position:relative; } .service-image-large > img{ position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); max-width:100%; max-height:100%; }
jQuery(document).ready(function($) { $('.service-item').click(function(e){ e.preventDefault(); $('#item-display').attr('src',$(this).data('full')); }); })

Related: See More


Questions / Comments: