간단한 jQuery 갤러리

jQuery/DOM&jQuery 2015.10.30 00:00

간단한 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>
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);
    }
  }
}
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;
    });
});
cs


완성된것

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

저작자 표시
신고

설정

트랙백

댓글

jQuery 페이지 스크롤링(scrolling) 플러그인

jQuery/jQuery플러그인 2010.07.06 20:27

jQuery 페이지 스크롤링(scrolling) 플러그인

클릭에따라 페이지로 가는 플러그인이다. CSS3로 구며줬고 변경가능은 페이지이동시 속도(duration)이다.

미리보는 데모 http://sianasiatiger.cafe24.com/study/Jp_scroll.html

HTML 코드

네비게이션은 다음과 같이 구성한다. 아이디명, 클래스명을 잘봐두자


<div id="nav-dock"> 
 <ul>
	<li><a href="#" id="prev">↑ Prev</a></li>
	<li><a href="#" id="next">↓ Next</a></li>
	<li><a class="scrolltoanchor" href="#comments">Comments</a></li>
	<li><a class="scrolltoanchor" href="#reply">Reply</a></li>
    <li><a href="#top" class="scrolltoanchor">맨위로</a></li>
    </ul>
</div>

콘텐츠 html소스는 다음과 같다.클래스의명을 post로 해주었다.


<div class="post"><h2>포스팅 1</h2><p>내용물,그림등</p></div>
<div class="post"><h2>포스팅 2</h2><p>내용물,그림등</p></div>
<div class="post"><h2>포스팅 3</h2><p>내용물,그림등</p></div>
<div class="post"><h2>포스팅 4</h2><p>내용물,그림등</p></div>
<div class="post"><h2>포스팅 5</h2><p>내용물,그림등</p></div>

네비게이션

네비게이션은 페이지이동해도 유지하도록 고정으로 해준다.


#nav-dock {
	position: fixed;
	right: 15px;
	top: 35%;
}

Javascript

jquery와 사용된스크립트

이 플러그인은 http://sianasiatiger.cafe24.com/js/jquery.scrollTo-min.js

삽입된 스크립트를 보자


$(function() {
    function scroll(direction) {
        var scroll, i,
                positions = [],
                here = $(window).scrollTop(),
                collection = $('.post');
            collection.each(function() {
            positions.push(parseInt($(this).offset()['top'],10));
       });
       for(i = 0; i < positions.length; i++) {
         if (direction == 'next' && positions[i] > here) 
		     { scroll = collection.get(i); break; }
         if (direction == 'prev' && i > 0 && positions[i] >= here) 
		     { scroll = collection.get(i-1); break; }
        }
        if (scroll) {
            $.scrollTo(scroll, {
                duration: 750
            });
        }
        return false;
    }
    $("#next,#prev").click(function() {
        return scroll($(this).attr('id'));
    });
    $(".scrolltoanchor").click(function() {
        $.scrollTo($($(this).attr("href")), {
            duration: 750
        });
        return false;
    });
});

post는 콘텐츠내용의 클래스이다

#next,#prev는 아이디로, scrolltoanchor는 클릭시 href에서 지정해준주소로 가게 지정한것을 보여준다.


마지막으로 꾸미기. CSS는 알아서 꾸미자 예제는 CSS3를 사용해서 둥근모서리를 보여준다.


body {
	background: #ededed;
	width: 800px;
	margin: 40px auto 100px;
}
ul,li{list-style : none; }
a {
	color: #66F;
	text-decoration: none;
	outline: none;
}
.post {
	height: 600px;
	margin: 20px 0;
	padding: 5px 20px;
	background: #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
#comments {
	height: 1000px;
	margin: 20px 0;
	padding: 5px 20px;
	background: #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
#reply {
	height: 600px;
	margin: 20px 0;
	padding: 5px 20px;
	background: #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
#nav-dock {
	position: fixed;
	right: 15px;
	top: 35%;
}
#nav-dock a {
	display: block;
	padding: 3px 10px;
	margin: 3px 0;
	background: #666;
	color: #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
#nav-dock a:hover {
	background: #000;
}
#nav-dock #next {
	margin-bottom: 10px;
}

저작자 표시
신고

설정

트랙백

댓글

jQuery 컨퍼런스 샌프란시스코에서 열린다.

jQuery 2010.04.14 15:55

2010 jQuery 컨퍼런스

jQuery 컨퍼런스가 샌프란시스코에서 려린다 기간은 4월 24~25일

링크는 http://events.jquery.org/2010/sf-bay-area/


 

 



돈많거나 갈수있는분은 가보시길 ㅎㅎ


저작자 표시
신고

설정

트랙백

댓글

jquery 플러그인 다단네비게이션 심플

jQuery/jQuery플러그인 2010.04.02 13:48

jquery 플러그인 다단네비게이션


출처는

http://apycom.com/menus/8-white-smoke.html
여기서 색깔에따라원하는것을 받을 수 있다

다좋지만 문제는 span남발이며 jquery의 특성인 옵션 부가기능이 없다.그냥 단순하게 사용하고싶은이에게 추천

저작자 표시
신고

설정

트랙백

댓글

jQuery 다단 네비게이션 플러그인

jQuery/jQuery플러그인 2010.04.01 16:20

jQuery 다단 네비게이션 플러그인

다단 네비게이션을 jQuery를 통해 쉽게 만들어보자 목표는 흔히보는 아래 그림과 같은 네비게이션을 구해볼것이다.

출처는http://plugins.jquery.com/project/jfastmenu

기본 html

메인메뉴는 5개로나누어진다.홈,그림,음악,방명록,잡다이것을 리스트로 코딩하자

  • 그림
  • 음악
  • 방명록
  • 잡다

세분화한 카테고리로 그림안에 일반,디자인,미술가를 더 넣을것이다.또 거기에 좀더 넣어 다단계로 만든다.아래와같은 결과.

소스는 다음과 같다.


jquery로 작동 시키기

이제 플러그인의 기능을 이용하여 작동시켜보자. CSS꾸밈없이 작동여부만 확인한다.사용방법은 플러그인이라서 간단하다.


내용에 위와같은 아이디를 지정해주고 아래와 같이 사용

$(document).ready(function(){
	$.jFastMenu("#menu");
   });

CSS로 꾸미기

css에서 중요한것은 별반없다. 네비게이션의 색깔, 호버시 색깔,이 정도는 잘알것이다.중요한것은 다단계 레이아웃이므로 호버 전 기본 초기값으로 하위 네비게이션(예제 같은경우 일반,디자인,미술가등등)을 display :none으로 감춰주는것이다.나머지는 꾸밈으로 사용자가 원하는데로.

#menu{
	font-family:tahoma, verdana, arial;
	font-size:11px;
}
#menu ul{
	list-style:none;
	margin:0px;
	padding:0px;
}
#menu ul li{
	float:left;
	margin:0px;
	padding:0px;
	position:relative;
}
#menu ul li a{
	background-color:#EFEFEF;
	color:#000;
	display:block;
	margin:0px;
	padding:10px;
	text-decoration:none;
}
#menu ul li a:hover{
	background-color:#E9E9E9;
	color:#000;
}
#menu ul li ul{
	position:absolute;
	display:none;
    /*일반,디자인,미술가를 초기값으로 보이지않게한다.*/
}
#menu ul li ul li{
	clear:left;
}
#menu ul li ul li a{
	text-decoration:none;
	width:120px;
}
#menu ul li ul li ul{
	clear:left;
	display:none;
    /*디자인,미술가의 하위네비를 감춘다.*/
	left:140px;
	/* Bengin CSS-HACK, for Microsoft Internet Explorer */
	_left:120px;
	/* End CSS-HACK */
	position:absolute;
	top:0px;
}

마지막으로 살필것은 IE핵

완성된 예제를 보려면 여기로http://sianasiatiger.cafe24.com/study/JP_fastnav.html

저작자 표시
신고

설정

트랙백

댓글

jQuery 이미지 슬라이드 플러그인

jQuery/jQuery플러그인 2010.03.30 15:31

jQuery 이미지 슬라이드 플러그인

이 플러그인은 가운데 그림을 클릭시 확대 그리고 양쪽그림을 클릭시 다음그림을 슬라이방식으로 보여준다,

다운은 여기서 http://plugins.jquery.com/files/jquery.slidingGallery-1.1.js.txt

먼저 html 부터 보자


스크립트는
        $(function() {
            $('div.gallery img').slidingGallery();
        });

확인은 아래링크에서

http://sianasiatiger.cafe24.com/study/JP_slidgall.html


저작자 표시
신고

설정

트랙백

댓글

jQuery 1.4 변경점

jQuery/DOM&jQuery 2010.03.17 21:33

jQuery 1.4 변경점

지난 1월달에 jquery 1.4가 나왔다. 변화된점을 요약.

참고한 출처는 여기다http://firejune.com/1527.자세히 설명되있으므로 참조

collection방식

프로그램밍을 해본 이들이라면 c언어를 접해봤을 것이고 클래스(class)에 대해 알것이다.집합된 객체(object)에 변수 함수등을 설정해준다. 이번에 나온 jquery 1.4도 이와 비슷하게 지원된다.

먼저 종전에 사용한 방법을 보자 아래의 html에서 아이디(id), css, 실행함수를 나오도록 해보자

jquery 1.4

그리고 종전의 방식으로 여기에 추가해보자

$('a').attr('id', 'new')
      .css({'color':'#fcc','font-size':'28px' })
      .click(function() { 실행될함수});

아이디를 부여했고 css로 꾸미고 실행될함수를 지정해준것이다. jquery의 편리한점은 언제든지 필요한것을 순서대로 붙이면 된다는 점이였으나 그것이 과할 경우에 혼란을 줄수있다. 이번에 지원된 변경되모습을 보자.

$('a',{
   id: new,
   css: {'color':'#fcc','font-size':'28px'
   }
   click : function() { 실행될함수})
  }); 

어떻게 보면 복잡할 수도 있지만. 많은것을 부할경우 상호간의 개발자들이 알아보기 쉬울것이다.

이벤트 역시 마찬가지

이벤트역시 위와같은 방식처럼 일괄적으로 적용될수있도록 지원한다.

$('a'.bind({
    click: function() {
    //클릭시 실행될함수
     },
    mouseover: function() {
    //마우스 오버시 실행될함수
     },
    mouseout: function() {
    //마우스 아웃시 실행될함수
   }
})

새로추가된 focusIn, focusOut 이벤트

기존의 focus이벤트에서 부분적으로 수행할수 있도록 분리된 focusIn, focusOut이벤트가 추가되었다.

.live()메소드에 추가된 속성

네가지 "submit", "change", "focus" "blur" 속성이추가되었다.또한 .live( eventType, eventData, handler ) 형식으로 eventData옵션이 추가되었다..live()메소드에 대해 알고싶으면 이 포스팅을 참고

live메소드

nextUntil, prevUntil, parentsUntil메소드

  • Apple
  • Banana
  • Grape
  • Strawberry
  • Pear
  • Peach

위의 리스트에는 여러 과일이 있다. 이중 until 이란 말뜻대로 ~까지 선택하는것

nextUntil

선택한것에서~까지

$('ul li:contains(Apple)').nextUntil(':contains(Pear)');

prevUntil

반대로 이것은 뒤에서 ~까지

$('ul li:contains(Pear)').nextUntil(':contains(Apple)');

parentsUntil

말그대로 부모엘리먼트 까지이다

요소 풀기(Unwrap)

.wrap()메소드는 감싸는역할을 했다 반대로 이것은 풀어서 감싸고있는것을 제거시킨다.

날 감싸는걸 제거시켜주세요

위에서 div엘리먼트를 제거시켜보자

$('p').unwrap();

unwrap()여기 괄호를 비워둔것은 옵션이다.

데이터를 유지한 상태로 요소 제거하기

새로운 .detach()메서드는 DOM에서 요소를 제거한다. 중요한점은 해당 요소가 가진 데이터 요소를 파괴하지 않는다는 것. 이 데이터는 jQuery의 이벤트 시스템에 보존되어있기 때문에 .data()메서드 등을 그대로 사용하여 다시금 호출할 수있다.

주의~

jQuery 1.4는 기반을 뒤업는 업데이트를 포함하고 있기 때문에 1.3.x에서 작동하던 코드가 비정상 적으로 작동할 수 있다. John Resi는 이와 관련하여 하위 호환성을 유지하기 위한 jquery-compat-1.3 플러그인을 별도로 배포하고 있으니 참조.http://github.com/jquery/jquery-compat-1.3

  
 
저작자 표시
신고

설정

트랙백

댓글

jquery .live()메소드

jQuery/jQuery메소드 2010.03.17 20:18

jquery .live()메소드

live란 말뜻대로 살아있는 이벤트 핸들러이다.....

현재 있지않은 엘리먼트에 이벤트를 줄수있다.

나를누르면~

위와 같은 html에 아래와 같은 소스

$("p").live("click", function(){
      $(this)
      .after("

새문장이뜨네요 또 누르면

"); });

클릭하면 아래 문장이뜨고 또 그걸 클릭하면 또 문장이 뜰것이다

http://api.jquery.com/live/

위링크에 가서 demo를 보며 확인할 수 있다.

저작자 표시
신고

설정

트랙백

댓글

입력 검색 폼(form) 꾸미기

jQuery/DOM&jQuery 2010.02.22 13:41

간단한 검색 폼

간단한폼을 만들어보고 jQuery를 이용하여 label의 텍스트가 검색폼에 들어가게하여 라인을 줄여볼것이다.


css에서 label을 블럭 엘리먼트로 변경해준다.

label{ display:block;}

그러면 흔히 볼수있는 다음과 같이모습을 볼수있을것이다.

한라인 줄이기

위의 결과물은 label엘리먼트가 한블럭 차지하여 혹시사이트가 작은공간을 요구할때 불편사항을 줄수도있다.따라서 css변화를 주어 겹치게할것이다.

var $search = $('#search').addClass('overlabel');

html에서 클래스를 그냥주지않고 위와같이 jQuery를이용한것은 후에 별도로 같은 구문을 사용할 필요가있기에 변수로 지정해준것이다.그리고 css는 다음과 같다.

.overlabel{ position: relative;}
.overlabel label{ 
position:absolute;
top:1px; left:3px;
cursor:text;}

원하는 결과가 나올것이다.하지만 다음과 같은 문제점이 발생한다.

  • label의 텍스트"입력하시오"와 사용자가 입력할 텍스트가 겹치게된다
  • label이 검색필드위에있기에 브라우저에 따라 마우스만으로 입력필드에 이동할 수 없을 경우도있다.

문제점해결

첫번째 문제를 위해 필드에 포커스가 올 때 감춰줄 필요가 있다

$(document).ready(function() {
  var $search = $('#search').addClass('overlabel');
  var $searchInput = $search.find('input');
  var $searchLabel = $search.find('label');
  $searchInput
  .focus(function() {
  //포커스되면
    $searchLabel.hide();
    //보여준다
  })
  .blur(function() {
    if (this.value == '') {
      $searchLabel.show();
     }  }); });

각 엘리먼트를 변수로 지정해 주었고 input엘리먼트에 텍스트를 입력할 경우 원래 텍스트를 감추고 반대로 떠나면 다시 보여주게 하고있다. 다음에는 레이블을 클릭시 이벤트를 발생할 수 있도록 하는 것이다.

$searchLabel.click(function() {
  $searchInput.trigger('focus');

마무리

거의 다되었지만 하나남은것이있다. 위와같이할 경우 페이지를 새로고침하면 입력하던 텍스트값이 남아있도록할 필요가있다.

if ($searchInput.val()) {
//입력한 값이 남아 있다면
    $searchLabel.hide();
  }

만약반대로 새로고침 할 경우 "입력하세요"가 나오게 하려면 null값을 주면 된다

if ($searchInput.val()) {
    $searchInput.val(null);
  }

이로서 완성. 완성된 페이지를 보려면 여기로 http://sianasiatiger.cafe24.com/study/F_searchform.html

저작자 표시
신고

설정

트랙백

댓글

jquery text() 메소드

jQuery/jQuery메소드 2010.02.20 14:39

jquery text() 메소드

.text() 메소드는 주요기능으로 텍스트값을 반환하는역할을 한다.

alert( $('p').text() );

html은

나를 출력하시오

기본적으로 엘레먼트의 텍스트를 반환하여 출력하게 되어있다.

  1. $('p') : p라는 엘리먼트에 접근한다
  2. .text() : 그엘리번트의 텍스트 값을 찾느다.
  3. alert : 경고창으로 뜨도록

위와 같이 하면은 경고창에'나를 출력하시오' 라고 나올 것이다.이번에는 괄호안에 값을 넣었을 경우를 보자

$('p').text('나를 출력');

html은

나 말고...

값이 대체 되기도 한다. 화면에는 원래나와야되는 '나말고...' 대신 '나를 출력'이 나타날것이다.정확히 말하면 대체 되는 것이 아니라 덮어지는 것이다.

저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바