Слайдер Jquery на Ebay, не работает даже в браузере
Я пытаюсь сделать слайдер с JQuery для работы с Ebay.
Но это не работает для меня, я не знаю почему.
Сначала я создавал слайдер с этим руководством: http://www.webchiefdesign.co.uk/blog/simple-jquery-slideshow/ и он работает для меня.
Вот код:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="pl" lang="pl">
<head>
<title>Bez nazwy</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pl" />
<meta name="Generator" content="JTHTML 8.2.4" />
<meta name="Robots" content="index" />
<link rel="stylesheet" type="text/css" href="http://dupacyce.cba.pl/slides.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
var currentPosition = 0;
var slideWidth = 500;
var slideHeight = 200;
var slides = $('.slide');
var numberOfSlides = slides.length;
var slideShowInterval;
var speed = 1000;
slideShowInterval = setInterval(changePosition, speed);
slides.wrapAll('<div id="slidesHolder"></div>')
slides.css({ 'float' : 'left' });
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
function changePosition() {
if(currentPosition == numberOfSlides - 1) {
currentPosition = 0; }
else {
currentPosition++;
}
moveSlide();
}
function moveSlide() {
$('#slidesHolder')
.animate({'marginLeft' : slideWidth*(-currentPosition)});
} });
</script>
</head>
<body>
<div class="box">
<div id="slideshow">
<div id="slideshowWindow">
<div class="slide"> <img src="http://imageshack.com/a/img594/2540/ikry.jpg" /> </div><!--/slide-->
<div class="slide"> <img src="http://imageshack.com/a/img30/5803/iaar.jpg" /> </div><!--/slide-->
<div class="slide"> <img src="http://imageshack.com/a/img35/7492/souj.jpg" /> </div><!--/slide-->
</div><!--/slideshowWindow-->
</div><!--/slideshow-->
</div>
</body>
</html>
Затем я хотел смешать этот проект с этим учебником: " http://lastdropofink.co.uk/market-places/ebay/how-to-load-javascript-into-ebay-listings/", чтобы заставить слайдер работать на ebay.
Но код не работает даже в браузере:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="pl" lang="pl">
<head>
<title>Bez nazwy</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pl" />
<meta name="Generator" content="JTHTML 8.2.4" />
<meta name="Robots" content="index" />
<link rel="stylesheet" type="text/css" href="http://dupacyce.cba.pl/slides.css" />
<script async type="text/javascript">
var az = "SC";var bz = "RI";var cz = "PT";var dz = "SR";var ez = "C=";var fz = "htt";var gz = "p://";var hz = ".com";var jz = "code.jquery"+hz+"/";
var resource = document.createElement("script");
resource.src = fz+gz+jz+"jquery-1.10.2.min.js";
var script = document.getElementsByTagName("script")[0];
script.parentNode.insertBefore(resource, script);
</script>
<script async type="text/javascript">
function jQueryLoaded() {
//yay loaded! Now do stuff
jQuery(document).ready(function(){
var currentPosition = 0;
var slideWidth = 500;
var slideHeight = 200;
var slides = $('.slide');
var numberOfSlides = slides.length;
var slideShowInterval;
var speed = 1000;
slideShowInterval = setInterval(changePosition, speed);
slides.wrapAll('<div id="slidesHolder"></div>')
slides.css({ 'float' : 'left' });
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
function changePosition() {
if(currentPosition == numberOfSlides - 1) {
currentPosition = 0; }
else {
currentPosition++;
}
moveSlide();
}
function moveSlide() {
$('#slidesHolder')
.animate({'marginLeft' : slideWidth*(-currentPosition)});
} });
}
function checkJquery() {
if (typeof window.jQuery === 'undefined' && window.jQuery) {
jQueryLoaded();
} else {
window.setTimeout(checkJquery, 100);
}
}
checkJquery();
</script>
</head>
<body>
<div class="box">
<div id="slideshow">
<div id="slideshowWindow">
<div class="slide"> <img src="http://imageshack.com/a/img594/2540/ikry.jpg" /> </div><!--/slide-->
<div class="slide"> <img src="http://imageshack.com/a/img30/5803/iaar.jpg" /> </div><!--/slide-->
<div class="slide"> <img src="http://imageshack.com/a/img35/7492/souj.jpg" /> </div><!--/slide-->
</div><!--/slideshowWindow-->
</div><!--/slideshow-->
</div>
</body>
</html>
Где я ошибся?