태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

이미지 설명과 캡션이 함께 노출되는 뉴스형 슬라이드 갤러리 - JQuery Photo Slider

디자이너와 개발자들에게 가끔씩 유용한 하나의 소스가 큰 힘이 되기도 합니다.
오늘은 이미지 갤러리 소스를 소개하려고 합니다. 지금까지 다양한 이미지 갤러리 소스들이 공개되었지만 구현하고자 하는 서비스 형태에 맞춰 제어가 가능한 이미지 갤러리 소스는 보기 힘들지 않았나 싶습니다.

JQuery Photo Slider

설명, 캡션이 함께 보여지는 이미지 슬라이드 쇼 - JQuery Photo Slider

이번에 소개하는 JQuery Photo Slider는 이러한 기대사항을 어느 정도 충족시켜 줄 수 있는 유용한 이미지 갤러리 소스라고 볼 수 있습니다. 뉴스 슬라이드 이미지 갤러리 형태라고 보시면 이해가 빠를 것 같습니다. 그리고 JQuery Photo Slider는 다음과 같은 특징을 가지고 있습니다.

1. 슬라이드 쇼 이미지 및 설명과 함께 / 캡션
2. previous(이전), next(다음), pause(일시중지), play(재생) buttons을 제공.
3. 마우스 오버와 아웃을 통해 슬라이드쇼를 일시 정지 및 재생 가능
4. 교차되는 두 슬라이딩 사이에 이펙트 효과 적용 가능.
5. 슬라이드쇼 속도 조절 가능
6. 스마트 스크립트(Smart Script)가 슬라이드의 너비와 높이를 자동 계산.

아래는 지금까지 공개된 JQuery Photo Slider의 데모와 소스를 다운로드 할 수 있는 링크입니다.

[ 디자인 소스 - 반투명 캡션 창이 있는 이미지 슬라이드 갤러리 소스]
반투명 캡션 이미지 슬라이드 쇼 데모 보기
반투명 캡션 이미지 슬라이드 쇼 소스 다운로드

[ 디자인 소스 - 캡션과 제어기능이 추가된 뉴스 슬라이드 소스]

캡션과 제어기능이 추가된 뉴스 슬라이드 데모 보기
캡션과 제어기능이 추가된 뉴스 슬라이드 소스 다운로드

저작자 표시 비영리 동일 조건 변경 허락
신고
※글에 대한 여러분 의견을 남겨 주십시오. 감사합니다!
    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2009.08.02 16:04 신고  댓글주소  수정/삭제

      공플님이 재밌어 하는 콘텐츠인 것 같은데요.
      시간나면 구현해 보시고 저에게도 알려 주세요.^^
      방학인데 어디 좋은 곳으로 여행 안 가세요?

  1. Favicon of http://admuncher.tistory.com/ BlogIcon 무관학교 2009.08.02 23:17 신고  댓글주소  수정/삭제  댓글 남기기

    정말 마음에 들고 바로 블로그에 적용해봐야겠어요^^ 고맙습니다.

  2. Favicon of http://poem23.com BlogIcon 학주니 2009.08.04 09:15 신고  댓글주소  수정/삭제  댓글 남기기

    우오~ 괜찮겠는데요.. ^^;

  3. 폭주야옹이 2009.08.06 13:22 신고  댓글주소  수정/삭제  댓글 남기기

    감사합니다.
    뒤늦게 디자인쪽에 관심을 가지고 배우고 있는 초보입니다.. 직장다니면서 배우는게 쉽진않네요,, 게다가 전공이 법쪽이라 ㅜㅜ::
    공부하는 마음으로 자주 이용하고 있어요.. 좋은 정보 감사드립니다

  4. Favicon of http://www.designpot.co.kr BlogIcon 아이레스 2009.08.11 13:22 신고  댓글주소  수정/삭제  댓글 남기기

    오옷..깔끔하고 멋집니다. 좋은 소스자료 감사합니다.

  5. 조은김 2009.10.07 16:51 신고  댓글주소  수정/삭제  댓글 남기기

    안녕하세요 캡션이미지 슬라이드 쇼를 보고 굉장히 반갑습니다
    그리고 감사합니다
    제가 운영하는 홈피에 삽입할까하는데 asp 소스를 삽입히는 방법이 어렵네요 아래 소스를 보냅니다 혹시 아시면 방법좀 주세요?
    아래 소스-------------------
    <%
    sql="select top 1 idx,msection,ssection,title,photo,content from news_list where news_type='3' order by idx desc"
    set rs=db.execute(sql)

    if rs.eof or rs.bof then
    else
    i=1
    do until rs.eof
    idx=rs(0)
    msection=rs(1)
    ssection=rs(2)
    mtitle=rs(3)
    photo=rs(4)
    content=rs(5)

    sContents = content

    content = split_string(RegExpReplace(sPattern,sContents,"";),60)
    %>
    </b></font></a>
    <table width="244" border="0" align="center" cellpadding="1" cellspacing="1" bgcolor="#E4E4E4">
    <tr>
    <td width="240" height="106" bgcolor="#FFFFFF"><div align="center"><a href="view.asp?idx=<%=idx%>&amp;msection=<%=msection%>&amp;ssection=<%=ssection%>"class="style54"></a><a href="view.asp?idx=<%=idx%>&amp;msection=<%=msection%>&amp;ssection=<%=ssection%>"><img src="../news_file/<%=photo%>" width="240" height="190" border="0" /></a><a href="view.asp?idx=<%=idx%>&amp;msection=<%=msection%>&amp;ssection=<%=ssection%>"><br />
    </a><a href="view.asp?idx=<%=idx%>&amp;msection=<%=msection%>&amp;ssection=<%=ssection%>"></a></div></td>
    </tr>
    <tr>
    <td height="20" bgcolor="#FFFFFF"><div align="center"><a href="view.asp?idx=<%=idx%>&amp;msection=<%=msection%>&amp;ssection=<%=ssection%>" class='style9'><%=mtitle%></a><a href="view.asp?idx=<%=idx%>&amp;msection=<%=msection%>&amp;ssection=<%=ssection%>" class='brn02'>
    <%

    rs.movenext
    i=i+1
    loop
    end if
    rs.close
    %>

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2009.10.07 18:24 신고  댓글주소  수정/삭제

      안녕하세요? 조은김 님.
      ASP에 대해서는 제가 지식이 얕아서 시원스럽게 답을 드리기가 어렵네요. 해당 소스를 가지고 주변에 ASP를 잘 아시는 분께 도움을 청해 보시길 바랍니다.


우드스