prettyPhoto 활용 갤러리

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>gallery</title>
    <link rel="stylesheet" type="text/css" href="prettyPhoto/css/prettyPhoto.css">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="prettyPhoto/js/jquery.prettyPhoto.js"></script>
</head>
<body>
    <a href="http://lorempixel.com/500/500/nature" rel="prettyPhoto[1]" title="자연이미지"><img src="http://lorempixel.com/50/50/nature"></a>
    <a href="http://lorempixel.com/500/500/city" rel="prettyPhoto[1]" title="도시이미지"></a>
    <a href="http://lorempixel.com/500/500/food" rel="prettyPhoto[1]" title="음식이미지"></a>
    <a href="http://lorempixel.com/500/500/animals" rel="prettyPhoto[1]" title="동물이미지"></a>
    <a href="http://lorempixel.com/500/500/cats" rel="prettyPhoto[1]" title="고양이이미지"></a>
    <a href="http://lorempixel.com/500/500/fashion" rel="prettyPhoto[1]" title="패션이미지"></a>

    <a href="http://lorempixel.com/800/500/sports" rel="prettyPhoto[2]" title="스포츠이미지"><img src="http://lorempixel.com/50/50/sports"></a>
    <a href="http://lorempixel.com/500/700/business" rel="prettyPhoto[2]" title="비즈니스이미지"></a>
    <a href="http://lorempixel.com/300/500/nightlife" rel="prettyPhoto[2]" title="야경이미지"></a>
    <a href="http://lorempixel.com/200/500/transport" rel="prettyPhoto[2]" title="탈것이미지"></a>
    <a href="http://lorempixel.com/500/300/people" rel="prettyPhoto[2]" title="사람들이미지"></a>
    <a href="http://lorempixel.com/400/300/abstract" rel="prettyPhoto[2]" title="기타이미지"></a>


    <script>
        $(function(){
            $("a[rel^='prettyPhoto']").prettyPhoto();
        });
    </script>
</body>
</html>