![[JavaScript] Venobox](/title-images/60.jpg)
[JavaScript] Venobox
Venobox
레이어팝업 이미지겔러리로 유용한 library
Venobox 공식사이트 바로가기 GitHub
Demo
install
# NPM
npm install venobox
간단한 사용법
<html>
<head>
<link rel="stylesheet" href="venobox/venobox.min.css" type="text/css" media="screen" />
</head>
<body>
<a class="my-link" href="image01-big.jpg"><img src="image01-small.jpg" alt="image alt"/></a>
<a class="my-link" data-vbtype="iframe" href="http://example.com/">open iFrame</a>
<!-- 스크립트 시작 -->
<script type="text/javascript" src="venobox/venobox.min.js"></script>
<script>
new VenoBox({
selector: ".my-link"
});
</script>
</body>
</html>
See the Pen MouseEvent - onmouseleave - color change by younghyeong ryu (@wangta69) on CodePen.
## a tag 없이 사용 > 일반적으로는 위와 같이 a tag에 팝업으로 띄울 이미지의 주소를 href 속성으로 넣어주나 바로 이미지 태그에 넣어 주는 방식도 가능하다.> 바로 아래와 같이 사용하면 된다.
<img src="/image.png" class="venobox" data-href="/image.png">
See the Pen venobox sample1 by younghyeong ryu (@wangta69) on CodePen.
## Data AttributesContent type
<a class="venobox" data-vbtype="iframe" href="http://www.example.com">Open Iframe</a>
<a class="venobox" data-vbtype="inline" title="My Description" href="#inline">Open inline content</a>
<a class="venobox" data-vbtype="ajax" href="ajax-call.php">Retrieve data via Ajax</a>
<a class="venobox" data-vbtype="video" href="https://youtu.be/xxxxxx">YouYbe</a>