|
Увеличительное стекло
| |
| NordHeRn | Дата: Понедельник, 24.01.2011, 13:21 | Сообщение # 1 |
Группа: Проверенные
Сообщений: 9
Статус: Offline
| DEMO
1. Скачиваем архив:
http://dfiles.ru/files/z3zs9ueef
2. С помощью Файловлго менеджера, в корне сайта, создаём папку ddpowerzoomer.
3. В созданую папку, заливаем файл скрипта из архива.
4.Перед тегом </head> вставляем это:
Код <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/ddpowerzoomer/ddpowerzoomer.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('img#gallery').addpowerzoom({magnifiersize:[90,90]};)
};)
</script>
5. Туда, где хотим видеть картинку, вставляем это:
Код <img id="gallery" border="0" src="ССЫЛКА НА КАРТИНКУ">
Для размещения на странице нескольких картинок, необходимо в скрипт добавлять, для каждой картинки новую строку:
Код $('img#gallery').addpowerzoom({magnifiersize:[90,90]};)
В которой к этому коду
вконце добавлять букву.
Например:
Соответственно в этом коде
Код <img id="gallery" border="0" src="ССЫЛКА НА КАРТИНКУ">
нужно тоже добавлять букву к идентификатору.
Например:
Код <img id="gallerya" border="0" src="ССЫЛКА НА КАРТИНКУ">
Изменять размер увеличительного стекла тут: [90,90]
|
| |
|
|
| Isida | Дата: Вторник, 13.08.2013, 03:29 | Сообщение # 2 |
Группа: Пользователи
Сообщений: 4
Статус: Offline
| А как можно приспособить этот код, чтобы работал в интернет-магазине одежды? Помогите плз, очень надо сделать.
|
| |
|
|
| orlenok | Дата: Вторник, 13.08.2013, 09:53 | Сообщение # 3 |
Admin
Группа: Администраторы
Сообщений: 532
Статус: Offline
| Isida, нужно скачать архив.
Создать в корне сайта папку с названием ddpowerzoomer, в которую залить файл скрипта из архива.
Подключить скрипт. Для этого на странице сайта, где будут картинки, перед закрывающим тегом </head> вставить этот код:
Код <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="ВАШ САЙТ/ddpowerzoomer/ddpowerzoomer.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('img#gallery').addpowerzoom({magnifiersize:[90,90]};)
};)
</script>
А когда будете выкладывать на сайте картинки с образцами товаров, то ссылки на картинки (что бы скрипт начал работать), нужно заключить в эти условия:
Код <img id="gallery" border="0" src="ССЫЛКА НА КАРТИНКУ">
Например:
Код <img id="gallery" border="0" src="orlenok.do.am/pictures/img/4.jpg">
Еще можно посмотреть вот этот скрипт:
http://orlenok.do.am/forum/3-198-1#992
Он сложнее, но как мне кажется, больше подойдет для интернет магазина. Но решать конечно вам 
|
| |
|
|
| Isida | Дата: Вторник, 13.08.2013, 18:15 | Сообщение # 4 |
|
Группа: Пользователи
Сообщений: 4
Статус: Offline
| Спасибо, второй скрипт действительно лучше. Но вся сложность состоит в том, что в модуле интернет-магазина на юкозе уже есть свой шаблон того, какой будет страничка товара. Получается мне нужно как-то встроить код увеличительного стекла, в уже существующий код. В этом-то и проблема. Не могу разобраться, как это сделать.
|
| |
|
|
| orlenok | Дата: Вторник, 13.08.2013, 18:48 | Сообщение # 5 |
|
Admin
Группа: Администраторы
Сообщений: 532
Статус: Offline
| Модуль интернет-магазина на uCoz платный, по этому у меня нет возможности поэксперементировать с этим модулем. Но думаю, самым простым решением будет, если вы поставите скрипт, в код вашей страницы, вот сюда: Код <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title><?if($META_TITLE$)?>$META_TITLE$<?else?><?if($ENTRY_MODE$ == "spec")?>Спецификация <?endif?><?if($ENTRY_MODE$ == "imgs")?>Изображения <?endif?><?if($ENTRY_MODE$ == "comm")?>Отзывы <?endif?>$ENTRY_TITLE$ - $MODULE_NAME$ - $SITE_NAME$<?endif?></title>
<?$META_DESCRIPTION$?>
<link type="text/css" rel="StyleSheet" href="/_st/my.css" />
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i||function(){
(i.q=i.q||[]).push(arguments)},i.l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
}window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41785846-1', 'tvoja-moda.com');
ga('send', 'pageview');
</script>
СЮДА СТАВИМ СКРИПТ
</head>[/r]
А ссылки на картинки вставите в поле "Описание товара". Я думаю всё будет работать.
|
| |
|
|
| Isida | Дата: Среда, 14.08.2013, 01:35 | Сообщение # 6 |
|
Группа: Пользователи
Сообщений: 4
Статус: Offline
| Именно туда я его и поставила =) Но сложность во втором кусочке кода, как раз вывод картинок.
В юкозовском шаблоне это хотела сделать в двух местах.
Первое - это главная картинка. Но дело в том что это не одна картинка, а целый массив $IMGS_ARRAY_JS$ и когда я его заключаю в условия, как ссылку на картинку - не работает.
Второе - это "все изображения" (открывается есть нажать кнопку рядом с описанием). Я пробовала приспособить отвечающий за них участок кода (немного сократила тут код, вообще их 21 - одинаковый код, разные номера картинок):
Код <?if($ENTRY_MODE$ == 'imgs')?> <div class="shop-imgs with-clear"> <?if($PHOTO$)?><img alt="" src="$THUMB$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="0" title="Кликните для увеличения изображения"><?endif?> <?if($PHOTO_1$)?><img alt="" src="$THUMB_1$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="1" title="Кликните для увеличения изображения"><?endif?> <?if($PHOTO_2$)?><img alt="" src="$THUMB_2$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="2" title="Кликните для увеличения изображения"><?endif?> <?if($PHOTO_3$)?><img alt="" src="$THUMB_3$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="3" title="Кликните для увеличения изображения"><?endif?> <?if($PHOTO_4$)?><img alt="" src="$THUMB_4$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="4" title="Кликните для увеличения изображения"><?endif?> <?if($PHOTO_5$)?><img alt="" src="$THUMB_5$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="5" title="Кликните для увеличения изображения"><?endif?> [size=9]<?endif?>
но опять же не получилось =( По умолчанию, когда на них кликаешь они открываются, не хотелось бы чтобы этот эффект пропал...
П.С. Извините, что долго морочу вам голову с этими кодами и спасибо что пытаетесь помочь =)
|
| |
|
|
| orlenok | Дата: Среда, 14.08.2013, 23:14 | Сообщение # 7 |
|
Admin
Группа: Администраторы
Сообщений: 532
Статус: Offline
| Isida, я попросил моего товарища, предоставить мне админку его интернет-магазина...
Я создал папку, в которую залил скрипт и картинку взятую с вашего сайта.
В админке, на Странице товара, перед тегом </body> я вставил код скрипта.
Затем на странице Редактирование товара, в поле Описание товара я прописал путь к залитой картинке и присвоил идентификатор скрипта:
В итоге у меня получилось вот что:
Скрипт работает, но придётся на каждой странице, картинку (одну или несколько) вставлять в ручную.
Я дополнил первый пост инфой о том, как поставить несколько картинок на одну страницу.
А встроить скрипт, в HTML код страницы сайта, что бы всё происходило автоматически, судя по всему, не получится.
Цитата (Isida) Извините, что долго морочу вам голову с этими кодами...
Та ничего страшного... я всегда рад помочь, если это в моих силах
|
| |
|
|
| Isida | Дата: Четверг, 15.08.2013, 02:03 | Сообщение # 8 |
|
Группа: Пользователи
Сообщений: 4
Статус: Offline
| Каждый раз делать вручную - очень много времени займет... вы же сами видели картинок - тысячи и каждый день их все больше. В любом случае спасибо, за старания. Буду думать дальше.
|
| |
|
|
|
