13 апр 2013
Эффект лупы (увеличение изображения) [DLE 9.*]
tonik Категория: DATALIFE ENGINE » Модули
У нас вы можете скачать бесплатно Эффект лупы (увеличение изображения) [DLE 9.*]

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Эффект лупы (увеличение изображения) [DLE 9.*]


Реализация эффекта увеличительного стекла (лупы) для изображений на сайте DLE 9.*.

Для работы нам понадобится библиотека jQuery, а также будем использовать CSS3.

1. Скачиваем архив.

2. Заливаем содержимое в свой шаблон.

3. Открываем /templates/ваш шаблон/main.tpl
и перед
</head>

вставляем:

<link href="{THEME}/style/style.css" rel="stylesheet" type="text/css">



тут же, в самом низу, перед
</body>

вставляем:

<!-- Подгрузим prefix-free для более удобного использования CSS3 -->
<script src="httpss://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js" type="text/javascript"></script>

<!-- Подключаем библиотеку jQuery -->
<script src="https://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>

<!-- Скрипт лупы -->
<script src="{THEME}/js/script.js" type="text/javascript"></script>



4. Открываем /templates/ваш шаблон/fullstory.tpl (для полной новости) или /templates/ваш шаблон/shortstory.tpl (для краткой новости) в зависимости от того, где вы решили использовать эффект.

Находим

<img src="{image-1}" alt="{title}" />



и заменяем на:

<div class="product"><img class="magniflier" src="{image-1}" alt="{title}" /></div>



Вот собственно и всё!

5. Наслаждайтесь!

Адаптация: ToNik



Скачать





Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.