fancybox 사용해보신분계시나요? 정보
fancybox 사용해보신분계시나요?
본문
bo_2 여분필드에다가 fancy를 적용하면은 리스트에서 썸네일을 클릭하면 레이어가 뜨면서 리스트썸네일이 나오는데요.
썸네일 다음을 누르면은 그다음 사진으로 넘어가는데요.. 게시물안에 있는 사진으로 돌아가게 할수 없을까요?
<< 참고소스 >>
<?
//불당썸 설치 필 수
include_once("$g4[path]/lib/thumb.lib.php");
$thumb_width = "370"; //썸네일 가로길이
$thumb_height = "234"; //썸네일 세로길이
$filter[type] = 99; // 언샵마스크
$filter[arg1] = 100;
$filter[arg2] = 1;
$filter[arg3] = 2;
if(!$wr_id) {
echo "<link rel='stylesheet' type='text/css' href='".$board_skin_path."/style.css' />\n";
}
if($board[bo_2] == "fancy") {
echo "<link rel='stylesheet' type='text/css' href='$board_skin_path/js/fancy/jquery.fancybox.css' />\n";
echo "<link rel='stylesheet' type='text/css' href='$board_skin_path/js/fancy/helpers/jquery.fancybox-buttons.css?v=2.0.4' />\n";
echo "<script type='text/javascript' src='$board_skin_path/js/fancy/jquery.fancybox.js'></script>\n";
echo "<script type='text/javascript' src='$board_skin_path/js/fancy/helpers/jquery.fancybox-buttons.js?v=2.0.4'></script>\n";
}
echo "<script type='text/javascript' src='".$board_skin_path."/js/common.js'></script>\n";
echo "<script type='text/javascript' src='".$board_skin_path."/js/jquery.tipsy.js'></script>\n";
if($is_category) {
echo "<script type='text/javascript' src='$board_skin_path/js/jquery.masonry.1.3.2.min.js'></script>\n";
}
// lib 파일
include_once("$board_skin_path/lib/common.lib.php");
// 페이징
$write_pages = get_new_paging($config[cf_write_pages], $page, $total_page, "./board.php?bo_table=$bo_table".$qstr."&page=");
// 리스트 갯수
$list_count = count($list);
?>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$('.service-tipsy').tipsy({fade: true, gravity: 's'});
});
//]]>
</script>
<?php if($board[bo_2] == "fancy") { ?>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$(".fancybox").fancybox({
padding: 10,
openEffect : 'elastic',
openSpeed : 350,
closeEffect : 'elastic',
closeSpeed : 350,
helpers : {
overlay : {
css : {
'background-color' : '#ffffff'
},
speedIn : 500,
opacity : 0.75
},
buttons : {}
},
afterLoad : function() {
this.title = (this.title ? '' + this.title : '') + ' ' + (this.index + 1) + ' of ' + this.group.length;
}
});
});
//]]>
</script>
<? } ?>
<?php if($is_category) { ?>
<script type="text/javascript" src="<?=$board_skin_path?>/js/filter.js"></script>
<? } ?>
<div id= "portfolio" class="jyboard" style="width:<?=$width>100?$width."px":$width?>">
<div class="fleft">
<p class="txt_notice">
<a href='#'><?=$board[bo_1]?></a>
</p>
</div>
</div><div class="clear"></div>
<div class="items mt30">
<?
for ($i=0; $i<count($list); $i++) {
// 썸네일 이미지가 존재하지 않는다면
$thumb_number = ($list[$i][wr_10])? "".$list[$i][wr_10]."":"0";
$file = $list[$i][file][0][path] .'/'. $list[$i][file][$thumb_number][file];
// 업로드된 파일이 이미지라면
if (preg_match("/\.(jpg|gif|png)$/i", $file) && file_exists($file)) {
$thumb = thumbnail($file, $thumb_width, $thumb_height, 0, 1, 90, 0, "", $filter, $noimg); // 첨부 썸네일
} else { //게디터에서 삽입한 이미지 뽑자ㅠㅠ
$edit_img = $list[$i]['wr_content'];
if (eregi("data/cheditor4[^<>]*\.(gif|jp[e]?g|png|bmp)", $edit_img, $tmp)) { // 에디터 이미지추출
$file = $g4['path'].'/' . $tmp[0]; // 파일명
$thumb = thumbnail($file, $thumb_width, $thumb_height, 0, 1, 90, 0, "", $filter, $noimg); // 에디터 썸네일
} else {
$thumb = $board_skin_path."/img/no_img_masonry.jpg";
}
}
$subject = "<span class='txt_subject'>비밀글 입니다.</span>";
$list[$i][preview] = "비밀글 입니다.";
$thumfile = "<img src='{$board_skin_path}/img/secret_masonry.jpg' alt='' class='service-tipsy' title='비밀글' />";
$fancybox = "";
if (!strstr($list[$i][wr_option], "secret") || $is_admin || ($list[$i][mb_id]==$member[mb_id] && $member[mb_id])) {
if ($wr_id == $list[$i][wr_id]) {
$thumfile = "<img src='$thumb' alt='' />";
} else if ($list[$i][is_notice] && ! $list[$i][file][0][file]) {
$thumfile = "<img src='{$board_skin_path}/img/notice_masonry.jpg' alt='' class='service-tipsy' title='공지사항' />";
} else if ($list[$i][is_notice] && $list[$i][file][0][file]) {
$thumfile = "<img src='$thumb' alt='' class='service-tipsy' title='공지사항' />";
} else {
$thumfile = "<img src='$thumb' alt='' />";
}
$class = "off";
if ($wr_id == $list[$i][wr_id]) $class = "on";
$subject = "<span class='txt_subject'>".$list[$i][subject]."</span>";
$list[$i][preview] = strip_tags($list[$i][wr_content]);
$list[$i][preview] = nl2br($list[$i][preview]);
$list[$i][preview] = preg_replace("/\s*<br\s?\/?>\s*/i", " ", $list[$i][preview]);
$list[$i][preview] = str_replace("\"", "", $list[$i][preview]);
$list[$i][preview] = str_replace(" ", "", $list[$i][preview]);
$list[$i][preview] = str_replace(">", "", $list[$i][preview]);
$list[$i][preview] = conv_subject($list[$i][preview], 100, "...");
if(!$list[$i][preview]) $list[$i][preview] = "내용없음";
$fancybox = "class=\"fancybox\" href='$file' data-fancybox-group='$board[bo_table]' ";
}
$comment_cnt = "";
if ($list[$i][comment_cnt])
$comment_cnt = " <a class='txt_comment' href=\"{$list[$i][comment_href]}\"><span style='font-family:Tahoma;font-size:10px;color:#FF4326;'><strong>{$list[$i][comment_cnt]}</strong></span></a>";
if($board[bo_2] == "fancy") {
echo "<div class='box {$list[$i][ca_name]}'>".$notice."".$hot."".$new_icon."<a $fancybox title='".strip_tags($subject)."'>$thumfile</a>\n";
} else {
echo "<div class='box {$list[$i][ca_name]}'>".$notice."".$hot."".$new_icon."<a href='{$list[$i][href]}'>$thumfile</a>\n";
}
?>
</div>
<? echo "</div>\n";
}
?>
</div><!-- // class:items -->
<div class="clearfix"></div>
</form>
<? if($total_page > 1) { ?><div class="paging_area"><?=$write_pages?></div><? } ?>
<div class="list_btm">
<div class="fleft">
<a class="btn_search" href="javascript:layer_search();" title="관리자">관리자</a>
<div id="se_sector" class="fleft" style="display:none;">
<form name="fsearch" method="get">
<input type="hidden" name="bo_table" value="<?=$bo_table?>">
<input type="hidden" name="sca" value="<?=$sca?>">
<input type="hidden" name="sfl" value="<?=$sfl?$sfl:"wr_subject"?>">
<input type="hidden" name="sop" value="<?=$sop?$sop:"and"?>">
<div id="se-sfl" class="jyselect se_sfl">
<a class="selected selected_sfl" href="javascript:;" title="검색항목">제목</a>
<ul>
<li><a href="javascript:;" onclick="click_select(this, 'wr_subject');" title="제목">제목</a></li>
<li><a href="javascript:;" onclick="click_select(this, 'wr_content');" title="내용">내용</a></li>
<li><a href="javascript:;" onclick="click_select(this, 'wr_subject||wr_content');" title="제목+내용">제목+내용</a></li>
<li><a href="javascript:;" onclick="click_select(this, 'mb_id,1');" title="회원아이디">회원아이디</a></li>
<li><a href="javascript:;" onclick="click_select(this, 'mb_id,0');" title="회원아이디(코)">회원아이디(코)</a></li>
<li><a href="javascript:;" onclick="click_select(this, 'wr_name,1');" title="글쓴이">글쓴이</a></li>
<li><a href="javascript:;" onclick="click_select(this, 'wr_name,0');" title="글쓴이(코)">글쓴이(코)</a></li>
</ul>
</div>
<div class="input_stx_wrap">
<input id="stx" name="stx" class="inputbox" maxlength="15" itemname="검색어" required value='<?=stripslashes($stx)?>' style="width:104px;">
<label for="stx">검색어입력</label>
</div>
<div id="se-sop" class="jyselect se_sop">
<a class="selected selected_sop" href="javascript:;" title="검색조건">AND</a>
<ul>
<li><a href="javascript:;" onclick="click_select(this, 'and');" title="AND">AND</a></li>
<li><a href="javascript:;" onclick="click_select(this, 'or');" title="OR">OR</a></li>
</ul>
</div>
<input type="image" src="<?=$board_skin_path?>/img/btn_search.gif" class="btn_submit" alt="검색" />
</form>
</div>
</div>
<div class="fright">
<? if ($is_checkbox) { ?>
<div id="se-func" class="jyselect se_func">
<a class="selected selected_func" href="javascript:;" title="선택명령">선택명령</a>
<ul>
<li><a href="javascript:select_copy('copy');" title="선택복사">선택복사</a></li>
<li><a href="javascript:select_copy('move');" title="선택이동">선택이동</a></li>
<li><a href="javascript:select_delete();" title="선택삭제">선택삭제</a></li>
</ul>
</div>
<? } ?>
<? if($admin_href) { ?>
<a class="btn_adm" href="<?=$admin_href?>" title="관리자">관리자</a>
<? } ?>
<a class="btn_write" href="<?=$write_href?>" title="글쓰기">글쓰기</a>
</div>
</div>
</div>
<script type="text/javascript">
// 검색 레이어
var layer_search = function() {
if(jQuery("#se_sector").is(":hidden")) {
jQuery("#se_sector").show();
jQuery("#stx").focus();
} else {
jQuery("#se_sector").hide();
}
}
/* 안내 열기,닫기 */
var layer_point = function() {
$handle = jQuery("#btn_anno_point");
$target = jQuery("#point_layer");
if($handle.hasClass("on")) {
$handle.removeClass("on");
$target.hide();
jQuery("#point_layer_arrow").remove();
} else {
var $offset = $handle.offset();
var $offset = $handle.offset();
var $top = $offset.top+29;
var $left = $offset.left+16;
jQuery("#fixed-top-layer").append("<div id='point_layer_arrow' class='ico_arrow' style='top:"+$top+"px; left:"+$left+"px'><span class='ico_up_dgray'></span></div>");
$handle.addClass("on");
$target.show();
}
}
var click_select = function(el, value) {
event_select(jQuery(el), value);
}
var load_select = function(sfl) {
$this = jQuery("a[onclick*="+sfl+"]:first");
event_select($this, sfl);
};
var event_select = function($this, value) {
$li = $this.parent();
$a = $li.parent().prev();
$input = jQuery("input[name="+$a.parent().attr("id").split("-")[1]+"]");
$a.html($this.html());
$input.val(value);
$li.parent().children(".on").removeClass("on");
$li.addClass("on");
}
<?
if($sfl) echo "load_select('{$sfl}');";
if($sop) echo "load_select('{$sop}');";
?>
jQuery(function() {
// 목록에서 내용 사용
jQuery("body").prepend("<div id='fixed-top-layer' class='fixed_top_layer'><div class='box_content_view'></div></div>");
// tr hover 효과
jQuery(".list_body tbody tr").hover(
function() {
var $tr = jQuery(this);
$tr.addClass("over");
// 목록에서 내용 사용
<? if($board['bo_use_list_content']) { ?>
var $td = $tr.children(".item_subject");
var $index = $tr.index();
var $subject = $td.children(".subject_area").children("a");
var $offset = $td.offset();
$subject.hover(
function() {
jQuery("#fixed-top-layer").children(".box_content_view").css({display:"block", top:$offset.top+31, left:$offset.left+0}).html(preview[$index]);
},
function() {
jQuery("#fixed-top-layer").children(".box_content_view").css({display:"none"});
}
);
<? } ?>
},
function() {
var $tr = jQuery(this);
var $td = $tr.children(".item_subject");
$tr.removeClass("over");
}
);
// 박스 활성화
jQuery('.inputbox').focus(function() {
jQuery(this).addClass('focusbox');
jQuery("label[for="+jQuery(this).attr("id")+"]").hide();
}).blur(function() {
jQuery(this).removeClass('focusbox');
if(!jQuery.trim(jQuery(this).val())) jQuery("label[for="+jQuery(this).attr("id")+"]").show();
else jQuery("label[for="+jQuery(this).attr("id")+"]").hide();
});
// 검색창 blur
jQuery("#stx").blur()
// 셀렉트박스
selectbox("#se-ctgr");
selectbox("#se-func");
selectbox("#se-sfl");
selectbox("#se-sop");
});
</script>
<? if ($is_checkbox) { ?>
<script type="text/javascript" language="javascript">
function all_checked(sw) {
var f = document.fboardlist;
//<![CDATA[
for (var i=0; i<f.length; i++) {
if (f.elements[i].name == "chk_wr_id[]")
f.elements[i].checked = sw;
}
//]]>
}
function check_confirm(str)
{
var f = document.fboardlist;
var chk_count = 0;
//<![CDATA[
for (var i=0; i<f.length; i++) {
if (f.elements[i].name == "chk_wr_id[]" && f.elements[i].checked)
chk_count++;
}
//]]>
if (!chk_count) {
alert(str + "할 게시물을 하나 이상 선택하세요.");
return false;
}
return true;
}
// 선택한 게시물 삭제
function select_delete()
{
var f = document.fboardlist;
str = "삭제";
if (!check_confirm(str))
return;
if (!confirm("선택한 게시물을 정말 "+str+" 하시겠습니까?\n\n한번 "+str+"한 자료는 복구할 수 없습니다"))
return;
f.action = "./delete_all.php";
f.submit();
}
// 선택한 게시물 복사 및 이동
function select_copy(sw)
{
var f = document.fboardlist;
if (sw == "copy") str = "복사";
else str = "이동";
if (!check_confirm(str))
return;
var sub_win = window.open("", "move", "left=50, top=50, width=500, height=550, scrollbars=1");
f.sw.value = sw;
f.target = "move";
f.action = "./move.php";
f.submit();
}
</script>
<? } ?>
0
댓글 0개