간단한 갤러리 스라이딩 소스

<div id=”ViewContents”>
    <div id=”layer_close” class=”png24″></div>
    <div class=”arrow_left png24″></div>
    <div class=”arrow_right png24″></div>
    <div class=”ImageArea”></div>
    <div id=”Explan”>
        <div class=”subject”></div>
        <div class=”explan”></div>
        <div class=”date”></div>
    </div><!– /Explan –>
</div>

#ViewContents { display: none; position: absolute; width: 775px; height: 491px; z-index: 2000; }
#ViewContents .arrow_left { position: absolute; top: 205px; left: 0; width: 27px; height: 50px; background: url(‘./img/arrow_left.png’) no-repeat left top; }
#ViewContents .arrow_right { position: absolute; top: 205px; right: 0; width: 27px; height: 50px; background: url(‘./img/arrow_right.png’) no-repeat left top; }
#ViewContents .pointer { cursor: pointer; }
#ViewContents #layer_close { position: absolute; top: 0; right: 40px; width: 24px; height: 26px; background: url(‘./img/btn_x.png’) no-repeat left top; cursor: pointer; }
#ViewContents .ImageArea { position: absolute; top: 31px; left: 36px; width: 698px; height: 408px; border: 1px solid #ccc; overflow: hidden; background: #fff; }
#ViewContents .ImageArea div { position: absolute; }
#ViewContents #Explan { position: absolute; bottom: 0; left: 36px; width: 700px; height: 43px; background: #000; color: #ccc; font-size: 11px; }
#ViewContents #Explan .subject { position: absolute; left: 16px; top: 5px; height: 14px; padding-top: 0; padding-left: 9px; white-space: nowrap; background: url(‘./img/icon_rect.gif’) no-repeat 0 7px; }
#ViewContents #Explan .subject a { color: #ccc; text-decoration: none; }
#ViewContents #Explan .subject a:hover { text-decoration: underline; }
#ViewContents #Explan .explan { position: absolute; left: 16px; top: 22px; height: 14px; padding-top: 0; padding-left: 9px; white-space: nowrap; background: url(‘./img/icon_rect.gif’) no-repeat 0 7px; }
#ViewContents #Explan .date { position: absolute; right: 15px; bottom: 5px; }

<script type=”text/javascript”>
var current_wr_id;
$(function() {
    $(‘div.image img’).click(function() {
        var w = $(document).width();
        var h = $(document).height();
        var wr_id = $(this).attr(“id”).replace(“con_”, “”);

        $(‘div#overlap’).width(w).height(h).show();

        ViewContents(wr_id, “”);
    });

   $(‘div.arrow_left’).click(function() {
        if($(this).hasClass(“pointer”)) {
            if(!$(‘#ViewContents div.ImageArea div’).is(“:animated”)) {
                var wr_id = $(this).attr(“id”).replace(“con_”, “”);
                ViewContents(wr_id, “left”);
            }
        }
    });

    $(‘div.arrow_right’).click(function() {
        if($(this).hasClass(“pointer”)) {
            if(!$(‘#ViewContents div.ImageArea div’).is(“:animated”)) {
                var wr_id = $(this).attr(“id”).replace(“con_”, “”);
                ViewContents(wr_id, “right”);
            }
        }
    });
});

function ViewContents(wr_id, direction)
{
    $.post(
        ‘<?php echo $board_skin_path; ?>/list.contents.php’,
        { bo_table: “<?php echo $bo_table; ?>”, wr_id: wr_id },
        function(data) {
            if(data.error) {
                alert(data.error);
            } else {
                if(!$(‘#ViewContents’).is(“:visible”)) {
                    $(‘#ViewContents div.ImageArea’).html(data.image);
                } else {
                    $(‘#ViewContents div.ImageArea’).append(data.image);

                    if(direction == “left”) {
                        $(‘#ViewContents div.arrow_left’).removeClass(“active”);
                        $(‘#ViewContents div.ImageArea div#img_’ + wr_id).css(“left”, “698px”).css(“top”, “0px;”);
                        $(‘#ViewContents div.ImageArea div#img_’ + current_wr_id).animate({
                            left: ‘-698px’ }, 1000, ‘swing’,
                            function() {
            &nb
sp;                   $(this).remove();
                            }
                        );
                        $(‘#ViewContents div.ImageArea div#img_’ + wr_id).animate({ left: ‘0px’ }, 1000, ‘swing’);
                    } else if(direction == “right”) {
                        $(‘#ViewContents div.arrow_right’).removeClass(“active”);
                        $(‘#ViewContents div.ImageArea div#img_’ + wr_id).css(“left”, “-698px”).css(“top”, “0px;”);
                        $(‘#ViewContents div.ImageArea div#img_’ + current_wr_id).animate({
                            left: ‘698px’ }, 1000, ‘swing’,
                            function() {
                                $(this).remove();
                            }
                        );
                        $(‘#ViewContents div.ImageArea div#img_’ + wr_id).animate({ left: ‘0px’ }, 1000, ‘swing’);
                    }
                }
                $(‘#ViewContents div.subject’).html(data.subject);
                $(‘#ViewContents div.explan’).html(data.explan);
                $(‘#ViewContents div.date’).html(data.date);

                if(data.prev) {
                    $(‘#ViewContents div.arrow_left’).attr(“id”, data.prev).addClass(“pointer”);
                } else {
                    $(‘#ViewContents div.arrow_left’).removeAttr(“id”).removeClass(“pointer”);
                }

                if(data.next) {
                    $(‘#ViewContents div.arrow_right’).attr(“id”, data.next).addClass(“pointer”);
                } else {
                    $(‘#ViewContents div.arrow_right’).removeAttr(“id”).removeClass(“pointer”);
                }

                if(!$(‘#ViewContents’).is(“:visible”)) {
                    var pos = $(‘#board_list’).position();
                    var top = pos.top – 20;
                    var left = pos.left – 6;
                    $(‘#ViewContents’).css(“left”, left).css(“top”, top).show();
                }

                current_wr_id = wr_id;
            }
        },
        “json”
    );
}
</script>

<?php
include_once(‘./_common.php’);

$write_table = $g4[‘write_prefix’] . $bo_table;
$sql = ” select wr_id, wr_subject, wr_content, wr_link1, wr_1 from $write_table where wr_id = ‘$wr_id’ “;
$row = sql_fetch($sql);
if(!$row[wr_id]) {
    echo json_encode(array(“error”=>”게시글이 존재하지 않습니다.”));
    exit;
}

// 파일정보
$sql = ” select bf_file from $g4[board_file_table] where bo_table = ‘$bo_table’ and wr_id = ‘$wr_id’ order by bf_no asc limit 1, 1 “;
$file = sql_fetch($sql);
$filepath = $g4[‘path’] . ‘/data/file/’ . $bo_table . ‘/’ . $file[bf_file];

$w = 698;
$h = 408;
$ratio = $h / $w;

$size = @getimagesize($filepath);

if(($size[1] / $size[0]) > $ratio) { // 세로가 긴 사진
    if($size[1] > $h) {
        $height = $h;
    } else {
        $height = $size[1];
    }

    $width = round(($w * $height) / $h);
} else {
    if($size[0] > $w) {
        $width = $w;
    } else {
        $width = $size[0];
    }

    $height = round(($width * $h) / $w);
}

// 패딩
$top_pad = round(($h – $height) / 2);
$left_pad = round(($w – $width) / 2);

$image = “<div id=”img_{$wr_id}” style=’padding-top: {$top_pad}px; padding-left: {$left_pad}px;’><img src=”$filepath” width=”$width” height=”$height” /></div>”;

$link = “<a href=”$row[wr_link1]” target=”_blank”>” . $row[wr_link1] . “</a>”;

// 이전컨텐츠
$sql = ” select wr_id from $write_table    where wr_id < $wr_id order by wr_num asc limit 0, 1 “;
$prev = sql_fetch($sql);
if($prev[wr_id]) {
    $prev_id = “con_$prev[wr_id]”;
} else {
    $prev_id = “”;
}

// 다음컨텐츠
$sql = ” select wr_id from $write_table    where wr_id > $wr_id order by wr_num desc limit 0, 1 “;
$next = sql_fetch($sql);
if($next[wr_id]) {
    $next_id = “con_$next[wr_id]”;
} else {
    $next_id = “”;
}

$subject = get_text($row[wr_subject]) . “&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp” . $link;
$explan = get_text($row[wr_content]);
$date = get_text($row[wr_1]);< br />
// 데이터 json 변환
echo json_encode(array(“image”=>$image, “subject”=>$subject, “explan”=>$explan, “prev”=>$prev_id, “next”=>$next_id, “date”=>$date));
exit;
?>