[Jquery] Wallpaer Master 플러그인 사용하기

Jquery 플러그인 중 하나인 Wallpaper Master 은 HTML 엘리먼트의 배경을 조금 더 멋지게 만들 수 있게 해주는 플러그인이다.

링크한 데모를 확인하면 조금 더 직관적으로 이해하기 쉬울 것이다.

예를 들어 DIV 배경에 동영상을 재생시킬 수 있고, 심지어 유투브 영상도 재생 시킬 수 있다.

링크한 페이지에서 플러그인을 다운받자. 압축을 해제하면 여러 파일이 나오는데, jquery.fs.wallpaper.css 파일과 jquery.fs.wallpaper.js 파일만 있으면 된다. (Jquery 는 언급이 없어도 당연히 필요하다.) 이 파일들을 html 문서에 추가해주자. (script와 link 태그를 사용하는것은 당연하다.)

<script>
	$(document).ready(function() {
		$(".wallpapered").not(".defer").wallpaper();
		$(".wallpapered.defer").wallpaper();
	});
</script>
해당 스크립트를 추가해주자. 이 스크립트를 추가함으로서 Class가 wallpapered 인 엘리먼트가 특수한 배경화면이 될 준비가 된다.

이제 적용할 엘리먼트를 준비하자. 여기서는 DIV 엘리먼트에 적용해 볼 예정이다. 유투브 영상을 재생 시켜 보자.

<div class="wallpapered bar" data-wallpaper-options='{"source":{"video":"//www.youtube.com/watch?v=cUO9gvGy9Ck"}}' style="height:500px;"> </div>

data-wallpaper-options 에 띄울 방법 (이미지/영상), 미디어 주소 등의 정보를 JSON방식으로 넣어줄 수 있다.

일반적인 사진이나 영상 띄우는 방법은 그냥 데모를 보면서 따라해보자. 가장 핵심(?) 적인 유투브 영상 띄우기만 다룰 것 이다.

1

유투브 타이틀 이미지가 잠깐 뜨면서 (로딩중인것 같다) 본 영상이 성공적으로 재생되는 모습을 확인 할 수 있다.

You may also like...