이번시간에는 메인이미지를 플래시와 비슷한 효과가 되도록 j-Query(제이쿼리)형태로 만들어보겠습니다.

j-Query는 플래시와 비슷한 효과를 낼 수 있으며 스크립트 형태로 용량이 아주 작아서 로딩이 빠르고 모바일기기에서도 지원된다는점이 장점이라고 할 수 있습니다.

그렇다고 j-Query를 공부하실 필요는 없어요~  지금부터 시작해보겠습니다.

 

 

 

[디자인관리 > 고급 디자인 관리 > 전체 화면 구성]으로 이동해서 아래 부분이 체크되어 있도록 설정합니다.

※ 이 부분이 체크되어 있지 않을 경우 j-Query가 동작하지 않습니다 !

이번에 만들 j-Query는 가로와 세로크기가 700*450으로 만들것입니다.

따라서 필요한 이미지를 동일한 크기에 맞추어 3개정도 준비해주시기 바랍니다.

이미지가 준비되었다면, [디자인관리 > 전문가 환경설정 > 맞춤 XML 파일생성]로 이동해서 메뉴추가를 눌러 아래와 같이 입력하고 확인버튼을 누릅니다.

현재 필요한 부분은 메인에서 노출될 이미지만 필요하므로 이미지를 추가할 수 있는 "첨부파일1"만 사용합니다.

 

 

맞춤 XML설정이 완료되면  맞춤 XML그룹관리에서 데이터관리를 눌러 이미지를 3개정도 등록합니다.

차후 데이터의 등록 및 수정시에도 이곳에서 설정하시면 됩니다.

 ※이미지에 링크를 연결하고 싶을 경우에는  맞춤 XML파일생성에서 링크1에 항목명을 입력하시면 됩니다.

 

 

맞춤 XML의 이미지등록이 완료되면, 이제는 실제로 j-Query를 만들어보겠습니다.

[디자인관리 > 전문가 환경설정 > 맞춤 XML 파일생성]에서 XML유형1의 복사버튼을 클릭합니다.

※ XML유형은 2가지 형태( XML유형1, XML유형2)로 만들어지며, 필요한 따라 사용하시면 됩니다.

[디자인관리 > 고급 디자인 관리 > 그룹디자인 관리]이동해서 XML연동을 클릭하고 이미지 슬라이드 롤링 v0.01을 선택합니다.

아래와 같이 설정하고 미리보기를 클릭해서 확인후에 등록합니다.

 

 

[디자인관리 > 고급 디자인 관리 > 메인 화면 디자인]로 이동해서 생성된 {GROUP_main}을 아래와 같이 추가합니다.

<table width="740" border="1"> <tr> <td> {GROUP_main} <p><br> 안녕하세요 000 네 홈페이지 입니다.</p> <br> <hr> 공지사항<br> {GROUP_board1}<br> <br> <hr> <br> 최근사진<br> {GROUP_board2}<br> <br> <br> </td> </tr> </table>

 
 

완성화면 : http://uhkr19c.aramschool.co.kr/shop_main/main_body.htm