Trouble is, 'focus' is used for the desktop, but I need it working for a different DIV for mobile (positioned elsewhere on the page).
This is the desktop one:
Code: Select all
<script type="text/javascript" src="/js/jquery-1.js"></script>
<script type="text/javascript">
$(function() {
var sWidth = $("#focus").width();
var len = $("#focus ul li").length;
var index = 0;
var btn = "<div class='btnBg'></div><div class='btn'>";
for(var i=0; i < len; i++) {
btn += "<span></span>";
}
btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
$("#focus").append(btn);
$("#focus .btnBg").css("opacity",0.9);
$("#focus .btn span").css("opacity",0.9).mouseover(function() {
index = $("#focus .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseover");
$("#focus .preNext").css("opacity",0.8).hover(function() {
$(this).stop(true,false).animate({"opacity":"0.9"},300);
},function() {
$(this).stop(true,false).animate({"opacity":"0.9"},300);
});
$("#focus .pre").click(function() {
index -= 1;
if(index == -1) {index = len - 1;}
showPics(index);
});
$("#focus .next").click(function() {
index += 1;
if(index == len) {index = 0;}
showPics(index);
});
$("#focus ul").css("width",sWidth * (len));
$("#focus").hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(function() {
showPics(index);
index++;
if(index == len) {index = 0;}
});
}).trigger("mouseleave");
function showPics(index) { //????
var nowLeft = -index*sWidth; //??index???ul???left?
$("#focus ul").stop(true,false).animate({"left":nowLeft},300); //??animate()??ul?????????position
//$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //??????????????
$("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate
({"opacity":"1"},300);
}
});
</script>
<div class='homeslider'>
<link href='/source/slider_productdesktop.css' rel='stylesheet' type='text/css' />
<div id='focus'>
<ul style='left: 0px; width: 4000px;'>";
$string = "$row->photo";
$token = strtok($string,"|");
while($token)
{
echo "<li><a href=/images/productphotos/$token' class='MagicZoom' id='Zoomer' rel='selectors-effect-speed: 600; zoom-position: inner;' /><img src='/images/productphotos/$token'></a></li>";
$token = strtok("|");
}
$token = NULL;
echo "</ul>
</div>So how can I use the slider twice, preferablly with just one Javascript?
Incidentlaly, there are two CSS files, but they just control the layout, which is fine.