Реализация эффекта увеличительного стекла (лупы) для изображений на сайте 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