간단한 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를 보며 확인할 수 있다.

저작자 표시
신고

설정

트랙백

댓글

jquery ajax 요청 절대경로 다른도메인

Ajax 2010.03.16 20:28

ajax 요청 절대경로 다른도메인

ajax 요청하기

위 포스팅에서 ajax로 요청하는 방법을 보았다. 문제는 상대경로는 문제없이 읽어들일수 잇는데. 절대경로 즉 다른 도메인이나 서비스를 제공하진 않는 사이트라면 그렇지않다. 이는 대부분의 브라우저가 페이지를 다운로드한 서버외에 다른 서버에 HTTP요청하는 것을 막고있기 때문이다. 즉 보안적으로 브라우저의 당연히 갖춰야할 조취라 할수있다.

XSS

크로스 사이트 스크립팅(Cross-Site Script)

앞서 말한 ajax요청등을 악의적으로 사용하는경우를 말한다. 예로들자면 나쁜코드가 다른사용자의 브라우저에서 수행되도록 하는공격,게시판이라든가 쿠키에 접근가능한 일이 가능해진다.요즘 거의 이런일이 없고 보안상 잘준비되있다.

절대경로, 다른도메인에서 읽기

하지만 정상적으로 사용하고싶은사람은 어떻게하면 좋을까.요즘은 자신의 서버에 올려도 절대경로를 입력하면 보안상 작동하지않는다.

 $('#test').load('http://blog.rss.naver.com/어쩌고저쩌고.xml'});

위소스는 .load함수를 이용해서 네이버의 어떤블로그의 xml을 요청하는 경우이다 하지만 실행되지않는다.이를 해결방안으로는 크게 4가지가 있다.

  • JSON
  • 상호간의 규약된약속
  • php이용
  • cURL

JSON 형식의 경우는 xss가 허용된다 하지만 결코 온전히 존해하거 업데이트되는 데이타파일을 변환한다거나 새로 JSON형식으로 작성하는일은 반갑지 않은일이다. 두번쨰로 상호간의 규약된 약속이 있을경우이다.마지막으로 드 가지 방법을 알아보자

php파일이용

자신이 사용할 서버로 콘테츠를가지고 와서 jquery로 전달하는 간단한 php소스를 만드는방법이다

 $('#test').load('tempt.php'});

위와같이 사용하는서버에 만들 파일경로를 입력하고.

header('Content-Type: text/xml');
print file_get_contents('http://blog.rss.naver.com/어쩌고저쩌고.xml');

이와같이 file_get_contents를 사용한다. 문제는이방법역시 보안상 먹히지않는 것이 요즘대부분이라는점이다. 마지막 방법을 보자

cURL

 header('Content-Type: text/xml');
   $curl = curl_init();
   curl_setopt($curl, CURLOPT_URL, 'http://blog.rss.naver.com/어쩌고저쩌고.xml');
   curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
   curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, $timeout);
   print curl_exec($curl);
   curl_close($curl);
 

이에대해선.. http://en.wikipedia.org/wiki/CURL

보안

보안이 강화된웹에서 배우기위해 간단히 테스트하기 쉽지않은 것들이다.실전에서는 거의 두번째방법인 상호 규약된 체결과 약속하에 이루어 진다. 이런방법이있고 돌아간다 는점을 이해하면 되겠다.

저작자 표시
신고

설정

트랙백

댓글

jquery ajax 요청 함수

Ajax 2010.03.15 22:03

jquery ajax 요청 함수

여러 예제를 봤겠지만 요청방식에는 다음과 같은 종류가 있다.

  • getJSON
  • get
  • post
  • ajax

위의 방식으로 요청하는 파라메터는 ajax빼고는 비슷하다

url 데이타 함수 이순서로 입력.예제를 참고하자

$.get('/stest.php', {'param':'jquery'}, function(data) { 
...});

가장간단한 방식은 load이다.

load

어떤 위치의 test.html을 불러온다면

 $('#test').load('/test.html'});

load는 가장간단한 방식니다. 데이타형식이 객체라면 post 아니면get 방식으로 불러온다. 또 차이점은 문서의 일부분을 불러올수있다는점

 $('#test').load('/test.html' #part});

위의 소스는 test.html이라는 문서의 아이디(id) part부분만을 불러올것이다.

get,getJSon,get

일부 매개변수들을 서버 상의 페이지로 전달해야 할 경우가 종종 있다. jQuery를 사용하면 이는 매우 간단하다. 필요한 메소드가 어떤 것인지에 따라서 $.post()와 $.get() 중 선택한다. 선택적 데이터 객체와 콜백 함수를 전달할 수도 있다. 아래는 데이터를 보내고 콜백을 사용하는 예제이다.

$.post('test.cgi', {
    text: 'my string',
    number: 23
}, function() {
    alert('테스트 성공요.');
});

getJSon은 json파일을 이용할때이다 별반다를바없다.

$ajax()메소드

이 메소드는 위방식을 모두 이용할 수 있다.앞서 데이타 타입, 전송방법등을 보았다면 여기선 그걸 지정해주고 요청에맞게한다. 아래예제를 보자

$.ajax({
    url: 'test.xml', //url
    type: 'GET', //post,get,등..전송방식
    dataType: 'xml',//데이타 타입
    error: function(){// 실패시 실행함수
        alert('테스트 실패요');},
    success: function(xml){// 성공시 실행 함수
     alert('테스트 성공요');
    } });

잘알다시피 ajax서버가 구현될때 가능한것이다.무작정 브라우저 듸우고 왜안되냐고 질문하기도 하는데 자기컴퓨터에 서버를구축하든지 아니면 웹에 올려서 테스트해봐야 결과가 나온다.


저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바