<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

А в практической части с полного нуля будет создано мощное и быстрое динамическое приложение, где Вы на практике познакомитесь, как создавать очень гибкую и расширяемую архитектуру, для разработке функционала любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как сделать предпросмотр изображений на javascript.

Как сделать предпросмотр изображений на javascript.

Всем привет! Иногда на сайте нужно сделать функционал, который позволит увеличивать изображения при наведении на них мышки, но в то же время это должно работать быстро и без зависимостей. Как это сделать, мы и рассмотрим в этой статье.

Описание

Для решения нашей задачи нам понадобится простая библиотека под названием SimpleZoom, у которой много плюсов. Вот некоторые из них:

  • Легко подключить на любой сайт
  • Не добавляет дополнительных стилей
  • Библиотека сама выбирает подходящее место для увеличенного изображения
  • Нет модальных окон, что улучшает UX
  • Прекрасно работает с мобильными устройствами
  • Уменьшена до размера менее 1Кб и сжата
  • Нет зависимостей

На данный момент это лучшее решение, если вам не нужно ничего лишнего, которое я встречал.

Чтобы посмотреть на работу библиотеки, перейдите в раздел демонстрации.

Установка

Чтобы установить библиотеку, вам нужно ее скачать. Для этого вы можете использовать Bower:

bower install simplezoom.js

Или npm:

npm install --save simplezoom.js

После того, как вы скачаете библиотеку, подключите ее следующим образом:

<script src="simplezoom.js"></script>

И это все!

Заключение

Итак, сегодня мы рассмотрели, как сделать предпросмотр изображения на javascript. Если вы хотите узнать еще больше про библиотеки и про то, как писать их самостоятельно, то обратите внимание на видеокурс JavaScript, jQuery и Ajax с Нуля до Гуру.

А у меня на этом все. Спасибо за внимание!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.