рассматриваемый сайт: http://homecapture.ca/testset/index.html
Сценарий: у меня есть меню с вкладками, созданное из неупорядоченного списка, при щелчке по пункту меню отображается iframe, который ссылается на страницу, содержащую галерею изображений. Я использую вкладки пользовательского интерфейса jQuery для меню вкладок, а галереи, на которые я ссылаюсь, являются страницами jQuery Galleria, автоматически создаваемыми с помощью Jalbum.
Проблема: плагин Galleria нормально работает только изнутри содержащего iframe в Chrome 5.0, работает некорректно в IE8 (кажется, работает в моей локальной копии, но не загружается должным образом в сети) и не работает правильно загружен в Firefox 3.6.3. Вместо отображения области миниатюр и первого большого изображения на странице Galleria отображается только первая миниатюра, затем при щелчке по изображению, на которое она ссылается, но если щелкнуть правой кнопкой мыши и вернуться назад, содержимое iframe отображается как правильно визуализированная страница Galleria.
код выглядит так:
<head>
<title>homecapture.ca</title>
<!-- link to jquery-ui-1.8.1.custom.css rel="stylesheet" -->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Tabs
$('#tabs').tabs();
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
<!--there are some more css in here for now-->
</head>
<body>
<div id="tabs" style="margin:0 auto;clear:both;">
<ul>
<li><a href="#tabs-1"> 1 </a></li>
<li><a href="#tabs-2"> 2 </a></li>
<li><a href="#tabs-3"> 3 </a></li>
<li><a href="#tabs-4"> 4 </a></li>
</ul>
<div id="tabs-1">
<p> Information </p>
</div>
<!--- this tab loads a flash application and works fine -->
<div id="tabs-2">
<iframe src="tour/index.html" width="960" height="700"></iframe></div>
<!-- image gallery tab-->
<iframe id="tabs-3" src="gallery_jd/index.html" width="960" height="700"></iframe>
<!-- drawings tab -->
<iframe id="tabs-4" src="gallery/index.html" width="960" height="700"></iframe>
</div> <!-- end tabbed content-->
</body>
Jalbum генерирует скрипт в страницы iframed в дополнение к ссылкам на jQuery и плагин galleria. Кажется, все это отвечает за навигацию по галерее, и я переместил ее на страницы, чтобы заставить его загружаться после сценариев родительской страницы и вместе с содержимым галереи.
РЕДАКТИРОВАТЬ: просмотрев больше, кажется, что простое перемещение скрипта из заголовка в конец тела не обязательно приводит к загрузке всего iframe перед кодом (что, похоже, является проблемой)
На данный момент я не уверен, что еще я мог бы сделать, чтобы решить проблему, не копаясь во всей или некоторых библиотеках и не вставляя файлы .js (что я не достаточно осведомлен, чтобы обходиться без некоторых указателей). Кто-нибудь имел дело с подобной проблемой? Я вижу некоторые решения для манипулирования контентом iframe с родительской страницы с помощью jQuery, это то, что я должен исследовать вместо этого?
Привет, прежде всего - я не совсем новичок в javascript, но не владею им, как я в html и css, и особенно новичок в jQuery ... поэтому, пожалуйста, извините, если этот вопрос кажется легким или очевидно, но после нескольких дней Google у меня все еще нет решения проблемы ... используя jQuery 1.4.2.min, jQuery-ui-1.8.1 ....