Категории

Увеличение картинки при наведении указателя

Здравствуйте. Как сделать так чтобы при наведении указателя мыши к картинке товара она бы без щелчка увеличивалась бы в этом же окне.

Это можно организовать с помощью jquery. Поищи в гугле, обязательно найдешь...

http://www.yellowlemon.net/demo/1/cloud-zoom/index.html

Объясните пожалуйста, никак не пойму куда вставлять эти строчки

<script type="text/javascript" src="jquery-1.5.js"></script>
<script type="text/javascript" src="zoomi.js"></script>

\www\themes\"ваша_тема"\javascript\general.js.php
Вставлять нужно после ?>

Вот на днях обсуждалось, прочтите и надеюсь у Вас получится
http://www.shopos.ru/forum/index.php?topic=4482.0

А после того как я вставил две строчки в файл general.js.php

Эту строчку туда же вставлять

<img class="zoomi" src="http://site.com/images/product_images/thumbnail_images/70_0.jpg" alt="http://site.com/images/product_images/info_images/70_0.jpg">

Вы неправильно поняли, три скачаных файла

cloud-zoom.1.0.2.js, cloud-zoom.1.0.2.min.js, cloud-zoom.css

нужно вставить в корень сайта туда-же где находятся файлы например config.php и .htaccess
Файл general.js.php трогать не надо.
А сам скрипт нужно залить в файл

themes/шаблон/module/product_info/product_info_v1.html

Причём в других шаблонах файл product_info_v1.html называется product_info.html
Мой шаблон shopos-vamcart сделан на div-ах, посему если у Вас шаблон табличный надо немного доделать.
Привожу часть кода. Файл product_info_v1.html
Скрипт отмечен (красным цветом)
Обратите внимание! для наглядности оригинальный вариант без скрипта закоментирован (зелёный цвет)
{config_load file="$language/lang.conf" section="product_info"}
{$FORM_ACTION}
<h1 class="contentBoxHeading">{$PRODUCTS_NAME}</h1>

{if $info_message}
<div class="contacterror">
{$info_message}
</div>
{/if}

{$PRODUCT_NAVIGATOR}

<div class="page">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="pagecontent">

<div class="ProductInfoLeft">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="cloud-zoom.1.0.2.js"></script>
<link href="cloud-zoom.css" rel="stylesheet" type="text/css" />

{if $PRODUCTS_IMAGE or $PRODUCTS_MO_IMAGES or $PRODUCTS_IMAGE_LINK!=''}
{if $PRODUCTS_POPUP_LINK!=''}
<a href='{$PRODUCTS_POPUP_IMAGE}' class = 'cloud-zoom' title="{$PRODUCTS_NAME}" rel="softFocus: false, position:'anypos', smoothMove:2"
{if $PRODUCTS_MO_IMAGES}rel="gallery-plants"{/if} target="_blank">{/if}<img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" />

{if $PRODUCTS_POPUP_LINK!=''}</a>
{/if}
<div class="zoom-desc" style="position:relative; ">
<div id="anypos" style="position:absolute;top:10px; left: 0px;width:300px; height:300px; "></div>
</div>
<div style="height:300px;"></div>
{/if}



{if ($PRODUCTS_FSK18=='true') or ($MODULE_graduated_price !='')}
{if $PRODUCTS_FSK18=='true'}
<p>
<img src="{$tpl_path}img/fsk18.gif" alt="" />
</p>
{/if}
{if $MODULE_graduated_price !=''}
{$MODULE_graduated_price}
{/if}

{/if}

</div>

Но ведь там на сайте увеличиваются отдельные фрагменты картинки, а я хочу сделать чтобы при наведении курсора на картинку, всплывала альтернативная такая же но увеличенная картинка

как раз general.js.php трогать надо. Именно в него надо сунуть

Я заходил на сайт www.yellowlemon.net но там не то что нужно. Может я не там смотрел. В общем интернет магазин, там есть допустим mp3 плееры, и к каждому mp3 плееру маленькая картинка, а когда открываешь карточку товара там уже большая картинка. Вот я хочу сделать так чтобы не открывать карточку товара а сразу увидеть большое изображение подведя курсор мышки.

В стиле установите размер окна такой-же как у Вашей картинки Pop-up (красный цвет)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="cloud-zoom.1.0.2.js"></script>
<link href="cloud-zoom.css" rel="stylesheet" type="text/css" />

{if $PRODUCTS_IMAGE or $PRODUCTS_MO_IMAGES or $PRODUCTS_IMAGE_LINK!=''}
{if $PRODUCTS_POPUP_LINK!=''}
<a href='{$PRODUCTS_POPUP_IMAGE}' class = 'cloud-zoom' title="{$PRODUCTS_NAME}" rel="softFocus: false, position:'anypos', smoothMove:2"
{if $PRODUCTS_MO_IMAGES}rel="gallery-plants"{/if} target="_blank">{/if}<img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" />

{if $PRODUCTS_POPUP_LINK!=''}</a>
{/if}
<div class="zoom-desc" style="position:relative; ">
<div id="anypos" style="position:absolute;top:10px; left: 0px;width: xxx px; height: xxx px; "></div>
</div>
<div style="height:300px;"></div>
{/if}

К сожалению у меня пока такого варианта нет, я сделал только для карточки товара :(

Спасибо за советы, но че то у меня все равно не выходит. Еще на другом сайте нашел такой вариант, может через него, не подскажете?

На странице между <head> и </head>:
<script type="text/javascript" src="js/jquery-1.4.min.js"></script> # либо другая версия jquery
<script type="text/javascript" src="js/zoomi.js"></script>

Есть 2 варианта представления увеличенных картинок.

1. После <body> в теле документа пишем:
<img class="zoomi" src="путь к изображению" width="длинна" height="высота">
# в этом случае будет увеличиваться уменьшенное при помощи стандартных атрибутов HTML изображение до тех размеров, какое оно есть.

2. После <body> пишем:
<img class="zoomi" src="путь к изображению" alt="путь к увеличенному изображению">
# в таком случае при наведении на исходное изображение будет показываться картинка из alt.

Еще по поводу cloud-zoom. Я закинул файлы cloud-zoom.1.0.2.js, cloud-zoom.1.0.2.min.js, cloud-zoom.css в корень сайта. Теперь эти строчки
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="cloud-zoom.1.0.2.js"></script>
<link href="cloud-zoom.css" rel="stylesheet" type="text/css" />
я должен вставить в general.js.php или в product_info.html?

И еще эти файлы jquery.min.js и jquery-ui.min.js мне надо скачать и также закинуть в корень сайта?

Тогда в скрипте
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
поменять ссылки на свой сайт?

alt это не путь, а альтернативный текст для изображений
Может дадите ссылку на эти два варианта, а так ничё не понятно

http://lospirata.ru/web-stati/uvelichenie-izobrazheniyakartinki-pri-navedenii.html

посмотрите пожалуйста мой предыдущий вопрос по поводу cloud-zoom

я должен вставить в general.js.php или в product_info.html?

В general.js.php

понятно, а насчет этих файлов jquery.min.js и jquery-ui.min.js

Всё, что я писал было про вариант в корень сайта. Но если NeBox пишет, что надо в general.js.php можете не сомневаться, что это правильно, потому что он уже "собаку съел" на этом. Тогда попросите его подробнее описать как это сделать.

файлы закинуть как пишет alegss, можно в корень сайта, а подключать эти скрпты через general.js.php
Этот файл специально для таких вот моментов.

Вам надо при наведении на картинку показывать увеличенную ее копию да? Такое нужно в карточке товара или в списках товара? (я просто не вникал в тему)

Да, в списке товара, чтобы при наведении мышки, всплывала увеличенная картинка из карточки товара.

http://www.shopos.ru/forum/index.php?topic=4546.0

Я все сделал как написано, а у меня вместо картинки появляется маленький белый квадратик и сверху в рамочке написано Изображение

ну так пишите в той теме.
и ссылку на сайт давайте

Мозги в кучу. Как сделать такое, но как в первом варианте?
Что бы была большая картинка, под ней маленькие. Маленькие картинки появляются в большей при нажатии на них. А при наведении мышки на большую, появляется картинка рядом зумированная. Короче как в первом демо.

вопрос снят. сам разобрался

Источник