<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/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-fluid">
<div class="content-wrapper">
<div class="item-container">
<div class="container">
<div class="col-md-12">
<div class="product col-md-3 service-image-left">
<center>
<div class="mag">
<img id="item-display" data-toggle="magnify" src="http://www.corsair.com/Media/catalog/product/g/s/gs600_psu_sideview_blue_2.png" alt=""></img>
</div>
</center>
</div>
<div class="container service1-items col-sm-2 col-md-2 pull-left">
<center>
<a id="item-1" class="service1-item">
<img src="http://www.corsair.com/Media/catalog/product/g/s/gs600_psu_sideview_blue_2.png" alt=""></img>
</a>
<a id="item-2" class="service1-item">
<img src="http://www.corsair.com/Media/catalog/product/g/s/gs600_psu_sideview_blue_2.png" alt=""></img>
</a>
<a id="item-3" class="service1-item">
<img src="http://www.corsair.com/Media/catalog/product/g/s/gs600_psu_sideview_blue_2.png" alt=""></img>
</a>
</center>
</div>
</div>
<div class="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("bootstrap/bootstrap.min.css");
@import url("bootstrap-override.css");
@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
*********************************************/
.service1-items {
padding: 0px 0 0px 0;
float: left;
position: relative;
overflow: hidden;
max-width: 100%;
height: 321px;
width: 130px;
}
.service1-item {
height: 107px;
width: 120px;
display: block;
float: left;
position: relative;
padding-right: 20px;
border-right: 1px solid #DDD;
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
}
.service1-item > img {
max-height: 110px;
max-width: 110px;
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;
}
.service1-item > img:hover {
cursor: pointer;
opacity: 1;
}
.service-image-left {
padding-right: 50px;
}
.service-image-right {
padding-left: 50px;
}
.service-image-left > center > img,.service-image-right > center > img{
max-height: 155px;
}
.mag {
width:200px;
margin: 0 auto;
float: none;
}
.mag img {
max-width: 100%;
}
.magnify {
position: relative;
cursor: none
}
.magnify-large {
position: absolute;
display: none;
width: 175px;
height: 175px;
-webkit-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%
}
/*
Credits:
https://github.com/marcaube/bootstrap-magnify
*/
!function ($) {
"use strict"; // jshint ;_;
/* MAGNIFY PUBLIC CLASS DEFINITION
* =============================== */
var Magnify = function (element, options) {
this.init('magnify', element, options)
}
Magnify.prototype = {
constructor: Magnify
, init: function (type, element, options) {
var event = 'mousemove'
, eventOut = 'mouseleave';
this.type = type
this.$element = $(element)
this.options = this.getOptions(options)
this.nativeWidth = 0
this.nativeHeight = 0
this.$element.wrap('<div class="magnify" \>');
this.$element.parent('.magnify').append('<div class="magnify-large" \>');
this.$element.siblings(".magnify-large").css("background","url('" + this.$element.attr("src") + "') no-repeat");
this.$element.parent('.magnify').on(event + '.' + this.type, $.proxy(this.check, this));
this.$element.parent('.magnify').on(eventOut + '.' + this.type, $.proxy(this.check, this));
}
, getOptions: function (options) {
options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data())
if (options.delay && typeof options.delay == 'number') {
options.delay = {
show: options.delay
, hide: options.delay
}
}
return options
}
, check: function (e) {
var container = $(e.currentTarget);
var self = container.children('img');
var mag = container.children(".magnify-large");
// Get the native dimensions of the image
if(!this.nativeWidth && !this.nativeHeight) {
var image = new Image();
image.src = self.attr("src");
this.nativeWidth = image.width;
this.nativeHeight = image.height;
} else {
var magnifyOffset = container.offset();
var mx = e.pageX - magnifyOffset.left;
var my = e.pageY - magnifyOffset.top;
if (mx < container.width() && my < container.height() && mx > 0 && my > 0) {
mag.fadeIn(100);
} else {
mag.fadeOut(100);
}
if(mag.is(":visible"))
{
var rx = Math.round(mx/container.width()*this.nativeWidth - mag.width()/2)*-1;
var ry = Math.round(my/container.height()*this.nativeHeight - mag.height()/2)*-1;
var bgp = rx + "px " + ry + "px";
var px = mx - mag.width()/2;
var py = my - mag.height()/2;
mag.css({left: px, top: py, backgroundPosition: bgp});
}
}
}
}
/* MAGNIFY PLUGIN DEFINITION
* ========================= */
$.fn.magnify = function ( option ) {
return this.each(function () {
var $this = $(this)
, data = $this.data('magnify')
, options = typeof option == 'object' && option
if (!data) $this.data('tooltip', (data = new Magnify(this, options)))
if (typeof option == 'string') data[option]()
})
}
$.fn.magnify.Constructor = Magnify
$.fn.magnify.defaults = {
delay: 0
}
/* MAGNIFY DATA-API
* ================ */
$(window).on('load', function () {
$('[data-toggle="magnify"]').each(function () {
var $mag = $(this);
$mag.magnify()
})
})
} ( window.jQuery );
