[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Форум » Скрипты для uCoz » Увеличительное стекло
Увеличительное стекло
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#gallery')

вконце добавлять букву.

Например:
Код
('img#gallerya')

Код
('img#galleryb')

Код
('img#galleryc')


Соответственно в этом коде
Код
<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

Он сложнее, но как мне кажется, больше подойдет для интернет магазина. Но решать конечно вам smile
 
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)
Извините, что долго морочу вам голову с этими кодами...

Та ничего страшного... я всегда рад помочь, если это в моих силах smile
 
IsidaДата: Четверг, 15.08.2013, 02:03 | Сообщение # 8
Группа: Пользователи
Сообщений: 4
Статус: Offline

Каждый раз делать вручную - очень много времени займет... вы же сами видели картинок - тысячи и каждый день их все больше. В любом случае спасибо, за старания. Буду думать дальше.
 
Форум » Форум » Скрипты для uCoz » Увеличительное стекло
Страница 1 из 11
Поиск:

Скачать Adobe Photoshop

Как установить Adobe Photoshop

Adobe Photoshop Portable

Adobe Flash Professional

Orlenok Design Studio ® 2008 - 2017