Увеличение фото в карточке товара

P
На сайте с 06.01.2009
Offline
592
1134

Здравствуйте. Задача тривиальна, но есть желание найти или написать самому или может кто то покажет готовое решение как можно реализовать следующее.

В страницу товара должно подгружаться полноразмерное (большое) фото, каким то образом уменьшаться до размеров скажем 300*300 пикс. На фото должен появиться значек возможности увеличения. При нажатии открывается полноразмерное фото поверх экрана (т.е. не в отдельном окне, а в том же).

Подскажите, пожалуйста, может у Вас есть готовое решение? Спасибо заранее.

ps Т.е. код такого плана не подходит, т.к. в страницу грузится превью


<a href="ссылка на полное изображение" class="ulightbox" data-fancybox-group="ultbx" title="Кликните для увеличения"><img alt="" style="margin:0;padding:0;border:0;" src="ссылка на демо изображение"></a>

в свободных источниках не нашлось нужного мне решения.

u3Bepr
На сайте с 03.03.2011
Offline
60
#1

так задай через jquery. по умолчанию в шаблоне вставляешь фул-сайз-фото в див. далее скриптом ищешь этот див и меняешь дерево на ссылку-привью. единственная беда - юзерам придется подгружать этот фулсайз себе (а если картинок больше 1 будет?)

P
На сайте с 06.01.2009
Offline
592
#2
u3Bepr:
так задай через jquery. по умолчанию в шаблоне вставляешь фул-сайз-фото в див. далее скриптом ищешь этот див и меняешь дерево на ссылку-привью. единственная беда - юзерам придется подгружать этот фулсайз себе (а если картинок больше 1 будет?)

Сейчас подгружается в карточку товара большое фото. Думаете кто то не может дождаться загрузки фото 200-400кб?

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

Т.е. нужно имеющийся код

<img src="/img/foto1.jpg" alt="фото1" title="" height="304" width="636">

средствами jquery

1. сделать фото размером высотой 200px

2. поставить на фото значек что можно его увеличить

3. открыть полноразмерное фото (т.е. тот же урл картинки) но поверх страницы (как в галерее фотографий)

На самом деле пока смотрят цену, характеристики товара, условия поставки - фото подгрузится даже если будет 1Мб.

[umka]
На сайте с 25.05.2008
Offline
456
#3
postavkin:
На самом деле пока смотрят цену, характеристики товара, условия поставки - фото подгрузится даже если будет 1Мб.

Подгрузится, если сайт рассчитан только на московскую аудиторию и московских покупателей :)

Лог в помощь!
P
На сайте с 06.01.2009
Offline
592
#4
'[umka:
;12679978']Подгрузится, если сайт рассчитан только на московскую аудиторию и московских покупателей :)

Скажите, пожалуйста. Так а если в коде превью, а большое фото открывается средствами jquery, я вот не понимаю, то большое фото вообще ПСы будут индексировать?

[umka]
На сайте с 25.05.2008
Offline
456
#5
postavkin:
Скажите, пожалуйста. Так а если в коде превью, а большое фото открывается средствами jquery, я вот не понимаю, то большое фото вообще ПСы будут индексировать?

Если на это изображение есть ссылка, то будут.

А увеличенные картинки можно предварительно подгружать ява-скриптом, если смущает, что при наведении мышкой приходится ждать.

P
На сайте с 06.01.2009
Offline
592
#6

Извините, может кто то дать готовое решение?

Имеющийся код

<img src="/img/foto1.jpg" alt="фото1" title="" height="304" width="636">

средствами jquery

1. сделать фото размером высотой 200px

2. поставить на фото значек, что можно его увеличить

3. при нажатии на него открыть полноразмерное фото (т.е. тот же урл картинки) но поверх страницы (как в галерее фотографий)

4. при нажатии в любую область экрана фото должно закрываться

P
На сайте с 06.01.2009
Offline
592
#7

Ребят, так же рассмотрю вариант - подводишь курсор на фото и фото в пол экрана увеличивается.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий