엄지월드

이미지 클릭시, 이미지가 크게 표시되는 기능 본문

Front

이미지 클릭시, 이미지가 크게 표시되는 기능

킨글 2019. 8. 1. 22:11


프리티포토 http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#prettyPhoto

프리티포토 다운 받기

 

jQuery Library인 프리티포토 다운로드 후, 바로 확인 가능한 예제입니다.

주변이 어두워지면서 해당 이미지가 크게 나타납니다.

<html>
<head>
  <script src="prettyPhoto_compressed_3.1.6/js/jquery.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" href="prettyPhoto_compressed_3.1.6/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
  <script src="prettyPhoto_compressed_3.1.6/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
      $("a[rel^='prettyPhoto']").prettyPhoto();
    });
</head>    
<body>
	<a href="content1.jpg" rel="prettyPhoto" title="This is the description"><img src="content1.jpg" width="60" height="60" alt="This is the title" /></a>	
</body>
</html>


팬시박스 http://fancybox.net 
스와이프 박스 http://brutaldesign.github.io/swipebox/ 
칼러박스 http://www.jacklmoore.com/colorbox/

 

도움이 되셨다면 광고 한번씩 클릭 부탁드립니다 😁 

'Front' 카테고리의 다른 글

javascript로 xpath 구하기  (0) 2019.12.08
jquery select box 제어하기  (0) 2019.11.27
table width 고정  (0) 2019.06.29
jQuery 자동완성 기능(autoComplete) - JS 간단  (0) 2019.05.31
js 오늘 날짜 구하기  (0) 2019.05.12
'Front' Related Articles more
Comments