1. 새로고침할 때마다 랜덤한 이미지


기본 틀

<div data-inven-random="i1,i2,i3,i4,i5"></div>
<img data-inven-id="i1" src="이미지 주소1" style="display:none">
<img data-inven-id="i2" src="이미지 주소2" style="display:none">
<img data-inven-id="i3" src="이미지 주소3" style="display:none">
<img data-inven-id="i4" src="이미지 주소4" style="display:none">
<img data-inven-id="i5" src="이미지 주소5" style="display:none">


예시 코드

<div data-inven-random="i1,i2,i3,i4,i5"></div>
<img data-inven-id="i1" src="https://upload2.inven.co.kr/upload/2017/02/10/bbs/i13412250285.jpg" style="display:none">
<img data-inven-id="i2" src="https://upload2.inven.co.kr/upload/2017/02/10/bbs/i13445753572.jpg" style="display:none">
<img data-inven-id="i3" src="https://upload2.inven.co.kr/upload/2017/07/12/bbs/i13248874646.jpg" style="display:none">
<img data-inven-id="i4" src="https://upload2.inven.co.kr/upload/2017/03/18/bbs/i16593116157.jpg" style="display:none">
<img data-inven-id="i5" src="https://upload2.inven.co.kr/upload/2017/02/15/bbs/i13557711354.png" style="display:none">


예시 출력 결과
----------------------------------------------------------------------------


----------------------------------------------------------------------------
가장 기본적인 방법입니다.






2. 1번 + 클릭할 때마다 랜덤한 이미지


기본 틀

<div data-inven-random="i1,i2,i3,i4,i5" style="width:450">
<img data-inven-id="i1" src="이미지 주소1" style="display:none">
<img data-inven-id="i2" src="이미지 주소2" style="display:none">
<img data-inven-id="i3" src="이미지 주소3" style="display:none">
<img data-inven-id="i4" src="이미지 주소4" style="display:none">
<img data-inven-id="i5" src="이미지 주소5" style="display:none">
</div>


예시 코드

<div data-inven-random="i1,i2,i3,i4,i5" style="width:450">
<img data-inven-id="i1" src="https://upload2.inven.co.kr/upload/2017/02/10/bbs/i13412250285.jpg" style="display:none">
<img data-inven-id="i2" src="https://upload2.inven.co.kr/upload/2017/02/10/bbs/i13445753572.jpg" style="display:none">
<img data-inven-id="i3" src="https://upload2.inven.co.kr/upload/2017/07/12/bbs/i13248874646.jpg" style="display:none">
<img data-inven-id="i4" src="https://upload2.inven.co.kr/upload/2017/03/18/bbs/i16593116157.jpg" style="display:none">
<img data-inven-id="i5" src="https://upload2.inven.co.kr/upload/2017/02/15/bbs/i13557711354.png" style="display:none">
</div>


예시 출력 결과
----------------------------------------------------------------------------

----------------------------------------------------------------------------


단순히 </div> 의 위치만 바꿨습니다.

<div> 안의 <img> 들은 인장 편집단계에서 width="438" 이 자동적으로 설정되기 때문에

<div> 에 style="width:450" 를 입력해서 이를 방지합니다.






3. 1번 + 랜덤 버튼


기본 틀

<div style="max-height:450;width:450"><div data-inven-random="i1,i2,i3,i4,i5"></div>
<img data-inven-id="i1" src="이미지 주소1" style="display:none">
<img data-inven-id="i2" src="이미지 주소2" style="display:none">
<img data-inven-id="i3" src="이미지 주소3" style="display:none">
<img data-inven-id="i4" src="이미지 주소4" style="display:none">
<img data-inven-id="i5" src="이미지 주소5" style="display:none">
<a data-inven-random="i1,i2,i3,i4,i5"><img src="랜덤 버튼 주소"></a>
</div>


예시 코드

<div style="max-height:450;width:450"><div data-inven-random="i1,i2,i3,i4,i5"></div>
<img data-inven-id="i1" src="https://upload2.inven.co.kr/upload/2017/02/10/bbs/i13412250285.jpg" style="display:none">
<img data-inven-id="i2" src="https://upload2.inven.co.kr/upload/2017/02/10/bbs/i13445753572.jpg" style="display:none">
<img data-inven-id="i3" src="https://upload2.inven.co.kr/upload/2017/07/12/bbs/i13248874646.jpg" style="display:none">
<img data-inven-id="i4" src="https://upload2.inven.co.kr/upload/2017/03/18/bbs/i16593116157.jpg" style="display:none">
<img data-inven-id="i5" src="https://upload2.inven.co.kr/upload/2017/02/15/bbs/i13557711354.png" style="display:none">
<a data-inven-random="i1,i2,i3,i4,i5" style="position:relative;top:-100"><img src="https://upload2.inven.co.kr/upload/2017/07/14/bbs/i13646996023.png" width="100"></a>
</div>


예시 출력 결과
----------------------------------------------------------------------------

----------------------------------------------------------------------------


data-inven-random 과 data-inven-list는 내용물이 같으면 같은 개체로 취급하기 때문에

랜덤 버튼 또한 data-inven-random="i1,i2,i3,i4,i5" 로 동일하게 작성했습니다.

표시된 이미지의 밑에 버튼이 위치하기 때문에 style="position:relative;top:-100" 코드로 위치를 변경했습니다.


위의 결과로 100px만큼의 하단 공백이 생기기 때문에

최상위 <div> 에 max-height:450 로 높이를 고정해야 합니다.

예시의 경우 5개의 이미지 모두 450x450로 통일했기 때문에 max-height:450 로 했지만

여러분들이 사용할 이미지 중 가장 큰 이미지의 높이를 입력하시면 됩니다.




(위 세 예시 모두 동일한 내용물이기 때문에 랜덤 버튼이 연동됩니다.)