<!DOCTYPE html>
<html>
<head>
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"> -->
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link href="css/ionicons.css" media="all" rel="stylesheet" type="text/css">
<!-- <link rel="stylesheet" type="text/css" href="css/index.css"> -->
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/lightslider.css"/>
<link rel="stylesheet" type="text/css" href="css/st.css">
<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 type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/myfunctions.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<title>Image Slider</title>
<style type="text/css">
/*.footer-fix {
background-color: transparent;
box-shadow: none;
} */
#main-container {
margin-top: -61%!important;
padding-bottom:0px!important;
}
.main-container .image-view{
bottom:0!important;
height: 600px!important;
width: auto;
}
</style>
<script>
$(document).ready(function () {
if (sessionStorage.code.length) {
var url = base+"/appcode/fetch_product_details_zoom.php";
var img = base+"/img/";
var data1 = "";
var data2 = "";
var product_code = {code: sessionStorage.code};
console.log(product_code);
$.ajax({
url: url,
type: "post",
cache: false,
data: product_code,
dataType: "json",
success: function (response) {
console.log(response);
var response = response.data;
console.log("response[0]");
console.log(response[0]);
data2 += '<img class="largeImage active" id="imageFullScreen" src='+img+localStorage.photo_linkss+'>';
data1 += '<div class="col s2">';
if(localStorage.photo_linkss == response[0].photo_link){
data1 += '<img src='+img+response[0].photo_link+' class="image-zoom active" style="border: 1px solid grey;padding: 2px;border-radius: 2px; height:60px;">';
}else{
data1 += '<img src='+img+response[0].photo_link+' class="image-zoom" style="border: 1px solid grey;padding: 2px;border-radius: 2px; height:60px;">';
}
data1 += '</div>';
if(response[0].photo_link1){
data1 += '<div class="col s2">';
if(localStorage.photo_linkss == response[0].photo_link1){
data1 += '<img src='+img+response[0].photo_link1+' class="image-zoom active">';
}else{
data1 += '<img src='+img+response[0].photo_link1+' class="image-zoom" style="border: 1px solid grey;padding: 2px;border-radius: 2px; height:60px;">';
}
data1 += '</div>';
}
if(response[0].photo_link2){
data1 += '<div class="col s2">';
if(localStorage.photo_linkss == response[0].photo_link2){
data1 += '<img src='+img+response[0].photo_link2+' class="image-zoom active">';
}else{
data1 += '<img src='+img+response[0].photo_link2+' class="image-zoom" style="border: 1px solid grey;padding: 2px;border-radius: 2px; height:60px;">';
}
data1 += '</div>';
}
if(response[0].photo_link3){
data1 += '<div class="col s2">';
if(localStorage.photo_linkss == response[0].photo_link3){
data1 += '<img src='+img+response[0].photo_link3+' class="image-zoom active">';
}else{
data1 += '<img src='+img+response[0].photo_link3+' class="image-zoom" style="border: 1px solid grey;padding: 2px;border-radius: 2px; height:60px;">';
}
data1 += '</div>';
}
if(response[0].photo_link4){
data1 += '<div class="col s2">';
if(localStorage.photo_linkss == response[0].photo_link4){
data1 += '<img src='+img+response[0].photo_link4+' class="image-zoom active">';
}else{
data1 += '<img src='+img+response[0].photo_link4+' class="image-zoom" style="border: 1px solid grey;padding: 2px;border-radius: 2px; height:60px;">';
}
data1 += '</div>';
}
if(response[0].photo_link5){
data1 += '<div class="col s2">';
if(localStorage.photo_linkss == response[0].photo_link5){
data1 += '<img src='+img+response[0].photo_link5+' class="image-zoom active">';
}else{
data1 += '<img src='+img+response[0].photo_link5+' class="image-zoom" style="border: 1px solid grey;padding: 2px;border-radius: 2px; height:60px;">';
}
data1 += '</div>';
}
$(".footer-image").empty().append(data1);
$(".image-view").empty().append(data2);
},
error: function (response) {
console.log(response);
},
complete: function(response){
$('#imageFullScreen').smartZoom();
}
});
}
});
</script>
</head>
<body>
<header class="headers white-text pink-bg z-depth-1 hdrs" style="height: auto;" id="log"></header>
<header class="header headerss pink-bg z-depth-1 hdr" id="log" style="">
<div class="navbar">
<button class="red darken-2 navigation button-collapse" onclick="goBack()">
<i class="ion-android-arrow-back"></i>
</button>
<h5>Zoom Product</h5>
<button class="pink-bg navigation go-to-cart cart-badge-container" onclick="window.location.href='cart.html'">
<i class="ion-android-cart pink-bg"></i>
<span class="cart-badge">0</span>
</button>
</div>
</header>
<!-- <div class="main-container" id="main-container" > -->
<div class="image-view" style="height: 600px!important;width: auto;">
<!-- <img class="largeImage" id="imageFullScreen" src="img/12.png"/> -->
</div>
<!-- </div> -->
<div class="footer-fix">
<div class="row no-margin footer-image" id="thumbs" style="display: block;">
<!-- <div class="col s2">
<img class="active" src="img/12.png"/>
</div> -->
</div>
</div>
<script type="text/javascript" src="js/e-smart-zoom-jquery.js"></script>
<script type="text/javascript" src="js/lightslider.js"></script>
<script>
function goBack() {
//window.location.href = 'index.html';
window.history.back();
}
</script>
<script>
$(document).ready(function(){
$('.footer-image').on('click','.image-zoom',function(){
//alert(1);
$('.largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
$(this).addClass('active');
$(this).parent().siblings().children().removeClass('active');
});
});
</script>
</body>
</html>