фото "зум" или что-то вроде этого..

[Виталий С]

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

Возможно такое средствами javascript? может есть у кого под рукой скрипт с увеличением или с появлением фото.

[alexKniaz]

То есть как? Что бы они прям на стрнице увеличивались, да?
Тогда так:

<script language="javascript" type="text/javascript">
function showFull(obj)
{
var url=new String(obj);
//Здесь идёт подмена расширений
url=url.replace('.gif','_full.gif');
url=url.replace('.jpg','_full.png');
url=url.replace('.png,'_full.png');
document.getElementById('imgFull').style.display='block';
document.getElementById('imgFull').style.left=event.clientX;
document.getElementById('imgFull').style.top=event.clientY;
}
</script>
<img onmouseover="showFull(this)" src="img.jpg">
<img id="imgFull" onmouseout="this.style.display='none';" style="display:none;position:absolute;">

В данном примере загрузится картинка img_full.jpg
Правила именования файлов при таком подходе:
1) у файла не должно быть двойных расширений типа file.gif.png, ну в общем одно из которых записано в подмене.
2) файл.расширение - уменьшенное изображение.
файл_full.расширение - оригинал.
Если чуть переписать код, то мона так:
файл_short.расширение - уменьшенное изображение.
файл.расширение - оригинал.

[_Dimarik__]

разбирая приведённый код, я добавил функцию в свой код, которая происходит при щелчке по фотографии
function PhotoCenter()
{
document.photo.style.display='block';
document.photo.style.left=55;
document.photo.style.top=100;
}
только я так и не понял что значит document.photo.style.display='block'; и где можно про свойство display почитать, киньте ссылку плиз если можно. а то мне одна туфта пока я искал попадалась((
и у меня фотография при щелчке не перемещалась на расстояние в 55 слева и 100 сверху

[Snipe]

http://htmlbook.ru/css/display.html

[javs]

alexKniaz
В строке 008 пропущена одиночная кавычка
url=url.replace('.png','_full.png');

[javs]

Заказчик просит сделать так, чтобы на странице были маленькие фото-превьюшки, которые при наведении на них мышью увеличивались бы до оригинала.

Для начала, я бы убедил заказчика, что без ведома пользователя ничего автоматически "выскакивать" не должно, тем более когда речь идет об изображениях. А затем предложил бы следующее простое решение:

function zoomImg(obj) {
  var ext=obj.src.split('.'); 

  ext=ext[ext.length-1]; 
  obj.src=!obj.src.match('_icon')?
           obj.src.replace(new RegExp('\.'+ext),'_icon.'+ext):
           obj.src.replace('_icon','');
return(true);
}

<div style="background: url(image.jpg) no-repeat;"><img src="image_icon.jpg" onclick="zoomImg(this)"></div>

И миниатюра и изображение здесь должны лежать в одном месте.

[vacus]

Добрый день! Разрешите задать вопрос в вашей теме? т.к. суть темы и обсуждение, практически идентична, моей проблеме. Есть сайт, (пример страницы).При наведении на товар и предпросмотре его по клику на значок "ЗУМ", фото товара отображается, картинкой того же размера, что и текущее фото на странице. Манипуляции с размерами через файрбаг, результатов не дали, можно увеличить размер фото, но оно выходит плохого качества. т.е. получается предпросмотр берется из той же картинки что висит на странице, а она сжата. Фото загружаю лично и они большего разрешения. Как сделать что бы, при клике на значок ЗУМ, картинка выводилась оригинальная из каталога, а не дублировалась со страницы? Та же проблема и в самой карточке товара. Манипуляциями с настройками фото в джумшоппинге, вопрос то же не решил, поскольку при увеличении разрешения, увеличиваются и сами фото в каталоге, т.е. в ряд отображается уже не 4 товара, а например только 2, а нужно что бы в каталоге были небольшие фото, а сам просмотр вел к оригинальным фото.Спасибо.

[laimas]

Для jquery.prettyPhoto.js - нужно указать адрес к большим изображениям

[vacus]

По решению своего вопроса, нашел в сети это;

- Теперь к тому изображению, которое вы будете выводить с помощью скрипта PrettyPhoto надо добавить ссылку на большое изображение с атрибутом rel=”prettyPhoto” -
<a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="This is the description"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="This is the title" /></a>

- и еще вот это -

Главное, чтобы ваша картинка была обернута ссылкой на саму себя!!! Т.е. она стояла в теге:
<а target="_blank" href="путь до картинки">картинка</a>

Но поскольку, не понимаю, язык скриптов. Буду рад если, уделите время и поможете, указав точно, что и где мне прописать/изменить.

[laimas]

Да нет тут никакого языка, обычный html. Этому плагину при подключении указывают изображения, которые он будет выводить, а селектором служит атрибут rel="prettyPhoto" тега А, который содержит url большого изображения href="images/fullscreen/2.jpg", и который обрамляет тег малого изображения. Вот и все. Оберните свои малые изображения как указано, заменив images/fullscreen/2.jpg на свои реальные адреса, и будет работать.

В последней версии prettyPhoto атрибут rel вроде бы уже не используется, хотя может я и ошибаюсь, все в памяти удержать сложно.