Hi, the below jquery works in local environment.
However, when i upload the same file on server, the page doesnt working.
May i know any problem in below coding?
<?php
include("inc_function.php");
connect_db();
?>
<!doctype html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"><div class="pd-wrap">
<link href="style.css" rel="stylesheet">
</head>
<body>
<?php include("inc_header.php")?>
<div class="container">
<div class="row">
<div class="col-md-6">
<div id="slider" class="owl-carousel product-slider">
<?php
$id=$_GET[id];
$sql="select * from `product` where id='$id'";
$result=mysqli_query($connect, $sql);
while($row=mysqli_fetch_array($result,MYSQLI_ASSOC)){
?>
<div class="item">
<img src="<?=$row[Pic]?>">
</div>
<div class="item">
<img src="<?=$row[Pic1]?>">
</div>
<div class="item">
<img src="<?=$row[Pic2]?>">
</div>
<div class="item">
<img src="<?=$row[Pic3]?>">
</div>
<div class="item">
<img src="<?=$row[Pic4]?>">
</div>
</div>
<div id="thumb" class="owl-carousel product-thumb">
<div class="item">
<img src="<?=$row[Pic]?>">
</div>
<div class="item">
<img src="<?=$row[Pic1]?>">
</div>
<div class="item">
<img src="<?=$row[Pic2]?>">
</div>
<div class="item">
<img src="<?=$row[Pic3]?>">
</div>
<div class="item">
<img src="<?=$row[Pic4]?>">
</div>
</div>
<?php
}
?>
</div>
<div class="col-md-6">
<div class="product-dtl">
<div class="product-info">
<?php
$id=$_GET[id];
$sql="select * from `product` where id='$id'";
$result=mysqli_query($connect, $sql);
while($row=mysqli_fetch_array($result,MYSQLI_ASSOC)){
?>
<div class="product-name"><?=urldecode($row[name])?></div>
<div class="product-price-discount"><span><?=nl2br(urldecode($row[price]))?></span></div>
</div>
<p><?=nl2br(urldecode($row[description]))?></p>
<?php
}
?>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity=" sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
var slider = $("#slider");
var thumb = $("#thumb");
var slidesPerPage = 5; //globaly define number of elements per page
var syncedSecondary = true;
slider.owlCarousel({
items: 1,
slideSpeed: 2000,
nav: false,
autoplay: false,
dots: false,
loop: true,
responsiveRefreshRate: 200
}).on('changed.owl.carousel', syncPosition);
thumb
.on('initialized.owl.carousel', function() {
thumb.find(".owl-item").eq(0).addClass("current");
})
.owlCarousel({
items: slidesPerPage,
dots: false,
nav: true,
item: 5,
smartSpeed: 200,
slideSpeed: 500,
slideBy: slidesPerPage,
navText: ['<svg width="18px" height="18px" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>', '<svg width="25px" height="25px" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'],
responsiveRefreshRate: 100
}).on('changed.owl.carousel', syncPosition2);
function syncPosition(el) {
var count = el.item.count - 1;
var current = Math.round(el.item.index - (el.item.count / 2) - .5);
if (current < 0) {
current = count;
}
if (current > count) {
current = 0;
}
thumb
.find(".owl-item")
.removeClass("current")
.eq(current)
.addClass("current");
var onscreen = thumb.find('.owl-item.active').length - 1;
var start = thumb.find('.owl-item.active').first().index();
var end = thumb.find('.owl-item.active').last().index();
if (current > end) {
thumb.data('owl.carousel').to(current, 100, true);
}
if (current < start) {
thumb.data('owl.carousel').to(current - onscreen, 100, true);
}
}
function syncPosition2(el) {
if (syncedSecondary) {
var number = el.item.index;
slider.data('owl.carousel').to(number, 100, true);
}
}
thumb.on("click", ".owl-item", function(e) {
e.preventDefault();
var number = $(this).index();
slider.data('owl.carousel').to(number, 300, true);
});
$(".qtyminus").on("click",function(){
var now = $(".qty").val();
if ($.isNumeric(now)){
if (parseInt(now) -1> 0)
{ now--;}
$(".qty").val(now);
}
})
$(".qtyplus").on("click",function(){
var now = $(".qty").val();
if ($.isNumeric(now)){
$(".qty").val(parseInt(now)+1);
}
});
});
</script>
</html>
4
Replies
AdChoices