• Автор:

    Flesha
  • Добавлено:

    апр 13, 2013
  • Комментариев:

    5
  • Просмотров:

    2073

Хак Эффект лупы изображений

Хак Эффект лупы изображений

Реализация эффекта увеличительного стекла (лупы) для изображений на сайте 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="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js" type="text/javascript"></script>

<!-- Подключаем библиотеку jQuery -->
<script src="http://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

Внимание! У Вас нет прав для просмотра скрытого текста.
Вернуться

Комментарии:


  1. nebesnaya → 13 апреля 2013 20:12
    актуально для сайтов нумезматики и магазинов,только вчера видел нечто подобное-есть идея замутить это доя счётчиков,их точно под лупой надо смотреть.
  2. tonik_007 → 13 апреля 2013 22:12
    Ай-ай-ай, Светлана!
    Как не красиво игнорировать автора! )))
  3. nebesnaya → 14 апреля 2013 04:36
    алё афтор - бред полный -архив сверяли с описанием ???стили не те,да и нет в шабе image-1 boss
  4. tonik_007 → 14 апреля 2013 17:12
    nebesnaya,
    Детёнок!
    Вы сейчас про что?
    Советую поучиться сходить!
    Или глазки помыть!

    ps Админ, великий и ужасный!
    Если такой плохой хак, что же мы (мало того разместив его без ссылки + хая его) не удалим то его с ресурса?
    А? Великий админ?

    Да...
    И ещё для таких не грамотных (дабы не возникало лишних вопросов)
    В новости разместил ДЕМО...
  5. nebesnaya → 14 апреля 2013 23:06
    ЭЙ УМНИК В ДВИЖОК ДЭМКУ СДЕЛАЙ ДЛЯ НАЧАЛА
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.