갤러리를 배열하기

갤러리 배열

이번 예제는 jquery로 이미지를 제어하는 방법을 담은 예제입니다. 예제의 조건은 다음과 같습니다.

1. 이미지들을 100*100 px의 크기로 x간격, y간격으로 배열한다
2. x간격, y간격, 1줄의 이미지 갯수를 input태그로 받아서 버튼을 누르면 그대로 나타나게 한다.
3. 키보드의 +버튼과 -버튼을 누르면 이미지가 추가되었다가 제거되었다가 하게 한다.

아래는 예제를 완성시킨 모습입니다.

이 예제의 코드

<span class="pln"> </span><span class="tag">&lt;h1&gt;</span><span class="pln">갤러리 배열</span><span class="tag">&lt;/h1&gt;</span><span class="pln"> </span><span class="tag">&lt;h3&gt;</span><span class="pln">+버튼으로 이미지 추가, -버튼으로 이미지 제거</span><span class="tag">&lt;/h3&gt;</span><span class="pln"> x간격:</span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"xval"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"10"</span><span class="tag">&gt;&lt;br</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln"> y간격:</span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"yval"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"10"</span><span class="tag">&gt;&lt;br</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln"> 1줄에 이미지 갯수:</span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"number"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"colnum"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"5"</span><span class="tag">&gt;&lt;br</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"배열"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"btnStart"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"name"</span><span class="tag">&gt;&lt;br</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"box"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">&gt;</span><span class="pln"> $</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln"> </span><span class="kwd">for</span><span class="pun">(</span><span class="kwd">var</span><span class="pln"> i</span><span class="pun">=</span><span class="lit">0</span><span class="pun">;</span><span class="pln">i</span><span class="pun">&lt;</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">random</span><span class="pun">()*</span><span class="lit">10</span><span class="pun">;</span><span class="pln">i</span><span class="pun">++){</span><span class="pln"> randomImg2</span><span class="pun">();</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> init</span><span class="pun">();</span><span class="pln"> sta6rt</span><span class="pun">();</span><span class="pln"> </span><span class="pun">})</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> sta6rt</span><span class="pun">(){</span><span class="pln"> init</span><span class="pun">();</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> x </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Number</span><span class="pun">(</span><span class="pln">xval</span><span class="pun">.</span><span class="pln">value</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> y </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Number</span><span class="pun">(</span><span class="pln">yval</span><span class="pun">.</span><span class="pln">value</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> col </span><span class="pun">=</span><span class="pln"> colnum</span><span class="pun">.</span><span class="pln">value</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">if</span><span class="pun">(</span><span class="pln">col</span><span class="pun">&gt;</span><span class="pln">$</span><span class="pun">(</span><span class="str">"img.galler"</span><span class="pun">).</span><span class="pln">length</span><span class="pun">){</span><span class="pln">col</span><span class="pun">=</span><span class="pln">$</span><span class="pun">(</span><span class="str">"img.galler"</span><span class="pun">).</span><span class="pln">length</span><span class="pun">;}</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> row </span><span class="pun">=</span><span class="pln"> parseInt</span><span class="pun">((</span><span class="pln">$</span><span class="pun">(</span><span class="str">"img.galler"</span><span class="pun">).</span><span class="pln">length</span><span class="pun">-</span><span class="lit">1</span><span class="pun">)/</span><span class="pln">col</span><span class="pun">)+</span><span class="lit">1</span><span class="pun">;</span><span class="pln"> alignImg</span><span class="pun">(</span><span class="pln">x</span><span class="pun">,</span><span class="pln">y</span><span class="pun">,</span><span class="pln">col</span><span class="pun">);</span><span class="pln"> resizeSolidBox</span><span class="pun">(</span><span class="pln">col</span><span class="pun">*(</span><span class="lit">100</span><span class="pun">+</span><span class="pln">x</span><span class="pun">)+</span><span class="pln">x</span><span class="pun">,</span><span class="pln">row</span><span class="pun">*(</span><span class="lit">100</span><span class="pun">+</span><span class="pln">y</span><span class="pun">)+</span><span class="pln">y</span><span class="pun">)</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> init</span><span class="pun">(){</span><span class="pln"> </span><span class="kwd">for</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">var</span><span class="pln"> i </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> i </span><span class="pun">&lt;</span><span class="pln"> $</span><span class="pun">(</span><span class="str">"img.galler"</span><span class="pun">).</span><span class="pln">length</span><span class="pun">;</span><span class="pln"> i</span><span class="pun">++)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> $</span><span class="pun">(</span><span class="str">"img.galler"</span><span class="pun">).</span><span class="pln">eq</span><span class="pun">(</span><span class="pln">i</span><span class="pun">).</span><span class="pln">attr</span><span class="pun">({</span><span class="pln"> style</span><span class="pun">:</span><span class="str">"position:absolute"</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span><span class="lit">100</span><span class="pun">,</span><span class="pln"> height</span><span class="pun">:</span><span class="lit">100</span><span class="pln"> </span><span class="pun">})</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> alignImg</span><span class="pun">(</span><span class="pln">x</span><span class="pun">,</span><span class="pln">y</span><span class="pun">,</span><span class="pln">col</span><span class="pun">){</span><span class="pln"> $images </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">"img.galler"</span><span class="pun">)</span><span class="pln"> </span><span class="kwd">for</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">var</span><span class="pln"> i </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> i </span><span class="pun">&lt;</span><span class="pln"> $images</span><span class="pun">.</span><span class="pln">length</span><span class="pun">;</span><span class="pln"> i</span><span class="pun">++)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> x1 </span><span class="pun">=</span><span class="pln"> x</span><span class="pun">+</span><span class="pln">$</span><span class="pun">(</span><span class="str">"#box"</span><span class="pun">).</span><span class="pln">offset</span><span class="pun">().</span><span class="pln">left</span><span class="pun">+((</span><span class="pln">i</span><span class="pun">%</span><span class="pln">col</span><span class="pun">)*(</span><span class="lit">100</span><span class="pun">+</span><span class="pln">x</span><span class="pun">));</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> y1 </span><span class="pun">=</span><span class="pln"> y</span><span class="pun">+</span><span class="pln">$</span><span class="pun">(</span><span class="str">"#box"</span><span class="pun">).</span><span class="pln">offset</span><span class="pun">().</span><span class="pln">top</span><span class="pun">+(</span><span class="pln">parseInt</span><span class="pun">(</span><span class="pln">i</span><span class="pun">/</span><span class="pln">col</span><span class="pun">)*(</span><span class="lit">100</span><span class="pun">+</span><span class="pln">y</span><span class="pun">));</span><span class="pln"> $images</span><span class="pun">.</span><span class="pln">eq</span><span class="pun">(</span><span class="pln">i</span><span class="pun">).</span><span class="pln">css</span><span class="pun">({</span><span class="pln"> left</span><span class="pun">:</span><span class="pln">x1</span><span class="pun">,</span><span class="pln"> top</span><span class="pun">:</span><span class="pln">y1 </span><span class="pun">})</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> resizeSolidBox</span><span class="pun">(</span><span class="pln">x</span><span class="pun">,</span><span class="pln">y</span><span class="pun">){</span><span class="pln"> $</span><span class="pun">(</span><span class="str">"#box"</span><span class="pun">).</span><span class="pln">css</span><span class="pun">({</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> x</span><span class="pun">,</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> y </span><span class="pun">})</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> randomImg2</span><span class="pun">(){</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> ifmoon</span><span class="pun">(</span><span class="pln">x</span><span class="pun">,</span><span class="pln">y</span><span class="pun">,</span><span class="pln">z</span><span class="pun">){</span><span class="pln"> </span><span class="kwd">if</span><span class="pun">(</span><span class="pln">x</span><span class="pun">&lt;</span><span class="pln">y </span><span class="pun">&amp;&amp;</span><span class="pln"> y</span><span class="pun">&lt;</span><span class="pln">x</span><span class="pun">+</span><span class="lit">1</span><span class="pun">){</span><span class="pln">$</span><span class="pun">(</span><span class="str">"#box"</span><span class="pun">).</span><span class="pln">append</span><span class="pun">(</span><span class="pln">z</span><span class="pun">);}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> i </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">random</span><span class="pun">()*</span><span class="lit">5</span><span class="pln"> ifmoon</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln">i</span><span class="pun">,</span><span class="str">'&lt;img id="effectImage" src="http://i1.daumcdn.net/cfs.tistory/resource/1949/blog/plugins/lightbox/images/zzoop.gif" class="galler" style=""&gt;'</span><span class="pun">);</span><span class="pln"> ifmoon</span><span class="pun">(</span><span class="lit">1</span><span class="pun">,</span><span class="pln">i</span><span class="pun">,</span><span class="str">'&lt;img src="https://t1.daumcdn.net/cfile/tistory/261CDE41569EC93101" style="" class="galler" width="410" height="410"&gt;'</span><span class="pun">);</span><span class="pln"> ifmoon</span><span class="pun">(</span><span class="lit">2</span><span class="pun">,</span><span class="pln">i</span><span class="pun">,</span><span class="str">'&lt;img src="https://t1.daumcdn.net/cfile/tistory/212B8834569EC93913" style="" class="galler" width="1000" height="666"&gt;'</span><span class="pun">);</span><span class="pln"> ifmoon</span><span class="pun">(</span><span class="lit">3</span><span class="pun">,</span><span class="pln">i</span><span class="pun">,</span><span class="str">'&lt;img src="https://t1.daumcdn.net/cfile/tistory/2179014E569EC93C2E" style="" class="galler" width="1000" height="543"&gt;'</span><span class="pun">);</span><span class="pln"> ifmoon</span><span class="pun">(</span><span class="lit">4</span><span class="pun">,</span><span class="pln">i</span><span class="pun">,</span><span class="str">'&lt;img src="https://t1.daumcdn.net/cfile/tistory/2714794F5303740F17" alt="" class="galler"&gt;'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> $</span><span class="pun">(</span><span class="str">"#btnStart"</span><span class="pun">).</span><span class="pln">click</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln"> sta6rt</span><span class="pun">();</span><span class="pln"> </span><span class="pun">})</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> enter3</span><span class="pun">(){</span><span class="pln"> </span><span class="kwd">if</span><span class="pun">(</span><span class="pln">event</span><span class="pun">.</span><span class="pln">keyCode </span><span class="pun">==</span><span class="pln"> </span><span class="lit">13</span><span class="pun">){</span><span class="pln"> sta6rt</span><span class="pun">();</span><span class="pln"> </span><span class="pun">}</span><span class="kwd">else</span><span class="pln"> </span><span class="kwd">if</span><span class="pun">(</span><span class="pln">event</span><span class="pun">.</span><span class="pln">keyCode </span><span class="pun">==</span><span class="pln"> </span><span class="lit">107</span><span class="pun">||</span><span class="pln">event</span><span class="pun">.</span><span class="pln">keyCode </span><span class="pun">==</span><span class="pln"> </span><span class="lit">187</span><span class="pun">){</span><span class="pln"> randomImg2</span><span class="pun">();</span><span class="pln"> init</span><span class="pun">();</span><span class="pln"> sta6rt</span><span class="pun">();</span><span class="pln"> </span><span class="pun">}</span><span class="kwd">else</span><span class="pln"> </span><span class="kwd">if</span><span class="pun">(</span><span class="pln">event</span><span class="pun">.</span><span class="pln">keyCode </span><span class="pun">==</span><span class="pln"> </span><span class="lit">109</span><span class="pun">||</span><span class="pln">event</span><span class="pun">.</span><span class="pln">keyCode </span><span class="pun">==</span><span class="pln"> </span><span class="lit">189</span><span class="pun">){</span><span class="pln"> $</span><span class="pun">(</span><span class="str">"img.galler"</span><span class="pun">).</span><span class="pln">eq</span><span class="pun">(</span><span class="pln">$</span><span class="pun">(</span><span class="str">"img.galler"</span><span class="pun">).</span><span class="pln">length</span><span class="pun">-</span><span class="lit">1</span><span class="pun">).</span><span class="pln">detach</span><span class="pun">();</span><span class="pln"> init</span><span class="pun">();</span><span class="pln"> sta6rt</span><span class="pun">();</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="tag">&lt;/script&gt;</span><span class="pln"> </span>