Lightbox 테스팅


K2 포럼LightBox대한 내용이 올라왔더군요.

기존에 클릭하면 새창으로 원본크기의 이미지가 뜨는 스크립트를 사용해왔는데, 이 스크립트로 바꾸는게 더 좋을것 같네요.

lightbox test onelight box test two

이미지를 클릭해 보세요

큰문제는 아니지만 k2테마와 충돌? 하는게 하나 있군요, 워드프레스에 로그인한 상태에서 싱글페이지(각 포스트 페이지)를 열었을때 위 스크립트가 작동하질 않는군요…:???:
궁여지책으로 k2테마의 ajax comment 기능을 끄면 제대로 작동합니다. ajax스크립트와 lightbox스크립트가 충돌을 일이키나보네요-_-;또.. 한참 삽질을 해야 해결 할 수 있을듯… (으헉;;)

우선 50%정도는 해결 했습니다. 원인은 ajax-comment에 있는것이 아니라 window.onload에 있었네요. comments.php에서 window.onload = HideUtils;을 포함하는 두라인을 코멘트 처리하는걸로 오작동되던건 해결됩니다.(ajax-comment기능을 켠 상태로도..)


16 responses to “Lightbox 테스팅”

  1. @simon ::
    1. 다른테마에 적용하실 수 있습니다. K2테마의 ajax-comments.js, effects.js.php, prototype.js.php, comments-ajax.php파일이 필요하고, 사용하려는 테마의 header.phpcomments.php파일을 수정해야 합니다. 자세한 사항을 코멘트로 설명드리기엔 너무 기네요. 중요한건 ajax스크립트에서 호출하는 id를 가진 element가 꼭 있어야 한다는 겁니다.

    2. K2테마에서는 코멘트(ajax) 입력 후 글쓰기창이 선택되지 않게 되어 있습니다. ajax-comments.js파일을 수정하면 설정값을 바꿀 수 있더군요.

    가능하면 관련사항을 시간날때 정리해서 올려보도록 하겠습니다. 즐거운 하루 되세요~:)

  2. ajax comment 다른 테마에 적용할 수 있는 방법은 없나요? 해보다가 완벽히 작동을 안해서요. 그리고 원래 코멘트 쓰고 나서 summit 후에 다시 코멘트 달려고 하면 폼 부분 입력이 안되는 것인지.

  3. @good::
    홀수,짝수코멘트의 class를 다르게하구요..
    (제 기억으론 Defalut테마에서 지원합니다. 클래스에 ‘alt’가 붙느냐 마느냐…)

    글 작성자(author)의 class를 다르게해서 css스타일을 만들었습니다…
    ==========================================
    코멘트가 새로고침없이 바로뜨는걸 좋다고 하신거라면…
    k2테마에서 지원하는 “ajax comment”기능입니다 :)

  4. @she:: 제대로 작동된다니 다행입니다. 아래 unfusion님의 트랙백도 한번 확인해보세요;)
    @unfusion:: 트랙백 제대로 수신 됐습니다.;)

  5. 082님 혹시 이 포스트에 트랙백핑이 중복돼서 오지 않았나요? 트랙백이 안가는 것 같아 건드리다가 제가 실수한 것 같습니다. 혹시 여러번 중복 되었다면 죄송합니다.

  6. […] 082.net 에서 Lightbox 스크립트에 대한 글을 보고 마음에 들어서 절망클럽에도 삽입하려고 했는데 이게 마음대로 되지 않았다. 처음에 쉽게 생각해서 테스트도 안 해보고 플러그인으로 만들어 삽입하려 한 것이 잘못이었을까? 간단하게 작동할 줄 알았던 플러그인이 작동하지 않자 테마에 추가도 해 보았지만 역시 작동이 안돼서 이미지 경로 설정이 까다롭다는 082님의 조언을 참고해, 시간 날 때 마다 이미지 경로를 바꾸어 보며 시도해 보았다. 하지만 결국 작동이 안 돼, “이 스크립트하고는 인연이 없나보다” 포기하고 있었는데 오늘 혹시하는 마음에 구글에 “lightbox plugin”로 검색했더니 요런 플러그인이 나왔다. […]

  7. 답변 감사합니다.;)덕분에 다른 계정 사진도 팝업할 수 있게 된 것이 무지 기쁩니다. ^^

  8. 특별히 바꾼건 없구요.. 제가 테스트해보니 js파일과, css파일에있는 gif, png파일들의 경로설정때문에 안되는것으로 보입니다. 이미지의 경로를 설정할때 She님의 홈페이지 최상위 루트로부터의 상대경로를 입력하시면 됩니다. 제 경우 파일들을 wp-include/js/lightbox경로에 모두 업로드했습니다. 제가 입력한 경로를 예로 보여드리겠습니다.
    1. Lightbox.js파일중 36라인부근
    var loadingImage = '/wp/wp-includes/js/lightbox/loading.gif';
    2. Lightbox.css파일중 20라인부근
    AlphaImageLoader(src="/wp/wp-includes/js/lightbox/overlay.png"
    3. 테마의 헤더파일의 헤더부분에 삽입한코드


    제가 이외에는 수정한 사항이 없으므로 she님의 블로그에서도 작동될거라 생각됩니다. 실패하신다면 다시 답글 남겨주세요 ;?:

  9. 원래는 이미지 팝인 플러그인을 써왔는데 기능은 같아요. 단, 한글 title을 쓰면 에러가 나고, 계정 내 파일만 되는 제약이 있어서 그게 제일 아쉬웠는데 그냥 이 스크립트 쓰기로 했어요. 다른 계정 파일도 자유롭게 사용할 수 있어서요.

    그런데 스크립트가 작동하지 않아서 082님의 스크립트를 다운받아 썼더니 되네요. 스크립트 파일 중에서 뭘 바꾸신 건지 가르쳐주실 수 있나요?

  10. @unfusion:: 그러게요… 저는 이곳에 적용시키는데도 좀 애먹었답니다. 이미지 경로 설정하는데도 애먹구요..-_-;플러그인 형태로 만들기에 의외로 버거울지도 모르겠네요..^^;

  11. 스크립트와 CSS 파일을 헤더에 삽입하면 간단하게 끝나겠거니 생각하고 만들어서 테스트 해봤는데 잘안되더군요. 디렉토리 설정 같은게 잘못 됐나 싶어 바로 테마에 삽입해 봤는데도 잘 안되서 이리저리 바꾸며 시도해 보고 있습니다.

  12. 이 스크립트 정말 유용한데요. 시간날 때 적용해 보고 플러그인으로도 한 번 만들어 봐야 겠습니다.