Проблема с картинками

[moskalev_mihail]

Вот макет: http://filesurf.ru/230610/var_1_bw_3.jpg.html.

Столкнулся с проблемой верстки изображений в галерее справа страницы. Так как они находятся под углом, просто вырезать и вставить в верстку их нельзя, почестям резать их тоже не желательно, так как потом нужно будет встраивать JS для того что бы при нажатие они увеличивались.

Может быть кто нибудь подскажет как именно это можно реализовать? Буду бескрайне благодарен)

[ShumNo]

Два варианты пришло в голову:

1. Если в промышленном масштабе картинки делать не надо, то быть может обработать их в редакторе и как обычные картинки положить на сайт. Фактически картинка будет наезжать одна на другую + прозрачный фон

2. Либо другой вариант повернуть их с помощью JS

[Vlad]

Можно через CSS3, но не универсально, работает не везде. Мне кажется оптимальнее через PHP картинки трансформировать. На сервере хранить в обычном виде, а PHP уже их будет разворачивать и вставлять как новые изображения.

[psywalker]

Вот макет: http://filesurf.ru/230610/var_1_bw_3.jpg.html.

Столкнулся с проблемой верстки изображений в галерее справа страницы. Так как они находятся под углом, просто вырезать и вставить в верстку их нельзя, почестям резать их тоже не желательно, так как потом нужно будет встраивать JS для того что бы при нажатие они увеличивались.

Может быть кто нибудь подскажет как именно это можно реализовать? Буду бескрайне благодарен)

1. А залить рисунок на нормальный хост религия не позволяет?

2. По сабжу. Такое можно при большом желании и настроить в ИЕ6-8, если использовать матричные фильтры. В остальном как сказал Влад, CSS3 тебе в помощь.

[moskalev_mihail]

Благодарю! Буду с JS пытаться повернуть.

[psywalker]

Благодарю! Буду с JS пытаться повернуть.

Просьба: Если всё получится, сделай тестовую страницу с примером плиз.

[moskalev_mihail]

Благодарю! Буду с JS пытаться повернуть.

Просьба: Если всё получится, сделай тестовую страницу с примером плиз.

Не вопрос!

Но возникла проблема: в примере не достаточно просто повернуть изображение, оно должно быть в перспективе , то есть быть повернуто "внутрь". Такое возможно через JS?

[psywalker]

Благодарю! Буду с JS пытаться повернуть.

Просьба: Если всё получится, сделай тестовую страницу с примером плиз.

Не вопрос!

Но возникла проблема: в примере не достаточно просто повернуть изображение, оно должно быть в перспективе , то есть быть повернуто "внутрь". Такое возможно через JS?

Я щас сам попробовал, и что-то у меня уже сомнения появились, что такое можно вообще сделать на CSS3. Очень хотелось бы увидеть решение Влада. Думал, с помощью http://www.xiper.net/manuals/css-extensions/mozilla/properties/moz-transform.html решить, но что-то не вышло или я может чего не так делал.

Так что тут я к сожалению не помогу

[moskalev_mihail]

Нашел решение. Все делается очень просто:

1. Качаем reflex.js с сайта http://www.netzgesta.de/reflex/

2. Интегрируем (вроде правильное слово) в свою страницу:

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

3. Для изменения изображения нужному img присваиваем class="reflex ..."

4. Вместо (...) вставляем разные значения через пробел:

itilt - то, в какую сторону деформируется рисунок (itiltleft\right\none)

iheight - высота отражения (0 - минимальное отражение 100 - максимальное)

iopacity - степень прозрачности отражения (0-100)

idistance - расстояние от изображения до отражения (px)

iborder - рамка вокруг изображения в px (iborder5)

icolor - задаем цвет рамки вокруг изображения(icolorfff)

Автор утверждает что нормально отображается во всех браузерах,даже в уродце IE6. В остальных изображение остается без изменений.

[psywalker]

Нашел решение. Все делается очень просто:

1. Качаем reflex.js с сайта http://www.netzgesta.de/reflex/

2. Интегрируем (вроде правильное слово) в свою страницу:

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

3. Для изменения изображения нужному img присваиваем class="reflex ..."

4. Вместо (...) вставляем разные значения через пробел:

itilt - то, в какую сторону деформируется рисунок (itiltleft\right\none)

iheight - высота отражения (0 - минимальное отражение 100 - максимальное)

iopacity - степень прозрачности отражения (0-100)

idistance - расстояние от изображения до отражения (px)

iborder - рамка вокруг изображения в px (iborder5)

icolor - задаем цвет рамки вокруг изображения(icolorfff)

Автор утверждает что нормально отображается во всех браузерах,даже в уродце IE6. В остальных изображение остается без изменений.

Воо, спасибо дружище! Способ отличный, пашет везде, НО правда отличия есть явные в ИЕ и других браузерах + в хроме края не сглаживаются, как нужно. А так способ вполне рабочий и можно пользоваться.

Единственное не могу разобраться с цветом рамки, чё-та не пашет. Пишу например так: icolorf00, для красного цвета. Что я делаю не так?

[moskalev_mihail]

Нашел решение. Все делается очень просто:

1. Качаем reflex.js с сайта http://www.netzgesta.de/reflex/

2. Интегрируем (вроде правильное слово) в свою страницу:

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

3. Для изменения изображения нужному img присваиваем class="reflex ..."

4. Вместо (...) вставляем разные значения через пробел:

itilt - то, в какую сторону деформируется рисунок (itiltleft\right\none)

iheight - высота отражения (0 - минимальное отражение 100 - максимальное)

iopacity - степень прозрачности отражения (0-100)

idistance - расстояние от изображения до отражения (px)

iborder - рамка вокруг изображения в px (iborder5)

icolor - задаем цвет рамки вокруг изображения(icolorfff)

Автор утверждает что нормально отображается во всех браузерах,даже в уродце IE6. В остальных изображение остается без изменений.

Воо, спасибо дружище! Способ отличный, пашет везде, НО правда отличия есть явные в ИЕ и других браузерах + в хроме края не сглаживаются, как нужно. А так способ вполне рабочий и можно пользоваться.

Единственное не могу разобраться с цветом рамки, чё-та не пашет. Пишу например так: icolorf00, для красного цвета. Что я делаю не так?

Как я понял он воспринимает только шестизначные значения. icolorff0000 у меня заработал.

[psywalker]

Ага, точняк, спасибо!