ajax spoiler를 응용한 이펙트 적용

effects.js스크립트를 블로그에 적용중이신 분이라면 블로그의 사이드바나 메뉴, 코멘트 등에 각종 효과를 적용하실 수 있습니다. 그 방법은 굉장히 다양하며, 직접 이펙트 스크립트를 추가해서 새로운 효과를 만들어 사용하실 수도 있습니다.

제가, 스크립트 언어에 대해서 그다지 잘 알지 못해 전반적인 기능이나 변형 적용에 대해서 설명 드리긴 힘들구요, 제 블로그에 적용한 방식을 정리해서 보여드리면 응용해서 적용하실 수 있을것 같네요.

이 글은 v0.9에 맞게 수정되었습니다.

1. 이펙트 적용 원리
  • 각 태그의 아이디(id)를 찾아서 그 아이디로 지정된 객체(element)를 숨기거나 보이게 합니다.
  • 간단한 예를 보여드리겠습니다. 이펙트 적용!(클릭하세요)
  • 위 예제의 코드를 살펴보겠습니다.
  • Spoiler.Collapse(‘객체id’,’적용할이펙트’,this)가 주요 포인트입니다.
  • id가 ‘mycont’인 div태그가 나타났다가, 다시 클릭하면 사라집니다.
  • 사용할 수 있는 이펙트의 종류는 ajax-spoiler와 동일합니다.

Continue reading “ajax spoiler를 응용한 이펙트 적용”

Ajax Spoiler ver.0.4

워드프레스 2.7이상에서 작동하는 새로운 플러그인이 있습니다.

얼마전 ajax spoiler 0.3버전 코멘트에서 티즈님께서 몇가지 문제점과 제안을 제시해 주셨습니다. 그 외에도 effects.js의 몇가지 버그의 해결방법을 찾아서 새롭게 적용했습니다.

1. 변경사항 (Changes)
  • 접혔을때(collpased)와 펼쳤을때(expanded)의 버튼 이미지를 다르게 했습니다.
    (처음부터 원했던 기능인데 이제서야 해결했네요… )
  • [spoiler] [/spoiler] 태그도 작동하게 했습니다. (티즈님의 제안)
  • 오페라(Opera)브라우저에서의 버그 수정(완벽하게 작동하진 않습니다.)
  • 새로운 이펙트 추가 :: slide, simple
  • 이펙트의 확장성을 위한 기능 추가
  • 설치방법, 사용방법은 이전과 동일합니다.
2. 적용예 (Examples)
  • 사용가능한 이펙트는 ‘appear(기본값)’, ‘blind’, ‘apblind’, ‘phase’, ‘slide’, ‘simple’ 입니다.
  • 'simple'이펙트의 적용예 입니다. 동영상이나 무거운 내용을 show/hide할때 사용합니다.

    simple »

    말그대로 그냥 간단하게 보여주고 감추고 하는 기능을 합니다. 틀별한 이펙트가 적용되지 않았습니다. 동영상이나 덩치가 큰 내용에 활용하시면 좋을겁니다.

  • IE에서의 버그때문에 제외했던 'slide'이펙트를 추가했습니다.

    slide »

    IE에서의 버그때문에 제외했던 'slide'이펙트를 추가했습니다.

  • 위 ‘slide’이펙트 적용예의 코드입니다. [spoiler] [/spoiler] 태그를 사용했습니다.
    slide »

    IE에서의 버그때문에 제외했던 'slide'이펙트를 추가했습니다.
  • 기존의 태그도 계속 사용 가능합니다.
3. 다른곳에 활용하기 (Extend)
  • effects.js를 활용해서 사이드바(sidebar)나 다른 곳에 효과를 적용 할 수 있습니다.
  • 현재(2006-02-15) 오른쪽 사이드바 메뉴의 큰 제목을 클릭해보시면 결과를 보실 수 있습니다.
  • 자세한 방법에 이곳(클릭)을 확인하세요

이 플러그인은 simple spoiler를 수정했으며, K2테마에 포함된 스크립트 파일을 첨부했습니다.

K2테마, Squible테마등 기본적으로 prototype.js, effects.js를 탑재한 테마 사용자는
k2테마용 파일을 사용하셔야 합니다.

추가 : 더이상 K2테마용 파일이 따로 필요치 않게 되어 파일을 삭제했습니다.

Ajax Spoiler ver.0.3

워드프레스 2.7이상에서 작동하는 새로운 플러그인이 있습니다.

Ajax Spoiler 0.2공개 후 제가 직접 사용하면서 불편했던점들과, Unfusion님께서 수정해주신부분을 적용해서 0.3버전을 만들었습니다.

1. 변경사항 (Change)
  • 파일을 수정하지 않고 이펙트를 지정할 수 있습니다 (by unfusion)
  • 스크립트, CSS파일들을 플러그인 폴더로 옮겼습니다.(by unfusion)
  • 새로운 이펙트가 추가되었습니다 : phase
  • aj-spoiler.js.php파일을 추가했습니다.
  • effect.js.php파일을 수정하지 않고 원본파일로 사용했습니다.
  • 설치가 이전 버전에 비해 간편해 졌습니다.
  • 워드프레스의 wpautop 필터와 문제를 일으켜 생겼던 Validation오류를 해결했습니다.
2. 설치 (Install)
  • 아래 첨부된 파일을 다운로드받습니다.(일반사용자용, k2테마사용자용)
  • 압축을 풀면 나오는 aj-spoiler폴더를 플러그인폴더에 업로드합니다.
    (e.g. /wp-content/plugins/)
  • 관리자화면 / 플러그인에서 ajax-spoiler를 활성화(Activate) 합니다.
3. 업그레이드 (Upgrade)
  • 기존 플러그인 파일(aj-spoiler.php), 테마폴더에 업로드했던 “js“폴더를 삭제합니다.
  • K2테마 사용자께서는 0.2버전에서 교체했던 effect.js.php파일을 원래의 파일로 바꾸세요
  • aj-spoiler폴더를 플러그인폴더에 업로드합니다.
  • 관리자화면 / 플러그인에서 ajax-spoiler를 활성화(Activate) 합니다.
4. 사용법 예제 (Usage)
  • 0.2버전 포스트에 사용예, 사용법을 참고하세요.
  • 새로운 이펙트 phase 의 사용예 입니다.

    phase이펙트 »

    phase이펙트는 이렇게 작동 합니다.
    FadeIn되면서 BlindDown되고, FadeOut되면서 BlindUp됩니다.

  • 위 사용예의 코드는 아래와 같습니다.
    phase이펙트 »

    phase이펙트는 이렇게 작동 합니다. FadeIn되면서 BlindDown되고, FadeOut되면서 BlindUp됩니다.
  • 이펙트 종류에는 appear(기본값), blind, apblind, phase 네가지가 있습니다.
  • 이펙트종류, 스포일러텍스트를 지정하지 않으시면 기본값으로 자동 지정됩니다.
    (이펙트 = ‘appear‘, 보이기텍스트 = ‘show‘, 감추기텍스트 = ‘hide‘)
5. 참고 및 하고 싶은말 (Readme)
  • 수정에 도움을 주신 Unfusion님께 감사드립니다.:D
  • 문제가 있으면 이 페이지에 코멘트 남겨주시기 바랍니다.
  • 이 플러그인은 Simple-Spoiler를 수정한 버전입니다.
  • 플러그인의 개선에 대한 의견이나, 고칠점이 있다면 언제든지 코멘트 남겨주세요.;)

더이상 k2테마용 버전이 따로 필요치 않게되어 파일을 삭제 했습니다.

추가 : 플러그인이 업데이트되어, 버그가 있는 예전 버전을 삭제했습니다.

Ajax-Spoiler Alpha2

워드프레스 2.7이상에서 작동하는 새로운 플러그인이 있습니다.

몇일전 수정했던 Simple-Spoiler플러그인을 조금 더 보완 해 봤습니다. 제대로 테스트도 안해보고 공개를 해서, 몇몇분들께 괜한 수고를 끼쳐드린것 같아 죄송스럽네요.

1. 변경사항
  • “숨기기”텍스트가 작동합니다.
  • 이펙트(effect)를 추가했습니다.(apblind)
  • 플러그인 파일명을 "aj-spoiler.php"로 바꿨습니다.
  • 헤더부분에 자바스크립트 삽입하는 부분 수정(이부분때문에 불편을 드렸었네요..;;;)
2. 설치
  • 이전 버젼을 사용하시던 분들께서는 기존 플러그인을 “Deactivate“하신 후 파일을 삭제하시고나서 새로운 버젼을 설치하셔야 합니다.
  • 나머지 설치방법은 기존과 동일합니다.("js"폴더도 같이 업데이트 해주셔야합니다)

몇가지 기능추가를 위해 effect.js.php파일을 조금 수정했습니다. 따라서, k2테마(effect.js,protype.js파일적용테마)사용자분들께서는 "js"폴더의 effect.js.php파일을 기존파일에 덮어씌우셔야합니다.

Continue reading “Ajax-Spoiler Alpha2”