이미지 비교 게시판 정보
게시판 이미지 비교 게시판
관련링크
첨부파일
테스트한 버전5.4.22
호환 가능 버전5.3 이상 가능할겁니다
본문
두개의 사진을 슬라이드로 이동하면서 비교해볼 수 있는 게시판입니다.
basic게시판을 커스텀했습니다.
원소스: https://www.w3schools.com/howto/howto_js_image_comparison.asp
여분필드를 3개 사용하였습니다.
압축을 풀면 image_compare라는 폴더가 나옵니다.
이것을 그누보드 순정기준 skin/board/image_compare가 되게 업로드해줍니다.
pc용입니다. 모바일용은 테스트과정에서 크기가 안맞는등 오류가 발생해서 차후에 보완하겠습니다.
wr_1: 슬리이드의 위치 버튼의 위치를 숫자로 입력합니다 wr_1: 1:오른쪽, 2:가운데, 2~500사이:왼쪽에서 가운데 사이 적당히 위치
wr_2: 첫째 이미지 예: http://example.com/images/suzy1.png
wr_3: 둘째 이미지 예: http://example.com/images/suzy2.png
감사합니다 ^^
* view.skin.php
<!-- Image Comparison -->
<style>
*{box-sizing: border-box;}
.img-comp-container{
position: relative;
height:540px;
}
.img-comp-img{
position: absolute;
width:auto;
height:auto;
overflow:hidden;
}
.img-comp-img img{
display:block;
vertical-align: middle;
}
.img-comp-slider{
position: absolute;
z-index: 9;
cursor: ew-resize;
/* set the appearance of the slider */
width:40px; height: 40px; background-color:#2196f3; opacity: 0.7;border-radius: 50%;
}
</style>
<script>
function initComparisons() {
var x, i;
/*find all elements with an "overlay" class:*/
x = document.getElementsByClassName("img-comp-overlay");
for (i = 0; i < x.length; i++) {
/*once for each "overlay" element:
pass the "overlay" element as a parameter when executing the compareImages function:*/
compareImages(x[i]);
}
function compareImages(img) {
var slider, img, clicked = 0, w, h;
/*get the width and height of the img element*/
w = img.offsetWidth;
h = img.offsetHeight;
/*set the width of the img element to 50%:*/
img.style.width = (w / '<?php echo $view['wr_1']; // 슬라이드버튼위치 ?>') + "px";
/*create slider:*/
slider = document.createElement("DIV");
slider.setAttribute("class", "img-comp-slider");
/*insert slider*/
img.parentElement.insertBefore(slider, img);
/*position the slider in the middle:*/
slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px";
slider.style.left = (w / '<?php echo $view['wr_1']; // first large image ?>') - (slider.offsetWidth / 2) + "px";
/*execute a function when the mouse button is pressed:*/
slider.addEventListener("mousedown", slideReady);
/*and another function when the mouse button is released:*/
window.addEventListener("mouseup", slideFinish);
/*or touched (for touch screens:*/
slider.addEventListener("touchstart", slideReady);
/*and released (for touch screens:*/
window.addEventListener("touchend", slideFinish);
function slideReady(e) {
/*prevent any other actions that may occur when moving over the image:*/
e.preventDefault();
/*the slider is now clicked and ready to move:*/
clicked = 1;
/*execute a function when the slider is moved:*/
window.addEventListener("mousemove", slideMove);
window.addEventListener("touchmove", slideMove);
}
function slideFinish() {
/*the slider is no longer clicked:*/
clicked = 0;
}
function slideMove(e) {
var pos;
/*if the slider is no longer clicked, exit this function:*/
if (clicked == 0) return false;
/*get the cursor's x position:*/
pos = getCursorPos(e)
/*prevent the slider from being positioned outside the image:*/
if (pos < 0) pos = 0;
if (pos > w) pos = w;
/*execute a function that will resize the overlay image according to the cursor:*/
slide(pos);
}
function getCursorPos(e) {
var a, x = 0;
e = (e.changedTouches) ? e.changedTouches[0] : e;
/*get the x positions of the image:*/
a = img.getBoundingClientRect();
/*calculate the cursor's x coordinate, relative to the image:*/
x = e.pageX - a.left;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
return x;
}
function slide(x) {
/*resize the image:*/
img.style.width = x + "px";
/*position the slider:*/
slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
}
}
}
</script>
</head>
<body>
<div class="img-comp-container">
<div class="img-comp-img">
<img src="<?php echo $view['wr_2']; // first image ?>" alt="" width="960" height="540">
</div>
<div class="img-comp-img img-comp-overlay">
<img src="<?php echo $view['wr_3']; // second image ?>" width="960" height="540" alt="">
</div>
</div>
<script>
/*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/
initComparisons();
</script>
<!-- Image Comparison -->
* write.skin.php
<!-- Image Compare -->
<!-- Slide Button Positon -->
<!-- 1: 버튼이 오른쪽에 위치, 2: 버튼이 가운데 위치, 2~500사이: 왼쪽에서 가운데 사이에 버튼이 위치. -->
<input type=text class="frm_input full_input" name="wr_1" value="<?php echo $write['wr_1']; ?>" placeholder="버튼의 위치를 숫자로 입력합니다 wr_1: 1:오른쪽, 2:가운데, 2~500사이:왼쪽에서 가운데 사이 적당히 위치 ">
<!-- first image -->
<input type=text class="frm_input full_input" name="wr_2" value="<?php echo $write['wr_2']; ?>" placeholder="이미지경로 wr_2:예 http://example.com/images/suzy1.png ">
<!-- second image -->
<input type=text class="frm_input full_input" name="wr_3" value="<?php echo $write['wr_3']; ?>" placeholder="이미지경로 wr_3:예 http://example.oom/images/suzy2.png ">
<!-- Image Compare -->
추천
17
17
댓글 전체
공개 감사 합니다.
늘 관심을 가져주시는 들레아빠님 감사합니다^^
파이팅~
감사합니다.
파이팅이란 말에서 힘이 납니다^^
파이팅이란 말에서 힘이 납니다^^
감사합니다.
관심을 가져주셔서 고맙습니다^^
오 신기하네요ㅋ. 위 링크 사이트에 적용된 형광등(?)같은 로고는 어떻게 만드는건지 알수있을까요?
head.php에 로고부분을 텍스트로 바꾸고 css로 처리한 것입니다.
<div id="logo">부분에서 로고를 <h1>태그로 바꾼 것입니다.
<style>
.glowkim {
font-size: 25px;
color: #fff;
text-align: center;
animation: glowkim 2s ease-in-out infinite alternate;
}
@-webkit-keyframes glowkim {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
}
}
</style>
<div id="hd_wrapper">
<div id="logo">
<a href="<?php echo G5_URL ?>">
<h1 id="kims" class="glowkim" style="font-size: 20px; float: left; text-align:right; color: white; padding-top: 5px;" title="이은경시인 홈페이지">Poetry is Life !!</h1>
</a>
<!--이미지를 주석처리하고 텍스트로 바꾼다. <img src="<?php echo G5_IMG_URL ?>/logo.png" alt="<?php echo $config['cf_title']; ?>">-->
</div>
원소스 출처: https://www.w3schools.com/howto/howto_css_glowing_text.asp
관심을 가져주셔서 감사드립니다^^
<div id="logo">부분에서 로고를 <h1>태그로 바꾼 것입니다.
<style>
.glowkim {
font-size: 25px;
color: #fff;
text-align: center;
animation: glowkim 2s ease-in-out infinite alternate;
}
@-webkit-keyframes glowkim {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
}
}
</style>
<div id="hd_wrapper">
<div id="logo">
<a href="<?php echo G5_URL ?>">
<h1 id="kims" class="glowkim" style="font-size: 20px; float: left; text-align:right; color: white; padding-top: 5px;" title="이은경시인 홈페이지">Poetry is Life !!</h1>
</a>
<!--이미지를 주석처리하고 텍스트로 바꾼다. <img src="<?php echo G5_IMG_URL ?>/logo.png" alt="<?php echo $config['cf_title']; ?>">-->
</div>
원소스 출처: https://www.w3schools.com/howto/howto_css_glowing_text.asp
관심을 가져주셔서 감사드립니다^^
여러모로 새로운걸 알게됩니다. 너무 감사드립니다^^
공개 감사합니다 수고하셨습니다 : )
격려의 말씀 고맙습니다^^
멋지네요~ 일단 스크랩 ^^
공개 감사합니다.
공개 감사합니다.
따뜻한 관심, 감사합니다.
유용한 정보 감사합니다.
관심을 가져주셔서 감사합니다
철용님도 열공이시네요. 수고로운 스킨 감사합니다.
w3shools의 js소스를 갤러리에 적용한 것 뿐입니다.
비타주리님의 스킨을 보면 자바스크립트 함수를 직접 만들어 사용하시는데요.
늘 말씀드리지만 비타주리님 스킨을 보고 많이 배웁니다.
따뜻한 관심에 감사드립니다^^
비타주리님의 스킨을 보면 자바스크립트 함수를 직접 만들어 사용하시는데요.
늘 말씀드리지만 비타주리님 스킨을 보고 많이 배웁니다.
따뜻한 관심에 감사드립니다^^
오 감사합니다.
관심을 가져주시고 격려해주셔서 감사드립니다^^
좋아요~~ 감사합니다.
신비 고수님께서 관심을 가져주시고 격려해주시니 힘이 납니다. 감사합니다^^
좋네요 감사합니다
관심가져주셔서 고맙습니다^^
이미지 업로드는 안되나요 ??
이미지업로드 해서 사용하는 경우는
view.skin.php의 90번째 줄 부근의 파일 출력부분을 주석처리합니다.
<?php
// 파일 출력
// $v_img_count = count($view['file']);
// if($v_img_count) {
// echo "<div id=\"bo_v_img\">\n";
//
// foreach($view['file'] as $view_file) {
// echo get_file_thumbnail($view_file);
// }
//
// echo "</div>\n";
// }
?>
그리고
221번째 줄에서
img src부분을 바꾸어줍니다.
기존 여분필드를 사용하는 코드
<div class="img-comp-container">
<div class="img-comp-img">
<img src="<?php echo $view['wr_2']; // first large image ?>" alt="" width="960" height="540">
</div>
<div class="img-comp-img img-comp-overlay">
<img src="<?php echo $view['wr_3']; // first large image ?>" width="960" height="540" alt="">
</div>
</div>
파일업로드를 사용하는코드
<div class="img-comp-container">
<div class="img-comp-img">
<img src="<?php echo $view['file'][0]['file'] ? $view['file'][0]['path'].'/'.$view['file'][0]['file'] : '' ?>" alt="" width="960" height="540">
</div>
<div class="img-comp-img img-comp-overlay">
<img src="<?php echo $view['file'][1]['file'] ? $view['file'][1]['path'].'/'.$view['file'][1]['file'] : '' ?>" width="960" height="540" alt="">
</div>
</div>
첫째, 둘째 업로드한 파일이 나타납니다.
파일출력부분을 주석처리하지 않으면 업로드한 파일이 2중으로 출력이 됩니다.
view.skin.php의 90번째 줄 부근의 파일 출력부분을 주석처리합니다.
<?php
// 파일 출력
// $v_img_count = count($view['file']);
// if($v_img_count) {
// echo "<div id=\"bo_v_img\">\n";
//
// foreach($view['file'] as $view_file) {
// echo get_file_thumbnail($view_file);
// }
//
// echo "</div>\n";
// }
?>
그리고
221번째 줄에서
img src부분을 바꾸어줍니다.
기존 여분필드를 사용하는 코드
<div class="img-comp-container">
<div class="img-comp-img">
<img src="<?php echo $view['wr_2']; // first large image ?>" alt="" width="960" height="540">
</div>
<div class="img-comp-img img-comp-overlay">
<img src="<?php echo $view['wr_3']; // first large image ?>" width="960" height="540" alt="">
</div>
</div>
파일업로드를 사용하는코드
<div class="img-comp-container">
<div class="img-comp-img">
<img src="<?php echo $view['file'][0]['file'] ? $view['file'][0]['path'].'/'.$view['file'][0]['file'] : '' ?>" alt="" width="960" height="540">
</div>
<div class="img-comp-img img-comp-overlay">
<img src="<?php echo $view['file'][1]['file'] ? $view['file'][1]['path'].'/'.$view['file'][1]['file'] : '' ?>" width="960" height="540" alt="">
</div>
</div>
첫째, 둘째 업로드한 파일이 나타납니다.
파일출력부분을 주석처리하지 않으면 업로드한 파일이 2중으로 출력이 됩니다.
신기하네요. 좋은자료 공개해 주셔서 감사합니다.
좋은 말씀 감사합니다^^
감사합니다.
감사합니다. 날이 추워지는데 감기조심하세요^^
오~ 신기하면서도 재밌네요^^ 감사합니다~!!
굿굿 멋져요
이미지 비율은 고정인가요?
세로사진일경우에는 사용 안되나요>? ㅠㅠ
