jquery slider is not working properly in Chrome
Here is a live demo: http://sp.smartclientdemo.com/index.php/portfolio?id=commercial
The problem can be seen by clicking on the last thumbnail. In开发者_如何学JAVA Chrome the gap is coming between the thumbnail and navigational arrows. It working fine with Firefox. The carousel is contained inside this <ul>:
<ul id="pikame" class="pika-thumbs jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; left: -315px; margin: 0px; padding: 0px; width: 1155px;">
Clicking on other thumbnails, for example ones to the left, are working properly in Chrome and the carousel is behaving inconsistently. Here is a screenshot of the problem.
Could you please give me suggestion how to solve problem in chrome.
Thanks, Animesh
I looked at your code and there are now three jQuerys included total and two are at the beginning:
<script type="text/javascript" src="http://sp.smartclientdemo.com/system/sp/themes/conjuction/js/jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="http://sp.smartclientdemo.com/system/sp/themes/conjuction/js/jquery1.js"></script>
Also the last one is included twice. The other time its included at the end of the source where the "pikachoose" starts.
The first one is very old jQuery version 1.2.1 and the last one seems to be 1.5. You should check what jQuery version your carousel plugin supports and use that, or then try if it works fine with newest jQuery version.
I believe the error might be how firefox and chrome handles these multiple times included jquerys and it MIGHT be that chrome uses the older and firefox newer version. You should also tell what firefox version and chrome version you were using if the problem persists after deleting the extra jQuerys.
Here is a complete demo using your resources that works but with all the extra libraries removed. It works as expected in Chrome 13 and Firefox 4.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>portfolio | S.P</title>
<script type="text/javascript" src="http://sp.smartclientdemo.com/system/sp/themes/conjuction/js/jquery1.js"></script>
<script type="text/javascript" src="http://sp.smartclientdemo.com/system/sp/themes/conjuction/js/jquery.pikachoose.js"></script>
<link href="http://sp.smartclientdemo.com/system/sp/themes/conjuction/css/bottom.css" type="text/css" rel="stylesheet" />
<link href="http://sp.smartclientdemo.com/system/sp/themes/conjuction/css/style1.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$('#pikame').PikaChoose({carousel:true});
$('<div class="slide-top"></div>').insertBefore('.pika-stage');
$('<div class="slide-bottom"></div>').insertAfter('.pika-stage');
});
</script>
</head>
<body>
<ul id="pikame" class="jcarousel-skin-pika">
<li><a href="#" ><img src="http://sp.smartclientdemo.com/uploads/files/93270001.JPG" alt=""/></a><span></span></li>
<li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car8.jpg" alt=""/></a><span></span></li>
<li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car1.jpg" alt=""/></a><span></span></li>
<li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car2.jpg" alt=""/></a><span></span></li>
<li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car4.jpg" alt=""/></a><span></span></li>
<li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car5.jpg" alt=""/></a><span></span></li>
<li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car3.jpg" alt=""/></a><span></span></li>
<li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car7.jpg" alt=""/></a><span></span></li>
<li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car9.jpeg" alt=""/></a><span></span></li>
<li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car10.jpeg" alt=""/></a><span></span></li>
</ul>
<div class="portfolioright">
<div class="pikachoose"></div>
</div>
</body>
</html>
Note: It is not a completely valid demo, due to the markup in the JavaScript; but it's close enough.
加载中,请稍侯......
精彩评论