-
- 로그인후 이용해주세요.
유저 자료실
수정) 추천해요 버튼 -> 좋아요 (하트) 버튼으로 이미지 전환 효과
good.zip (1.2K) 11회
11/2 수정
수정합니다ㅠㅠ 좋아요 기록저장 시키는 부분을 놓쳤네요
놓친김에 제가 조금 더 업데이트? 해서
좋아요 버튼누를때 문구도 위에 나오게 했네요
gif 파일에 올렸는데 문구가 거추장스러우면 없애시면 됩니당
아래 추가한 good.php 파일을
\bbs 폴더에 넣어 덮으시면됩니다. (원본 백업은필수)
아래 넣는 소스도 수정했습니다.
-------------------------------------------------------------------
당근처럼
게시판에 있는 추천해요 버튼을
하트로 만드는 소스입니다.
원하시는 게시판에서
theme\rb.basic\skin\board
안에 있는 게시판중
view.skin.php
<!-- 추천 비추천 시작 { -->
<?php if ( $good_href || $nogood_href) { ?>
<div id="bo_v_act">
<?php if ($good_href) { ?>
<span class="bo_v_act_gng">
<a href="<?php if(!$is_member) { ?>javascript:alert('로그인 후 이용하실 수 있습니다.');<?php } else { ?><?php echo $good_href.'&'.$qstr ?><?php } ?>" id="good_button" class="bo_v_good">추천해요 <?php echo number_format($view['wr_good']) ?></a>
<b id="bo_v_act_good" class="font-R"></b>
</span>
<?php } ?>
<?php if ($nogood_href) { ?>
<span class="bo_v_act_gng">
<a href="<?php if(!$is_member) { ?>javascript:alert('로그인 후 이용하실 수 있습니다.');<?php } else { ?><?php echo $nogood_href.'&'.$qstr ?><?php } ?>" id="nogood_button" class="bo_v_nogood">별로에요 <?php echo number_format($view['wr_nogood']) ?></a>
<b id="bo_v_act_nogood" class="font-R"></b>
</span>
<?php } ?>
</div>
<?php } else {
if($board['bo_use_good'] || $board['bo_use_nogood']) {
?>
<div id="bo_v_act">
<?php if($board['bo_use_good']) { ?>
<span class="bo_v_act_gng">
<a href="<?php if(!$is_member) { ?>javascript:alert('로그인 후 이용하실 수 있습니다.');<?php } else { ?>javascript:void(0);<?php } ?>" class="bo_v_good">추천해요 <?php echo number_format($view['wr_good']) ?></a>
<b id="bo_v_act_good" class="font-R"></b>
</span>
<?php } ?>
<?php if($board['bo_use_nogood']) { ?>
<span class="bo_v_act_gng">
<a href="<?php if(!$is_member) { ?>javascript:alert('로그인 후 이용하실 수 있습니다.');<?php } else { ?>javascript:void(0);<?php } ?>" class="bo_v_nogood">별로에요 <?php echo number_format($view['wr_nogood']) ?></a>
<b id="bo_v_act_nogood" class="font-R"></b>
</span>
<?php } ?>
</div>
<?php
}
}
?>
<!-- } 추천 비추천 끝 -->
해당 위소스를 이걸로 바꿔주시면되세요
css도 그냥 한곳에 다 넣었습니다
<!-- 좋아요 및 비추천 버튼 -->
<div id="bo_v_act">
<?php
// 이미 좋아요를 눌렀는지 확인
$is_liked = sql_fetch("SELECT COUNT(*) AS cnt FROM {$g5['board_good_table']}
WHERE bo_table = '{$bo_table}'
AND wr_id = '{$wr_id}'
AND mb_id = '{$member['mb_id']}'
AND bg_flag = 'good'")['cnt'] > 0;
?>
<span class="bo_v_act_gng">
<a href="javascript:void(0);" id="good_button" class="bo_v_good" style="position: relative;">
<!-- 좋아요 알림 메시지 -->
<div id="like_alert" class="like-alert">좋아요 감사합니다 ♡ </div>
<span id="good_icon" class="heart-icon <?php echo $is_liked ? 'filled' : ''; ?>">
<?php echo $is_liked ? "♥" : "♡"; ?>
</span>
<span id="good_count"><?php echo number_format($view['wr_good']); ?></span>
</a>
<b id="bo_v_act_good" class="font-R"></b>
</span>
</div>
<!-- Like Button -->
<script>
// Like Button
$(document).ready(function() {
$("#good_button").click(function() {
// 로그인 여부 확인
if (!<?php echo json_encode($is_member); ?>) {
alert("로그인 후 이용하실 수 있습니다.");
return;
}
$.post("good.php", {
bo_table: "<?php echo $bo_table; ?>",
wr_id: "<?php echo $wr_id; ?>",
good: "good",
js: "on"
}, function(data) {
var result = JSON.parse(data);
if (result.error) {
alert(result.error);
} else {
var goodIcon = $("#good_icon");
var goodCount = $("#good_count");
if (goodIcon.hasClass("filled")) {
goodIcon.removeClass("filled").html("♡"); // 빈 하트
goodCount.text(parseInt(goodCount.text()) - 1);
} else {
goodIcon.addClass("filled").html("♥"); // 채워진 하트
goodCount.text(parseInt(goodCount.text()) + 1);
// 좋아요 알림 메시지 표시
$("#like_alert").fadeIn(300).delay(1500).fadeOut(300);
}
}
});
});
});
</script>
<style>
.heart-icon {
color: gray;
font-size: 20px;
transition: color 0.3s ease;
}
.heart-icon.filled {
color: pink;
}
/* 좋아요 알림 메시지 스타일 */
.like-alert {
position: absolute;
bottom: 100%; /* 하트 버튼 위에 표시 */
left: 50%;
transform: translate(-50%, -10px); /* 중앙 정렬과 약간 위쪽 여백 */
background-color: pink;
color: white;
padding: 5px 10px;
border-radius: 5px;
font-weight: bold;
font-size: 14px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 10;
display: none;
white-space: nowrap; /* 텍스트가 한 줄로 유지되도록 설정 */
}
</style>
- 이전글베이직2 게시판 스킨 - 글 한번만 쓰기 적용2024.11.08
댓글목록
