Слои против Java, Flash или еще чего

[maxim89]

Всем привет!

Начал делать простенький сайт для фотоотчетов о путешествиях с галереей. за основу взял бесплатную версию фотогалереи на Java (если так правильно говорить) тут: http://www.simplevie...t/simpleviewer/ Все очень просто, понятно и удобно.

Оставалось добавить лишь пару строк описания к самому путешествию (т.е. ко всему сайту-галерее). И сделал это через слои, наложив нужный текст поверх флеш-пространства в свободных от изображения местах. Однако работать это стало только в Мазиле и Хроме (Оперу не пробовал), а IE (версия 6,7,8,9) отказывается. Слой с этой флеш-галереей просто покрывает все остальное содержание сайта независимо от z-index. В процессе экспериментов с разными костылями выяснилось, что никакой текст не получается добавить ниже флеш-галлерей (в тот же слой).

Эксперимент тут: http://maximkv.narod.ru/

Прошу помощи в исправлении ситуации с IE и добавлением текста ниже фото! Буду признателен за любые соображения и указания!

[maxim89]

А может можно для скрипта какое задать значение по принципу z-index?

[Быколай]

помниться, что-то такое было в моей практике. флэш перекрыть z-index'ом перекрыть по-моему невозможно. То ли я устал, то ли вы не чётко формулируете задачу... Короче я ничего не понял

[maxim89]

Получилось так: в Мозиле и Хроме z-index перекрывает флеш другим слоем, а в IE - нет. В чем дело, как сделать перекрытие и в IE? Вот и вся формулировка))

[Быколай]

Получилось так: в Мозиле и Хроме z-index перекрывает флеш другим слоем, а в IE - нет. В чем дело, как сделать перекрытие и в IE? Вот и вся формулировка))

вот тут наверняка есть ответ

[maxim89]

спасибо за хитрую ссылку)) но ответа там не нашел, все что-то рядом, да около...

чуть-чуть голову сломал, но так и не решил проблему. С одной стороны: все из-за галереи-ЯВЫскрипта ("SIMPLEVIEWER EMBED", в нем подозрительный div id="sv-container"),ибо ее заменяю любым другим содержанием, и все работает как по маслу (слои располагаются в соответствии с z-index)! С другой стороны проблема эта - ИЕ, т.к. в Мозиле и Хроме всё работало изначально правильно.

может кто в скрипт заглянет, а то я не компетентен?))

И еще: тут http://codepress.ru/%D1%81%D1%82%D0%B0%D1%82%D1%8C%D0%B8/html-css/flash-%D0%B8-z-index описан вариант, но как мне кажется, это не мой случай - у меня нет "<EMBED>".

Edited October 30, 2012 by maxim89

[strange_atom]

maxim89, не стоит пытаться перекрыть флеш z-index'ом - бесполезно

уберите все z-index'ы и допишите для object, который в div#sv-container - <param name="wmode" value="opaque">

[Great Rash]

А где у вас вообще флеш? Я что-то не заметил.

[strange_atom]

есть у него флеш, только див с ним перекрыт

[Great Rash]

Допер, там не перекрыто, а отрицательный z-index стоит... то-то я смотрю у меня ничего не работает.

[strange_atom]

Great Rash, я под "перекрыто" имел ввиду как раз отрицательный z-index

[maxim89]

есть у него флеш, только див с ним перекрыт

Флеш то есть, но в index.html такого нет, там просто:

<!--START SIMPLEVIEWER EMBED -->

<script type="text/javascript" src="svcore/js/simpleviewer.js"> </script>

<script type="text/javascript"> simpleviewer.ready(function () {simpleviewer.load('sv-container', '100%', '100%', '333333', true);});</script>

<div id="sv-container"> </div>

<!--END SIMPLEVIEWER EMBED -->

А то, что вы процитировали, лежит в каком-то еще месте... "object" и "param" куда вставлять?

Еще в галереевской папке есть simpleviewer.css, но в нем нет #sv-conteiner или #svcp-0-sv-mobile

Допер, там не перекрыто, а отрицательный z-index стоит... то-то я смотрю у меня ничего не работает.

Да нет! отрицательный z-index роли не играет! изначально он был просто 2.

Если не работает или совсем криво отображается, прошу скинуть скрин))

[maxim89]

Итак, дело вот в чем:

В Мозиле (аналогично и в Хроме) сайт выглядит так:

Есть два слоя ("layergallery" с SIMPLEVIEWERом и "layertext" с заголовком и текстом), второй расположен поверх первого в силу значения z-index. Так задумывалось, так и получается.

Однако, Эксплорер видит это по-другому:

По неведомым мне причинам он не считается с z-index и размещает SIMPLEVIEWER поверх всего остального.

С этим вся загвоздка! Как положить заголовок и текст поверх флеша?

Попутно возник второй вопрос: как разместить некий текст-рассказ ниже фото галереи (ниже шильдика SIMPLEVIEWER) за гранью видимости (с полосой прокрутки страницы)?

Может я и сейчас что криво изложил, но это только от того, что любитель!)

Заранее всем благодарен!

Edited November 6, 2012 by maxim89

[strange_atom]

maxim89, у Вас достаточно просто все, если посмотреть в исходники галереи. она просто занимает по 100% ширины и высоты.

откройте web/index.html и вставьте нужные Вам размеры в функцию (вместо 100% высоты (второе значение) я поставил, к примеру, фиксированное значение в px)

а после этого немного поправить css и все.

вот, что у меня из этого вышло

index.html (только внутри body)

<!--START SIMPLEVIEWER EMBED.-->
	<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
	<script type="text/javascript">
	simpleviewer.ready(function () {
		simpleviewer.load('sv-container', '100%', '600px', '222222', true);
	});
	</script>

	<div class="txt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

	<div id="sv-container"></div>
	<!-- END SIMPLEVIEWER EMBED -->

	<div class="abc txt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

в .css добывляем (классы назначьте любые на усмотрение)

body {
  background: #222; /* потому что фон галереи такой. его так же можно изменить в index.html */
  font-family: Verdana, Arial, Helvetica, sans-serif
}
#sv-container {
  position: relative;
  top: 50px;
  left: 0;
  margin-top: -40px;
}
.abc {
  position: relative;
  margin-top: 60px;
}
.txt {
  color: #fff;
}

и вот результат. доделываете его под себя и готово

[maxim89]

strange_atom, с такого решения я и начинал, и даже вообще без слоев (своих). Просто текст вставлял над <!--START SIMPLEVIEWER EMBED.-->. И получал что-то схожее с вашим вариантом:

Идея наложить текст поверх флеша возникла из-за того, что эти 3-4 строчки смещали саму галерею вниз и при размещении вертикально ориентированных фотографий они частично скрывались за нижнюю границу монитора (я понимаю, что это мой частный случай, связанный с разрешением экрана, но, к примеру, на планшетнике вообще половина галереи скрывалась за нижней границей).

С учетом того, что SIMPLEVIEWER имеет в верхней части достаточное пустое пространство, хочу его задействовать (как на моем скрине Мозилы).

И еще, так и не понял где прописаны "object" и "param"? Или это мне не поможет?

Edited November 6, 2012 by maxim89

[strange_atom]

поможет..

думаю, что так не совсем правильно, ибо есть негласное правило "не трожь ядро!". так что, если надумаете обновлять галерею, то все может поломаться

за вывод флеша отвечает скрипт web\svcore\js\swfobject.js

я его поправил для Вас, так что качать не бойтесь и замените им свой

http://rghost.ru/41395762

вот результат. в ie 9, 8, 7 тоже работает

прилагаю стили желтого дива

.abc {
  position: absolute;
  top: 40%;
  left: 40%;
  width: 200px;
  height: 200px;
  background: #ff0;
  text-align: center;
  vertical-align: middle;
  line-height: 200px;
  z-index: 999;
}

[maxim89]

Ооо, работает! Спасибо Вам огромное!!!

Однако, как понимаю, для другой галереи это ядро не подойдет... Насколько сложно мне будет повторить Ваши действия с учетом того, что джаваскипта никогда не касался, но умею читать самоучители, спецификации и хелпы, да и вообще, пытливый?)

[strange_atom]

Я бы Вам просто посоветовал для следующей галереи выбрать что-то без флеша, ибо он не нужен, когда есть html5, css3 и jQuery

берете какую-нибудь готовую галерею (хорошие всегда с мануалами и примерами в архиве), разбираетесь, что к чему, переделываете, меняете дизайн и поведение - так быстро разберетесь.

[maxim89]

Я бы Вам просто посоветовал для следующей галереи выбрать что-то без флеша, ибо он не нужен, когда есть html5, css3 и jQuery

берете какую-нибудь готовую галерею (хорошие всегда с мануалами и примерами в архиве), разбираетесь, что к чему, переделываете, меняете дизайн и поведение - так быстро разберетесь.

Скорее всего вы правы, и предлагаемое вами решение - наиболее рациональное, но те примеры, доступные для скачивания, что я посмотрел кажутся мне сложными, там XHTML, тот же *.js, кучи CCS и т.д.

Я попробовал пойти по вашему пути и влезть в "ядро, тревожить которое нельзя". JS тот еще темный лес, но сравнив то, что вы прислали, с исходником разницу увидел только в куске <param name='wmode' value='opaque'. Так ли это? Если есть еще что-то, подскажите! Склоняюсь к тому, что мне легче быдет несколько раз влезть в ядро, чем что-то новое пристраивать, переделывать и т.д., хотя, это где-то концептуально и не верно.

Искренне благодарен Вам.

П.С. И развивая свою мысль интересуюсь, а не существует ли какой доступный способ сделать сайт так, чтоб фото только по фтп в специальную папку кинул, а они сами в галерее разместились? Может наивно, но идея какая!!!

Edited November 11, 2012 by maxim89

[strange_atom]

maxim89, да, больше ничего не менял

если Вам просто галерея нужна, то есть такие, в которые просто по ftp или даже drag&drop можно фотки перетянуть и они появятся и будет лайтбокс и прочие красивости. можно погуглить что-то вроде iv gallery.

доступные для скачивания, что я посмотрел кажутся мне сложными, там XHTML, тот же *.js, кучи CCS и т.д.

что Вы смотрели? зачем Вам кучи css? начните с то же highslide, к примеру. на оф. сайте даже онлайн-конструктор есть, в котором довольно просто разобраться.

а дописать class="highslide" не очень трудно, cогласитесь

[maxim89]

Разобрался, что-то вроде получилось! Всем спасибо! Особенная признательность strange_atom!!! Респект и удачи!

[Justnewone]

Помнится, сафари вообще не желал поверх флеша что-то показывать.