Я работаю на веб-сайте, где отображаются галереи, используя jCarousel. Но что бы я ни старался, я не могу заставить его работать, и мне нужно закончить это до сегодняшнего дня. У меня очень срочный график. Мой код в основном принимает URL-адреса изображений из базы данных и отправляет их в AJAX, который передает его в jCarousel, который создает галерею. Но есть несколько проблем:jCarousel и проблемы с отображением элементов
Он отображается не корректно! Я могу получить только последний элемент, извлеченный из базы данных, и он отображается в нижней строке.
После того, как отображается элемент, извлеченный из базы данных, в первый раз, когда я нажимаю «prev», эффект прокрутки отсутствует, и элемент просто исчезает! Только если я нажимаю «следующий» 2-3 раза, есть эффект прокрутки, и элемент остается видимым.
Мои предметы всегда отображаются в конце карусели!
Это срочно .. Пожалуйста, помогите мне исправить это.
about.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="/skins/tango/skin.css" />
<!--<style type="text/css">
#wrapper
{
width: 700px;
margin-left: auto;
margin-right: auto;
}
#carousel
{
margin-top: 120px;
padding-left: 120px;
}
#side
{
padding-left: 550px;
position: absolute;
padding-top: 120px;
}
#hidden
{
color: #FFFFFF;
}
</style>-->
<script type="text/javascript">
jQuery.easing['BounceEaseOut'] = function(p, t, b, c, d)
{
if ((t/=d) < (1/2.75))
{
return c*(7.5625*t*t) + b;
}
else if (t < (2/2.75))
{
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
}
else if (t < (2.5/2.75))
{
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
}
else
{
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
};
function mycarousel_initCallback(carousel)
{
jQuery('#mycarousel-next').bind('click', function() {
carousel.next();
return false;
});
jQuery('#mycarousel-prev').bind('click', function() {
carousel.prev();
return false;
});
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
easing: 'BounceEaseOut',
wrap: "first",
initCallback: mycarousel_initCallback,
animation: 1000,
scroll: 3,
visible: 3,
buttonNextHTML: null,
buttonPrevHTML: null
});
jQuery('#mycarousel2').jcarousel({
easing: 'BounceEaseOut',
animation: 1000,
wrap: "first",
initCallback: mycarousel_initCallback,
scroll: 3,
visible: 3,
buttonNextHTML: null,
buttonPrevHTML: null
});
jQuery('#mycarousel3').jcarousel({
easing: 'BounceEaseOut',
animation: 1000,
scroll: 3,
wrap: "first",
initCallback: mycarousel_initCallback,
visible: 3,
buttonNextHTML: null,
buttonPrevHTML: null
});
});
var prevButton = null;
function getObject(b, el)
{
var currbutton = b;
var http;
var url = "about.php";
var parameters = "d=carousel&cat=" + currbutton;
try
{
http = new XMLHttpRequest();
}
catch(e)
{
try
{
http = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
http = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function getServer()
{
if (http.readyState == 4)
{
var i = 0;
var liArr = http.responseText;
var built = liArr.split(", ");
var li = document.createElement("li");
var ul1 = document.getElementById("mycarousel");
var ul2 = document.getElementById("mycarousel2");
var ul3 = document.getElementById("mycarousel3");
if (el != prevButton)
{
prevButton = el;
while (ul1.hasChildNodes()) {ul1.removeChild(ul1.lastChild);}
while (ul2.hasChildNodes()) {ul2.removeChild(ul2.lastChild);}
while (ul3.hasChildNodes()) {ul3.removeChild(ul3.lastChild);}
}
else
return 0;
while (i < (built.length)/3)
{
li.innerHTML = built[i];
ul1.appendChild(li);
i++;
}
while (i < ((built.length)/3)*2)
{
li.innerHTML = built[i];
ul2.appendChild(li);
i++;
}
while (i < (built.length))
{
li.innerHTML = built[i];
ul3.appendChild(li);
i++;
}
}
}
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", parameters.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = getServer;
http.send(parameters);
}
</script>
</head>
<body>
<span id="hidden"> </span>
<div id="wrapper">
<div id="side">
<form name="cats">
<input type="button" value="Hats" onclick="getObject('hats', this);"/><br />
<input type="button" value="Pants" onclick="getObject('pants', this);"/><br />
<input type="button" value="Shirts" onclick="getObject('shirts', this);"/><br />
</form>
</div>
<div id="carousel">
<ul id="mycarousel" class="jcarousel-skin-tango">
</ul>
<ul id="mycarousel2" class="jcarousel-skin-tango">
</ul>
<ul id="mycarousel3" class="jcarousel-skin-tango">
</ul>
<input type="button" id="mycarousel-prev" value="prev" />
<input type="button" id="mycarousel-next" value="next" />
</div>
</div>
</body>
</html>
Я прокомментировал CSS, потому что я думал, что это дает мне неприятности, но если честно, я понятия не имею, что, черт возьми, происходит с jCarousel.
about.php:
<?php
echo "<img width='75' height='75' src='http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg' />, hi, hi, hi, hi, hi, hi, hi, hi";
?>
Кроме того, даже если нет никаких других элементов, чем то, что отображается, я все еще в состоянии прокрутить назад, но не вперед, потому что мой предположительно, элемент всегда помещается в конец карусели.
Я знаю, что это похоже на много кода, но на самом деле это не так! Мое форматирование занимает много строк, комментарии CSS очень много, и много кода - это конфигурация HTML и jCarousel, а также эффект BounceEasing, который занимает несколько строк. Там очень мало кода!
Как я уже сказал, это срочно, и мне нужно это исправление. Но я не могу заставить его работать. Пожалуйста, помогите мне!
Спасибо за ваше время!
EDIT:
Я изменил код немного, но он по-прежнему не работает. Мне действительно нужна помощь в этом!
РЕДАКТИРОВАТЬ:
Я добавил document.createElement ("Ли"); для каждого цикла while. Теперь отображаются все мои объекты, но они отображаются вертикально, а не горизонтально в каждой строке. Кроме того, все остальные проблемы одинаковы.
EDIT:
О, а также, в строке мои изображения отображаются, только изображение есть. Может быть, jCarousel не принимает img и текст, я не знаю.
EDIT:
Я перегрузочные строки, но это ничего не меняет.Кроме того, я попытался добавить больше изображений вместо «привет», и кажется, что, несмотря ни на что, я могу получить только 1 элемент для отображения в первой строке.
РЕДАКТИРОВАТЬ:
В окружении функция initCallback с тем, если (состояние == 'инициализации'). Это только частично работает. Только если обновить страницу много раз и спамить кнопку prev, я заставляю ее работать. Эффект прокрутки пока не изменяется примерно до 10-го щелчка. И, первая строка все еще содержит только 1 элемент, и все они вертикальны. Я думаю, что первая строка имеет только 1 элемент, потому что я помещаю изображение там, и карусель имеет фиксированную высоту, поэтому нет места для следующего элемента, и он просто удаляет его.
EDIT:
Он работает только тогда, когда я нажимаю на кнопку ПРЕД точно такой же момент загрузки изображений. И я имею в виду, точно в тот же момент. Что это означает, с точки зрения кода? Как это исправить?????? Пожалуйста помоги!
Спасибо! Это решило немного! Но теперь проблема изменилась: теперь она отображает вертикально, в каждой строке, а не по горизонтали. Кроме этого, все одинаково. – Lockhead
Это больше похоже на проблему css :) Появляется ли ваш![]()
? –
Кстати, jCarousel - это плагин jQuery, правильно? Не было бы проще делать ваши вызовы ajax и ваши манипуляции с DOM с помощью jQuery? –