Я использую Polaroid Gallery во введении веб-сайта вместе с html-блоком, как показано на этой тестовой странице: http://www.intellectualloyd.com/ladybug/
Если вы дважды щелкнете на сумке, произойдет флэш-анимация, а в середине страницы изображение будет увеличено. В этой ситуации изображение (объект flash) должно находиться перед блоком html (логотип и т. Д.) И возвращаться к наименьшему порядку стека при повторном двойном щелчке по нему.
В коде есть два основных элемента:
- тот, который содержит html блок в середине
- пустой, содержащий объект flash:
<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>
Чтобы добиться эффекта двойного щелчка, меняя порядок стека двух делений, я использовал jQuery:
<script type="text/javascript">
$(document).ready(function() {
$('#flashfullscreen').dblclick(function() {
$('#flashfullscreen').toggleClass('fOff');
});
});
</script>
.fOff {z-index: 99! Важный; } это стиль класса.
Стиль div для flashfullscreen имеет z-index: 999.
блок посередине имеет z-индекс: 100.
Грубо говоря, я использую jquery для удаления класса fOff из div flashfullscreen при двойном щелчке, чтобы установить более высокий z-индекс (999) для этого блока, который будет отображаться перед блоком html.
Вы, вероятно, увидите проблему.
Если вы дважды щелкнете по большому изображению, чтобы «закрыть» его, все в порядке, и порядок в стеке будет полностью изменен. Но если дважды щелкнуть пустое место вокруг, перед изображением появится блок html, который все еще «открыт».
Я уверен, что есть более простое и полное решение этой проблемы, редактирование флеш-объекта или использование методов SWFObject. Кто-нибудь может мне помочь?