Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Простейший просмотрщик картинки с подгрузкой оригинала и эффектом увеличения (https://javascript.ru/forum/dom-window/65696-prostejjshijj-prosmotrshhik-kartinki-s-podgruzkojj-originala-i-ehffektom-uvelicheniya.html)

Ilya_Ru 03.11.2016 13:08

Простейший просмотрщик картинки с подгрузкой оригинала и эффектом увеличения
 
Здравствуйте.
Недавно столкнулся с необходимостью встроить в сайт текстовую ссылку на изображение. Именно так, чтобы оно загружалось и выводилось на просмотр только по щелчку. Но среди огромных куч разных решений не нашлось ничего простого.
Хотелось бы его видеть с эффектом увеличения и затемнением окружающего фона. Есть плагин highslide.js. В коде ниже он настроен под мои потребности. На мой взгляд в нем очень много всего лишнего и не хватает затемнения окружающего фона. И хотелось бы, чтобы изображение при масштабе меньше 500*500 открывалось в новой вкладке:
<link rel="stylesheet" type="text/css" href="http://php-ilyaru.rhcloud.com/moysite/highslide.css" />
			<script type="text/javascript"
    src="http://php-ilyaru.rhcloud.com/moysite/highslide.js"></script>
			
		<script type="text/javascript">
hs.graphicsDir = 'http://php-ilyaru.rhcloud.com/moysite/graphics/';
hs.creditsPosition = 'middle center';
hs.align = 'center';
hs.minWidth = 500;
hs.minHeight = 500;
hs.marginTop = 5;
hs.marginRight = 5;
hs.marginBottom = 5;
hs.marginLeft = 5;
</script>

<a href="http://poliksal.ru/uploads/posts/2016-02/145623266950.jpeg" class="highslide" onclick="return hs.expand(this)" >красивая кошечка</a>


Может кто-нибудь сможет вырезать лишнее и дописать необходимое. Или может проще что-то небольшое и новенькое написать. Помогите, пожалуйста :-)


Часовой пояс GMT +3, время: 11:45.