Я использую Polaroid Gallery во введении веб-сайта вместе с html-блоком, как показано в этом тесте. страница: http://www.intellectualloyd.com/ladybug/
При двойном клике по сумке происходит флеш-анимация и изображение увеличивается в середине страницы. В этой ситуации изображение (флэш-объект) должно оставаться перед html-блоком (логотип и т. д.) и возвращаться к наименьшему порядку стека при повторном двойном щелчке по нему.
В коде есть два основных div:
- тот, который содержит блок html в середине
- пустой, который будет содержать флэш-объект:
<div id="flashfullscreen" class="fOff"></div>
После этого я загружаю .swf с библиотекой SWFObject, помещая ее в div #flashfullscreen:
<script type="text/javascript">
//<![CDATA[
var so = new SWFObject("polaroid.swf", "polaroid", "100%", "100%", "8");
// specify the url to the xml-file, default is photos.xml
so.addVariable("xmlURL","photos.xml");
so.addParam("wmode", "transparent");
so.write("flashfullscreen");
//]]>
</script>
Чтобы добиться эффекта двойного щелчка, изменив порядок стека двух div, я использовал jQuery:
<script type="text/javascript">
$(document).ready(function() {
$('#flashfullscreen').dblclick(function() {
$('#flashfullscreen').toggleClass('fOff');
});
});
</script>
.fOff { z-индекс:99!важно; } – это стиль класса.
стиль div flashfullscreen имеет z-index:999.
блок в середине имеет z-index:100.
Грубо говоря, я использую jquery для удаления класса fOff из div flashfullscreen при двойном щелчке, чтобы установить более высокий z-индекс (999) для этого блока, который будет отображаться перед блоком html.
Вы бы, наверное, увидели проблему. Если вы дважды щелкните большое изображение, чтобы «закрыть» его, все в порядке, и порядок стека будет правильно изменен. Но если дважды щелкнуть по пустому месту вокруг, html-блок идет перед изображением, которое все еще «открыто».
Я уверен, что есть более простое и полное решение этой проблемы, редактирование флэш-объекта или использование методов SWFObject. Кто-нибудь может мне помочь?
