jquery 플러그인 제작 사진 갤러리 gallery_jquery

(함수($) {
$.fn.gallery = function () {
return this.each(function () {
var self = $(this);
self.click(function () {

});
　});
　}
})(jQuery)

text/javascript " src="Scripts/jquery-1.6.2.js">


🎜>< ;img src="Images/orderedList2.png" alt="" />

;
　


이제 이미지를 클릭할 때 이미지 확대 효과를 얻는 방법을 고려하기 시작합니다. 사실 우리가 표시하는 확대된 사진은 원본 사진이 아니고 새로운 사진을 복제해서 페이지에 추가해서 표시하는 것입니다. 또한 페이지의 높이와 너비, 이미지의 높이와 너비, 스크롤 막대의 위치를 ​​계산하여 큰 이미지의 중앙 정렬을 수행합니다. 아래 개선된 코드를 살펴보겠습니다.

//프로그램 오류를 방지하려면 이 변수를 self에 저장하세요.
//이유에 대해서는 이전 장에서 상위 함수와 하위 함수에서 this로 표현되는 객체가 다르다고 간략히 언급했습니다.
var self = $(this)//의 높이를 설정합니다. 작은 그림 ~ 100 (개인 필요에 따라 조정 또는 옵션 제공 가능)
self.height(100)

//클릭 이벤트 추가
self.click(function () {
//myImgGallery라는 ID를 제거합니다. 개체는 사실 이 개체가 큰 이미지 개체입니다
//클릭할 때마다 마지막 클릭으로 생성된 큰 이미지를 제거해야 합니다
$('# myImgGallery').remove();

self.clone() //jquery의 복제 메서드, 복제 이미지
.attr('id', 'myImgGallery')//id를 myImgGallery로 설정
.height($(window).height () / 2)//이미지 높이를 페이지의 사용 가능한 영역 높이의 절반으로 설정합니다(필요에 따라 다른 값으로 설정할 수도 있습니다)
.css({
위치: 'absolute'
})
.prependTo('body')//body 객체에 큰 이미지 추가
//중앙 플러그 사용- 이미지를 중앙에 배치하기 위해 생성한
//주의하세요. 복제 객체를 추가해야 합니다. center 메서드는 본문 뒤에서만 호출할 수 있습니다. 그렇지 않으면 복제 객체의 너비와 높이가 모두 0입니다.
.center ()
.click(function () {//대형 이미지 클릭 이벤트 추가
$(this).remove(); //대형 이미지 클릭 시 자체 삭제
}) ;
});
});
$.fn.center = function () {
return this.each(function () {
$(this) .css({
//위에 뜨도록 절대 위치 설정(필요한 경우 zindex 속성을 설정할 수 있음)
position: 'absolute',
//세로 가운데 정렬 설정
상단: ($(window).height() - $(this).height()) / 2 $(window).scrollTop( ) 'px',
//가로 가운데 정렬 설정
왼쪽: ( $(window).width() - $(this).width()) / 2 $(window).scrollLeft() 'px'
})
}); >})(jQuery);


자, 오늘 내용은 여기까지입니다.

데모 다운로드 주소:
jQuery.plugin.gallery