как сделать эффект с увеличение картинки
есть вот такой эффект
http://www.boutique.ru/peter-som/ec2...-00304833051e/ при нажатии на картину она увеличивается в этой же странице и справа появляются 3 картинки которые были внизу также если нажать на любую из 3 маленьких картинок то она увеличится в большое окно а при подводе на любую из 3 маленьких картинок на 1й странице она сразу грузится в основное окно как такое сделать? |
с помощью js и html.
|
я понимаю
а какие команды для этого использовать? js только изучаю |
manuscripti,
изучайте последовательно, и будет вас счастье не рвитесь бежать впереди паровоза Цитата:
http://javascript.ru/tutorial/events |
у вас есть рабочий пример, поставьте себе firebug для firefox и увидите сами как это реализовано там.
|
спасибо
нужно ли применять jquery? или достаточно стандартных средств js? |
jquery реализовано на js, так что достаточно стандартных средств js :)
|
Gozar благодарю сейчас буду копать firebug
|
Ребята! Всем добрый день! Помогите пожалуйста. Я в состоянии отчаяния уже. Дело в том, что я не достаточно знаю яваскрипт и поэтому не могу выполнить не которые задачи. Вчера пришел злой начальник и сказал увеличить картинки на сайте при нажатии на них. Много инфы по этому поводу почитал, и везде написано, что нужно 2 изображения - маленькое и большое. У нас интернет магазин и каталог товаров огромный. Я же не могу сейчас копии 100 тыс. товаров делать. Есть ли какой то другой выход. Допустим у каждого товара есть одна картинка среднего размера и при нажатии яваскрипт увеличивает её. Именно подобный способ, т.к. мне просто физически не сделать такой объем работы с 2-мя картинками. Я капец как запутался уже. Спасибо, заранее. Очень надеюсь на вас.:help: :help: :help: Вот кстати на этом интернет магазине мне необходимо реализовать данную задачу. http://el59.ru
|
не понимаю в чем проблема... Используйте colorbox(например) две картинки не обязательно, как известно картинка приобретает размер, который ей будет прописан в css или style или напряму в теге img , что мешает на сайте выводить рядом с товаром изображение маленького размера, а в колорбокс грузить уже оригинал?
ну или в крайнем случае с помощью Php ресайзте картинки товаров, сохраняйте миниатюры в отдельном каталоге(с проверкой, есть там такой файл или нет), оригиналы в другом, таким образом все картинки сами себя сделают нужных размеров |
Можно сделать, чтобы маленькое изображение:
<img src="" alt="" width="" height=""> А большое будет: <img src="" alt=""> Атрибут alt="" обязателен по стандартам... =) Или тогда пойти другим путем: Сделать, чтобы было "small и big" изображения. При этом указать любые форматы изображения. И не более... Fancybox не поможет? Или другие визуальные просмотры изображений и галерей? |
http://jsfiddle.net/GdK6d/
а там уже стилями сделайте как вам надо |
Slavenin! Рад, что отозвался на просьбу. Дак я не совсем понимаю как одной картинкой пользоваться. У нас при загрузке оригинала фотки яваскрипт уменьшает её и создает копию миниатюры, например вот идет список товаров (это миниатюры сохраненые из оригинальной фотки явоскриптом)http://el59.ru/kungur/catalog/category/0602000000/ А если ты на любую из них нажмешь, то загрузиться оригинал с подробным описанием. Но начальник то у меня хочет чтобы ещё раз она нажималась (тоесть в третий раз и была ещё больше.) но большего размера то фоток нет. Как сделать так, чтобы вот этот существующий размер фотки еще больше стал!? Мне подробности очень нужны, я не такой уж спец.
вот код вывода картинки оригинала <!--GOTO: Centr image--> <div class="big" <?php echo (count($data['images']) <= 3)?'style="float:none; margin-left: 121px;"':'';?>> <img style="max-height: 340px; max-width: 320px;"/" alt=""> </div> Куда тут что вставить чтобы заработало? Примного буду благодарен тебе! |
Мне нужна не галерея. У нас сайт на фрэймворк YII. Я вообще в шоке как с ним разбираться. php азы знаю, а тут посложнее. По сути у нас на сайте уже по 2 картинки на каждый товар. При загрузке оригинала, явяаскрипт уменьшает изображение и сохраняет его в спец. папку. Вот у нас идет каталог товаров (фотоаппараты) это миниатюры уменьшенные яваскриптом, нажимая на них уже загружается оригинал с подробным описанием товара. А надо, чтобы было ещё 3-е нажатие на товар и ещё больше картинка стала. Вот проблема для меня. Я совершенно заплутал в коде, не пойму какие куски куда мне класть и фрэймворк Yii начал только месяц назад изучать. Пока ещё не понимаю его. Хочу ещё найти персонального консультанта (программиста YII) чтобы по сети меня обучал yii framework , естественно не бесплатно. Только где таких найти - не знаю.
|
<img src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235" style="width: 50px">
<script>
document.body.children[0].onclick = function () {
if (parseInt(this.style.width) > 100) {
this.style.width = 50 + 'px';
} else {
this.style.width = parseInt(this.style.width) + 50 + 'px';
}
}
</script>
|
bes! Спасибо, что отозвался. А как это реализовать не совсем понимаю. У меня 2 папки, в одной миниатюры храняться, в другой большие. Надо чтобы ещё больше становились, а в коде я даже не понимаю откуда картинка берется? Пути и ссылки на нее не вижу. А так идея примерно та.
|
Мде. Магической функции sdelat_pizdato() в javascript не существует.
Если вы даже ссылку(или место её появления) в коде найти не можете, ты вы вообще кто? И какого хрена тогда на вас взваливают непрофильное занятие? |
в общем смысл прост. Из маленькой картинки сделать большую нельзя. Это факт. Можно программно изменить размер маленькой и получить размытое дерьмо. Из конструктивного, на сайте показывайте миниатюру, при клике на товар показывайте среднее изображение, при клике на него - оригинал.
|
Цитата:
|
Цитата:
|
Ну можно заплатку на js
|
Aetae. Путь к изображению я увидел, но каким образом оно увеличивается я не понял
|
Мне по идее без разницы - пускай размытое дерьмо, лишь бы получилось
|
да блин, тупо пишете в теге img картинки width="100500px" и будет счастье, либо через класс и css
|
| Часовой пояс GMT +3, время: 02:23. |