Люди, вы не поняли :) а может я не умею объяснить...
Ещё раз. Сейчас фон (там где замок нарисован) и картинка (там где коричневая рамка и надписи "Главная", "Прайс-лист" и т.д.) подогнаны под один размер. Этот размер не требуется увеличивать, и ничего растягивать не нужно. Нужно как бы фон (картинку, где замок нарисован) не растянуть, а увеличить внутри этой коричневой рамки. Вообще говорили, чтобы этот замок приблизился к пользователю. Но я так думаю, что такого эффекта можно достичь только таким путём, который я описал, т.е. увеличить внутри блока.
Дивы верстать - не знаю... что за background-color=silver? У меня нет такого на сайте, там очень строгая вёрстка, нужно чтобы всё было так, как у дизайнера. Никаких отступлений. Цвета там вообще нет, там одна графика.
Если кто знает, каким ещё путём можно достичь указанного эффекта, буду благодарен за любую подсказку, а также за корректировку (может я неправильно мыслю :))
Ещё раз всем спасибо за помощь :)
P.S. background-size не пойдёт, поскольку он не поддерживается старыми браузерами, а нужно, чтобы было кроссбраузерно всё.
Да я не про то, ёлки-палки!
В IE страница выезжает рывками. В FF и Opera страница выезжает нормально. Я вот это имел в виду.
Пардон, сначала писал про уменьшение, потом про увеличение... взбаламутил народ, наверное... внесу ясность:
Картинка загружена уже уменьшенной, сделал это через CSS. Сейчас вопрос стоит о приближении картинки к пользователю. И уже начинаю думать - это практически возможно, или нет? Я ж приближаю не реальную картинку, а фон, т.е. то, что у меня прописано приблизительно вот так:
#bg{ background-url: url('../images/bg.jpg'); width: ширина картинки height: высота картинки}
Т.е. я пытаюсь выполнить операцию zoom над картинкой images/bg.jpg.
4arger
У меня получается менять размеры фона. Вопрос только в том, как при этом фон не выехал за пределы коричневой рамки.
ко всем
Это принципиальный вопрос, поэтому если это неосуществимо, очень хотелось бы услышать, почему конкретно.
Вы не поняли.... я Lightbox знаю очень хорошо. Но он выводит картинку так, как её бы надо выводить в фотогалерее. Т.е. есть превью, щелкаешь на него, тебе красиво по центру вываливается большая картинка.
Это всё понятно. Но здесь нужно именно, чтобы она динамически приблизилась к пользователю. Не знаю, можете это зумом обозвать, я не знаю, как правильно. Т.е. пользователь кликает на ссылку "Главная", ему появляется текст на внутреннем слое, а бэкграунд автоматически приближается к нему. Причём, не выходя за границы коричневой рамки.
Т.е. надо учитывать, что реальный размер фона 1940 пикселей по ширине, реальная ширина коричневой рамки - 1280 пикселей. Как бы требуется на этот коричневый рисунок наложить overflow-x: hidden, но это НЕ срабатывает, я пробовал.
Простые выкрутасы, типа lightbox, lytebox и прочие "красивости" jQuery здесь неуместны.
Картинка может приблизиться только в одном случае - увеличившись в размерах. Увеличить её в размерах нетрудно (mootools - addClass, removeClass, jquery - animate). Остаётся только добиться того, чтобы каким бы ни был размер увеличенной картинки, (хоть 3000 px по ширине) она бы не выходила за область коричневой рамки. В этом весь вопрос.
Вообще-то WP - это блоговая система. Не существует "форума на WP". Если хотите, можете любой форум ставить, но там надо будет вручную править, чтобы при авторизации скрипт обращался не к базе форума, а к базе WP.
Не-а, ибо ширина картинки 1280, сначала на 640 влево, потом на 50% обратно, получится по центру. суть-то не в этом... я не очень понимаю, как достичь самого зума, как сделать так, чтобы картинка (теоретически, не изменяя размеров) приблизилась.
Изменять размеры, по идее,можно, но только при условии, что фоновое изображение не будет выезжать за пределы коричневой рамки. Т.е. к коричневой рамке как бы вот это:
overflow: hidden;
Но применение такого не даёт ожидаемого эффекта....
Я просто недопонял, картинка потом должна увеличиться... т.е. должен получиться эффект zoom-а.
Здесь ваш ответ.
Я его сначала поставил, потом убрал, ибо сайт грузился с косяками при этом коде и отключённой функции detectWidth() на событие onLoad.
dma84, вы мне скажите другое - сейчас вот такого подёргивания странички при загрузке нет больше?
dma84,
Спасибо за код, но без скрипта onLoad всё равно не получается. Точнее, получается, но лажа :)
А вот сайт, по-моему, заработал нормально! кому не влом, потестите ещё раз, пожалуйста :) дизайнер из 6 картинок одну сделал, сейчас, вроде, всё нормально должно грузиться. На каких-то мониторах может съезжать дизайн, но прыгающей картинки быть НЕ должно.