그누보드5 게시판 본문(view)서 이미지 클릭시 확대되게

그누보드5 게시판 본문(view)서 이미지 클릭시 확대되게 > 그누보드5 팁자료실

그누보드5 팁자료실

그누보드5 게시판 본문(view)서 이미지 클릭시 확대되게 정보

그누보드5 게시판 본문(view)서 이미지 클릭시 확대되게

본문

원래 그누5는 첨부파일이나 에디터로 넣은 이미지만 확대된다.
아쉽게도 IMG 태그로 넣은 이미지는 확대가 안된다 -_-!
직접 자바스크립트를 짜서 게시판 스킨에 넣었다 ㅠㅠ

gnuboard5\theme\[테마명]\skin\board\basic\view.skin.php 파일을 연다.

가장 아래쪽에 자바스크립트 들이 있다.
<script></script> 안에 코드를 복붙한다. (주석처리 된건 안해도 됨)


/*
var src = $('#bo_v_con img').eq(0).attr('src');
$('#bo_v_con img').eq(0).wrap('<a href="' + src + '" />');
var src1 = $('#bo_v_con img').eq(1).attr('src');
$('#bo_v_con img').eq(1).wrap('<a href="' + src1 + '" />');
var src2 = $('#bo_v_con img').eq(2).attr('src');
$('#bo_v_con img').eq(2).wrap('<a href="' + src2 + '" />');
*/

function imageGetAnchor() {
  var imageCount = $('#bo_v_con img').length -1;
  for (var i = 0; i <= imageCount; i++) {
    var srcTotal = $('#bo_v_con img').eq(i).attr('src');
    $('#bo_v_con img').eq(i).wrap('<a href="' + srcTotal + '" />');
  }
}

imageGetAnchor();

응용하면 라이트박스도 가능할듯.

개발자 도구에서 보면 A태그가 생성되어

IMG 태그를 둘러싸고 있다.