간단한 jQuery 갤러리

간단한 클릭이벤트 레이아웃 갤러리.클릭시 하단 박스와 그아래 텍스트를 변경한다. 대략적인 레이아웃 박스구조.

html소스 총 5명의 사진을 올릴것이다. 이미지는 썸네일이미지5장, 보여줄이미지 5장. 유사반복되는<li> 중간에 생략했다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<section>
<h1>아이돌 갤러리</h1>
<ul id="imagegallery">
<li>
  <figure>
    <a href="images/pic-aiyou.jpg" title="아이유">
      <img src="images/sum-aiyou.jpg" alt="아이유" width="80" height="60"/>      
    </a>
     <figcaption>아이유</figcaption>
  </figure>    
  </li>
<!-- 3번반복-->
<li>
 <figure>
  <a href="images/pic-soyou.jpg" title="소유" >
   <img src="images/sum-soyou.jpg" alt="소유" width="80" height="60"/>   
  </a>
  <figcaption>소유</figcaption>
  </figure>
  </li>  
</ul>
<div>
<img id="placeholder" src="images/pic-aiyou.jpg" alt="아이유" width="400" height="300" />
<p id="description">아이유</p>
</div> 
</section>
Colored by Color Scripter
cs

클릭시 하이퍼링크의 주소와 제목이 하단이미지박스의 주소와 텍스트으로 된다

1
<a href="주소" title="제목" >
cs

이 주소와 제목이 아래에 적용

1
2
<img id="placeholder" src="주소" alt="아이유" width="400" height="300" /> 
<p id="description">텍스트</p>
cs

jQuery없이 스크립트로만 구현하면 길어진다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function showPic(whichpic) {
  var source = whichpic.getAttribute("href");//하이퍼링크속성값
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);//주소교체
  var text = whichpic.getAttribute("title");//이름값
  var description = document.getElementById("description");
   description.firstChild.nodeValue = text; //자식값을변경
  return false;
}
 
function prepareGallery() {//각각 검사후 
  var gallery = document.getElementById("imagegallery");
  var links = gallery.getElementsByTagName("a");
  for ( var i=0; i < links.length; i++) {
    links[i].onclick = function() {
      return showPic(this);
    }
  }
}
Colored by Color Scripter
cs

jQuery에서 구현
$()로접근 속성갑은 attr()로 가져오고 변경,텍스트값은 text()로 변경

1
2
3
4
5
6
7
8
9
$(document).ready(function() {
    $("#imagegallery li").on("click", function(){      
     var imagestitle = $(this).find("a").attr("title"), 
          boximages = $(this).find("a").attr("href");
      $("#placeholder").attr("src", boximages);
      $("#description").text(imagestitle);  
          return false;
    });
});
Colored by Color Scripter
cs

완성된것

http://sianasiatiger.cafe24.com/practice-idea/gall-jQ.html

저작자표시