Как раз тогда, когда я думал, что этот сценарий наконец-то работает потрясающе. Вздох ...
У меня есть две проблемы, которые, я уверен, связаны между собой. Прежде всего, когда страница изначально загружается в Safari, изображения находятся в одном вертикальном ряду, когда они должны плавать в горизонтальных рядах. Эта проблема исчезает после нажатия на миниатюру.
Вторая проблема заключается в том, что при щелчке по миниатюре область содержимого не может расширяться до ее надлежащей ширины, которая снова равна текущей ширине области содержимого + 75% ее ширины. Эта проблема исчезает при нажатии на второй эскиз. Правильный режим расширения области содержимого виден в Firefox и IE8.
Эта проблема возникает на двух страницах, которые используют сценарий расширения. Соответствующие страницы / сценарии приведены ниже.
Страница 1
<script>
$(document).ready(function() {
$('#back').hide();
$('#full-wrap').hide();
$('#thumb-wrap a').children().not('img').hide();//hide image captions
var moveIt = $('#thumb-wrap').outerWidth(); //Get the width of the thumb-wrap div
$('#thumb-wrap a').click(function(){
var $big = $(this).index(); //get 0-based index of the thumb that was just clicked
$('#ajax-content > h1').hide();//hide the page title
$('#thumb-wrap').hide(); //hide the thumbnails
$(this).children().not('img').clone().appendTo($('#gallery-wrap')).wrapAll('<div class="article"/>').delay(600).fadeIn(); //Clone the image captions and wrap them in an article
$('#back').fadeIn(500); //make the back button appear
$('#full-wrap img').eq($big).siblings().hide(); //Hide all fullsized images that don't match the index of the clicked thumb
$('#full-wrap img').eq($big).show(); //reveal fullsized image that does match the index of the clicked thumbnail
$('#content').animate({'maxWidth': '+=' + moveIt * 0.5 + 'px', 'left': '6%'}, 'slow');
$('#full-wrap').show(100).animate({ 'right': '+=' + moveIt * 0.75 + 'px'}, 'slow'); //slide out by a distance equal to the width of thumb-wrap.
});
$('#back').click(function(){
$(this).fadeOut();//hide the back button
$('.article').remove();//remove the article div
$('#full-wrap').animate({'right': '0', 'opacity' : 'toggle'}, 400);//hide the fullsize image div
$('#content').animate({'maxWidth': moveIt, 'left' : '43%'}, 400);
$('#thumb-wrap').delay(500).fadeIn(500);//reveal the thumbnails
$('#ajax-content > h1').delay(500).fadeIn(100);//show the page title
});
});
</script>
Страница 2
$(document).ready(function() {
moveIt = $('#content').outerWidth();
$('#content').delegate('a', 'click', function(e) {
var currl = $('#content').offset();
if(currl.left > 300){
$('#content').animate({'maxWidth': '+=' + moveIt / 2 + 'px', 'left': '6%'}, 'slow');
}
else{
$('#content').animate({'maxWidth': '-=' + moveIt / 2 + 'px', 'left' : '43%'}, 400);
}
e.preventDefault(); //Hyperlink won't load page link.
});
});
Обычно рендеринг Safari в порядке, пока Firefox счастлив. Что мне не хватает? Любая помощь будет оценена. Этот проект должен состояться примерно через два часа, так что я приступаю к поиску неисправностей.