마카로닉스

2092 No

js 이미지 레이어팝업 확대 , jqeury 이미지 확대 빠르게 구현하기 - magnific-popup

2023-03-23 19:06:02 By 라이트 0 1161 댓글수 4 포스트 하기

11월 2024
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

https://dimsemenov.com/plugins/magnific-popup/

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js 이미지 레이어팝업 확대 (이미지확대)</title>

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css">
      <script  src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E="  crossorigin="anonymous"></script>  
      <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js" integrity="sha512-IsNh5E3eYy3tr/JiX2Yx4vsCujtkhwl7SLqgnwLNgf04Hrt9BT9SXlLlZlWx+OK4ndzAoALhsMNcCmkggjZB1w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
    
        <div>

            <a href="https://image.utoimage.com/preview/cp872722/2022/12/202212008462_206.jpg" class="image-link">
                <img  src="https://image.utoimage.com/preview/cp872722/2022/12/202212008462_206.jpg"   onerror="this.src='https://via.placeholder.com/147x88'" />
            </a>  

            <br> <br>
            <a href="https://cdn.crowdpic.net/list-thumb/thumb_l_CDD94CBD46425E4EDBD18A7A17C199E7.jpg" class="image-link">
                <img  src="https://cdn.crowdpic.net/list-thumb/thumb_l_CDD94CBD46425E4EDBD18A7A17C199E7.jpg"   onerror="this.src='https://via.placeholder.com/147x88'" />
            </a>  
        </div>

    <script>
        $(function(){
            $('.image-link').magnificPopup({ type : 'image',});	
        });
    </script>
</body>
</html>

jquery