Блик, не мешающий ссылке

[serdeles]

https://taxi.yandex.ru/?from=morda — при первом посещении этой страницы можно наблюдать модальное окошко, в котором находится слайдер. Он выполнен в виде смартфона. По клику по экрану смартфона или на кружочки справа от него, слайдер будет листаться.

Я делаю нечто похожее. И столкнулся с такой проблемой: если делать блик на девайсе в виде png с прозрачной вырубкой (скажем, в виде телефона, в котором прорублено прозрачное окошко с бликом для картинок слайдера) и блок (<div>) с этим девайсом поместить над картинками (при помощи z-index), то ссылки (у каждой картинки в слайдере своя) работать не будут — ну, само собой: ведь png с телефоном наверху лежит. Если же положить блок с телефоном под низ, то о блике можно забыть. То есть он есть на самом девайсе (снаружи экрана), однако отсутствует на картинках (слайдах), которые пролистываются (ибо картинки лежат выше и закрывают собою блик). Если отрезать кусок блика от png с девайсом, и положить его в блок над девайсом и картинками, повторится ситуация номер 1: ссылки работать не будут.

А вот у ребят из Яндекса получилось убить сразу обоих зайцев: и блик лежит поверх всего, и ссылки на картинках работают.

Был бы благодарен за подсказку, как такое победить.

И вдвойне был бы благодарен за рабочий пример подобного слайдера, чтобы понять, как там всё работает изнутри.

[Switch74]

не пойму в чем проблема, в премере яндекса не вижу ни каких ссылок под бликом на смартфоне, клик обрабатывается через js как ему и положено. Какие ссылки вам нужно чтобы работали?

http://yandex.st/taxi/_/xwnMK7Qj5bVdXzW341kIkT3v4wI.png - смартфон

http://yandex.st/taxi/_/7zOMimGvH850NiPq_O3NRR8PveA.png - картинка с экрана смартфона

смартфон по верх картинок, клик обрабатывается родителем всего этого а не картинками на экране смартфона

[serdeles]


не пойму в чем проблема, в премере яндекса не вижу ни каких ссылок под бликом на смартфоне, клик обрабатывается через js как ему и положено. Какие ссылки вам нужно чтобы работали?
http://yandex.st/tax...41kIkT3v4wI.png - смартфон
http://yandex.st/tax..._O3NRR8PveA.png - картинка с экрана смартфона
смартфон по верх картинок, клик обрабатывается родителем всего этого а не картинками на экране смартфона


Проблема в том, что вариант, где обработка ссылок вида (a href="ссылка") происходит при помощи js, меня не устроит. Неужели более простого решения не существует? В принципе, тут всё достаточно тривиально и без усложнения задачи. Простой слайдер, каких тысячи в интернете лежит. Единственная загвоздка — блик, который либо закрывает ссылку, либо закрывается картинкой. Уверен, это можно решить без углубления в дебри Javascript.

[Switch74]

в примере на яндексе при клике по кружкам и по экрану смартфона просто листается слайдер, там нет ссылок, если вам нужно, чтобы при клике по экрану переходило на другую страницу, то можно сделать копию невидимых ссылок, которые будут по верх вашего блика и у вас получится такая схема слоев сверху вниз

<невидимые ссылки>

[блик]

[смартфон]

<слайдер>

все что в <> будет двигаться у вас (предположу что как раз с помощью js)

все что в [] статичный не подвижный контент

[serdeles]

в примере на яндексе при клике по кружкам и по экрану смартфона просто листается слайдер, там нет ссылок, если вам нужно, чтобы при клике по экрану переходило на другую страницу, то можно сделать копию невидимых ссылок, которые будут по верх вашего блика и у вас получится такая схема слоев сверху вниз

<невидимые ссылки>

[блик]

[смартфон]

<слайдер>

все что в <> будет двигаться у вас (предположу что как раз с помощью js)

все что в [] статичный не подвижный контент

Дело в том, что у меня картинки в слайдер (да, он работает на js) в админке попадают не вручную, а автоматически при создании документа, собственно и с ссылкой всё так же происходит, она привязана к определенной картинке слайдера. Вид это имеет примерно такой:

<div id="контейнер">
<div id="слайдер"><a href="ссылка"><img src="картинка"></a></div>
<div id="слайдер"><a href="ссылка"><img src="картинка"></a></div>
<div id="слайдер"><a href="ссылка"><img src="картинка"></a></div>
<div id="девайс с бликом" style="z-index:1000;"></div>
</div>

При этом конструкция

<div id="слайдер"><a href="ссылка"><img src="картинка"></a></div>

является повторяемой и генерится автоматически, вместо "ссылка" и "картинка" стоят спецтеги админки. Таких «дивов» может быть сколько угодно, в зависимости от документов, откуда будут браться картинки для слайдера. Поэтому не очень понятно, куда тут поместить невидимые ссылки, и как каждую из них привязать к нужной картинке.

Кстати, это пример, который я описал в самом начале — блок с бликом вверху и сслыки не работают. Если убрать z-index, ссылки будут работать, но зато блик будет обрезан, так как блок окажется под картинками.

Edited April 5, 2013 by serdeles

[Switch74]

ну тогда вам никак не обойтись без копания в js т.к. у вас этот код формируется им.

могу предложить такой вариант, если копание в js - не вариант:

<div id="контейнер" style="position:absolute;z-index:1000;">
<div id="слайдер"><a href="ссылка"><img src="картинка"></a></div>
<div id="слайдер"><a href="ссылка"><img src="картинка"></a></div>
<div id="слайдер"><a href="ссылка"><img src="картинка"></a></div>
<div id="девайс с бликом"></div>
</div>
<div id="контейнер">
<div id="слайдер"><a href="ссылка"><img src="картинка"></a></div>
<div id="слайдер"><a href="ссылка"><img src="картинка"></a></div>
<div id="слайдер"><a href="ссылка"><img src="картинка"></a></div>
<div id="девайс с бликом"></div>
</div>

создаем два слайдера, я так понимаю с одинаковыми id, чтобы они оба одновременно крутились, один с ссылками и прозрачными картинками, потом ваш смартфон с бликом (он я так понимаю создается не скриптом, раз вы можете менять ему z-index) потом еще раз тот же слайдер, но уже с картинками.

так же можно тупо сделать один и тот же слайдер два раза один под другим, но для первого через css скрыть все картинки через visibility:hidden

но с js разобраться нужно - пригодится

[serdeles]

Да, смартфон просто в html лежит, и его ни админка, ни js не касаются. В js смысла ради решения этой задачки копаться вряд ли есть, так как наладить их взаимоотношения с админкой будет непросто. Тогда придется заодно копать и php, чтобы написать дополнительный сниппет и т. д, и т. п. Наверно придется поизвращаться с прозрачными картинками (или пустыми блоками в размер картинкок). В крайнем случае, сотру блик :-)

Спасибо, что подкинули пару идей. Буду копать дальше :-)

Edited April 5, 2013 by serdeles