Создаем эту простую тему WordPress на основе AJAX, и я создал для нее собственный лайтбокс. Все идет хорошо, но теперь в игру вступил страшный IE.
По какой-то причине содержимое не загружается в IE (проверено только IE8).
Прежде всего, вот ссылка на тему на данный момент: http://themes.thefinishedbox.com/portfolio/, имея в виду, что она все еще находится на ранних стадиях, так что в любом случае в IE будет выглядеть еще хуже.
Нажмите нижний правый значок на изображении.
Класс .postExpand
содержит постоянную ссылку на сообщение, а идентификатор #postEntry
- это то, что я загружаю через AJAX.
Вот jQuery для него, если вы хотите лучше выглядеть, вы можете увидеть необработанный файл здесь: http://themes.thefinishedbox.com/portfolio/wp-content/themes/portfolio/js/custom.js
$(function() {
$('.postExpand').click(function(e) {
e.preventDefault();
$.ajaxSetup ({
cache: false
});
var href = $(this).attr('href');
var loader = "<div id='loader'></div>";
var loadurl = href + ' #postEntry';
$('body').prepend('<div id="overlay" />');
$('#overlay').animate({opacity: 0.8}, 400);
$('body').prepend('<div id="lightBox" />');
$('#lightBox').html(loader).load(loadurl, function() {
$('#postContent').jScrollPane();
$(this).css({backgroundColor: '#fff'});
});
$('#closeBox > div').live('click', function() {
$('body #lightBox').remove();
$('body #overlay').animate({opacity: 0}, 400, function() {
$(this).remove();
});
});
$('body #overlay').mouseup(function() {
$('body #lightBox').remove();
$(this).animate({opacity: 0}, 400, function() {
$(this).remove();
});
});
});
});
Я полагаю, что проблема заключается в var loadurl
, так как я могу изменить его на 'http://themes.thefinishedbox.com/portfolio/'
, и он загрузится.
У кого-нибудь есть идеи, в чем может быть проблема?
EDIT
Это тоже не работает:
var href = $(this).attr('href');
var loadurl = href;