Rev. 2.73

태터툴즈 클래식 RC3의 갤러리는 자잘한 버그가 있다. 두 번째 장부터 캡션이 없어도 공백이 밀리는 현상과, 메인페이지에 갤러리가 한건 이상 있는 경우 이미지 크기가 자동으로 변해 버리는 오류가 그것이다. 버그를 잡는 김에 인터페이스를 약간 다이내믹하게 변경하고 표시방법 등을 고쳐보았다. 적용된 갤러리는 아래에서 보는 바와 같다.

attachment
태터툴즈 클래식 RC3 캡션 테스트
attachment
이미지 : '영화 나의결혼 원정기'중에서...

종전과 다른점
- 이미지 외곽에 보더적용
- 평상시 이미지가 슬라이드되도록 변경
- 인터페이스에 마우스르 올리면 오파시티 높아짐
- 자막 보기/켜기 버튼 추가
- 클릭영역에서 이미지 저장 불가(크게 보기하여 저장가능)
- 자막의 위치 변경 및 글씨체 변경.(glow 필터적용, IE 전용)
- 프레임 위치 변경 및 글씨체 변경
- 그림을 클릭하면 다음장으로 넘기도록 변경(크게 보기는 돋보기 아이콘 사용)
- 마우스를 올리면 슬라이드 멈추고 오파시티가(투명도)가 적용된 인터페이스 등장(마우스를 내려도 슬라이드는 자동으로 진행되지 않음, 슬라이 버튼 클릭 필요)
- 적용된 오파시티 효과는 파이어폭스(모질라)와 익스플로러에도 모두 작동가능

사용시 주의사항
- 가로 사이즈가 최소 230픽셀 이상인 이미지를 사용할 것
- 가급적이면 인위적으로 줄여진 이미지 사용은 자제할 것
- 캡션은 3줄이상 넘지 않도록 주의할 것

※ 오류, 버그, 개선 등과 관련된 피드백은 이곳에 댓글 및 트랙백으로 남겨주기 바란다.

- 첨부된 파일에서 추가된 이미지를 사용할 수 있습니다.
- 관리자 글쓰기 화면에서 이미지가 깨지던 부분을 수정하였습니다.
- 세로 크기가 서로다른 이미지일 경우 캡션위치를 따라가게 수정하였습니다.(컨트롤러는 따라가지 않습니다.)

Comments

Got something to add? You can just leave a comment.

  • 파이어준님 갤러리에서 사진을 클릭하면 다음 장으로 넘어가는데
    마우스 포인터를 좌, 우 방향을 가리키게 해주려면 어떻게 하나요?
    아무래도 그 것이 알아보기 쉬울 것 같습니다.

    reply edit

  • 파이어준 파이어준

    좋은 아이디어 이군요. 마우스 아이콘을 바꿔주는 스크립트와 아이콘 이미지, 그리고 클릭영역을 배분하면 문제는 없겠지만, 너무 무거워지지 않을까 걱정되기도 합니다.

    reply edit

  • 캡션보기에 들어간 이미지 파일은 공개해 주셔야지요;; 다름이름으로 저장해서 소스뜯어보고 있습니다. 또 파이어준님 덕분에 삽질 쉽게 합니다. ^^;

    reply edit

  • 파이어준 파이어준

    추가된 이미지를 빼먹었군요. 죄송합니다. ^^; 그게 말이죠; 클릭영역을 레이어로 띄어 만들다보니 불가피하게 되었습니다. 조금더 꼼수를 부려봐야겠군요.

    reply edit

  • 애디터의 미리보기에서 갤러리의 이미지 파일들 겹침현상이 있으며.. 갤러리에 들어가는 사진크기가 제각각인 경우에 인터페이스와 이미지설명(자막)이 밑으로 많이 밀리는 현상도 있네요. 동일한 크기의 이미지인 경우에는 정상작동하는 것을 확인했습니다.

    reply edit

  • 파이어준 파이어준

    지적해 주셔서 감사합니다. 이미지경로를 입력하는 과정의 오류는 수정하도록하겠습니다. 두번째 크기가 다른사진에 대한 문제는 조금더 꼼수가 필요한것 같군요.

    reply edit

  • 파이어준 님,
    다음 이이지 클릭시 한줄 띄워지는 것만은 어떻게 수정하나요?

    reply edit

  • 파이어준 파이어준

    한줄띄어지는 것만 수정하려면 아래의 코드를
    <div class=cap1 id="scap<?=$snum?>" style="margin-top:4px;"><?=nl2br2($i_set[0][3])?></div>

    아래처럼 변경하시고
    <tible><tr><td class=cap1 id="scap<?=$snum?>" style="margin-top:4px;"><?=nl2br2($i_set[0][3])?></td><tr></table>

    마진 및 페딩을 조정하여 잘 어울리게 조율하시면 되겠습니다.

    reply edit

  • 오늘 잠도 안 오는데, 이것마저 고쳐볼까 합니다. 오오~ 불타오릅니다. ㅎ

    reply edit

  • 잘 적용했어요. >_<
    참, 이미지 설명에 키워드에 포함된 단어가 들어가면 작동 안하는거 맞죠?
    개선된 갤러리도 이런 증상은 어쩔 수 없나 보네요. ^-^

    reply edit

  • 또 한가지 말씀드릴게요.
    가로 / 세로 길이가 다른 사진을 함께 올리면, 세로가 긴 사진에 맞추어져서 캡션과 메뉴가 나와서 세로가 짧은 사진을 볼 때 순간 당황하게 되더군요. ^-^

    사진 크기에 따라 메뉴, 캡션의 위치가 변하게 할 수도 있을까요?

    reply edit

  • 파이어준 파이어준

    태터툴즈 클래식의 키워드기능은 너무 막강(?)해서 링크에도 적용되고 코드에도 적용되어 골치를 썩곤 하는데요. 역시 캡션에도 키워드가 사용되는가 보군요. 캡션에 키워드가 들어가 있으면 작동되지 않습니다. 이부분은 별도로 작업해볼 예정입니다.

    두번째 세로가 짧은사진에 대한 문제는 조금더 꼼수를 부려보도록 하겠습니다. 역시나 다양한 문제가있군요.

    reply edit

  • 클래식 갤러리 - 버그수정 및 기능확장

  • rss리더에서 에러가 나는군요
    (마우스오버하면 소스코드나옵니다.)
    그리고 내부 페이지로 읽으면 자바스크립트 에러가 나옵니다.

    해결방법은 빨간색으로 30하고 0.3 있는 부분 앞쪽에
    background-image:url('<?=$s2path?>images/g_back.gif');background-repeat:no-repeat; z-index:3; filter:alpha(opacity=<font color="#D41A01">30</font>);-moz-opacity:<font color="#D41A01">0.3</font>;"

    즉 url('<?=$s2path?>images/g_back.gif'); 로 작은 따옴표를 넣어주니까 되는군요..

    참고해주세요 ^^

    reply edit

  • 파이어준 파이어준

    피드백 감사드립니다. 알려주신 코드로 업데이트 하도록 하겠습니다.

    reply edit

  • 설치하기만 하면 동영상 블로깅 하는 맛이 나겠네요~ㅋㅋ

    reply edit

  • 파이어준 파이어준

    네, 그런 맛이 나도록 유도한바 없지 않습니다. ^^

    reply edit

  • 이야~ 잘 적용 했습니다. 컨트롤러의 경우 하단배치가 아닌 상단에 고정되도록
    left:<?=$width-210?>px; top:<?=$height-33?>px; 를
    right:15px; top:15px; 로 고쳤습니다. 굳이 컨트롤러가 밑에 있을 필요는 없는것 같애서 말이죠^^
    좋은 소스 감사합니다~

    reply edit

  • 파이어준 파이어준

    적용하시느라 고생많으셨습니다. ^^

    reply edit

  • 태터툴즈 클래식 OR의 패치가 적용된 버전으로 이 팁을 적용해보니 갤러리가 일그러지네요. '' 오파시티 효과의 메뉴는 그림 밖으로 튀어나오고..제대로 표현이 안되네요. 패치된 버전에서 뭔가 바뀐게 있나요? 한 번 알아봐주시겠어요? 그냥 갖다붙이기만 하면 되는데 잘 안되니 이상하네요. ^^;;

    reply edit

  • 넵, 알아보도록 하겠습니다. 코드가 복잡해서 시간이 걸릴듯 합니다. 오류가 발견되면 바로 업데이트 하겠습니다.

    reply edit

  • 뮤직리카 뮤직리카

    이 소스를 급한대로 적용했는데 막 깨집니다. 컨트롤 창은 이상한데 붙어있고 스크립트 에러도 나는데 스킨 문제이려나... ㅠ.ㅠ

    reply edit

  • 아.. 죄송합니다. 요즘 통 시간이 없어서(?) 블로그 관리를 제대로하지 못하고 있습니다. 추후 업데이트 하도록 하겠습니다.

    reply edit

Your Reaction Time!

captcha

avatar