크롬80버전 결제 이슈, 영카트5 주요패치 확인!

PC 반응형 음악플레이어(모바일 호환) > 그누보드5 스킨

그누보드5
영카트5
매뉴얼
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티

그누보드5 스킨

스킨 다운로드시 좋아요 클릭과 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y

PC 반응형 음악플레이어(모바일 호환) 정보

레이아웃 PC 반응형 음악플레이어(모바일 호환)

첨부파일

첨부파일 responsive_jukebox_pl54.tar (13.8M) 7회 다운로드 2020-08-01 23:18:37 포인트 차감10
첨부파일 responsive_jukebox.tar (13.8M) 0회 다운로드 2020-08-01 23:18:37 포인트 차감10
테스트한 버전5.4
호환 가능 버전모든 php 버전에서 호환

본문

세부적인 사항은 https://sir.kr/g5_skin/38807 자료를 참고해 주세요

첫번째 첨부파일의 글자가 깨져서 보이는 분은 두번째 첨부파일로 대체하시기 바랍니다.

(첫번째파일 utf-8, 두번째파일 euc-kr 각각 인코딩입니다.)

 

미리보기: utf-8 인코딩 (php5.1 이상버전)

http://eunsolee.net/responsive_jukebox_pl54/musicplayer/player/index.php

 

미리보기: euc-kr 인코딩 (php 5.1 이하 버전, 제로보드4등...)

http://eunsolee.com/responsive_jukebox/musicplayer/player/index.php

 

mp3 파일을 사용하실때는 유튜브나 기타 공유 사이트에서

"저작권이 없는 음악, 저작권이 없는 팝송"등으로 검색하신후 mp3파일로 변환해서

사용하시기 바랍니다.  카페나 기타 자영업등을 하시는 분들의 매장에서

본인이 원하는 노래로 플레이 리스트를 만들어 사용하시면 좋을듯 해서 올립니다.

 

재생시 시작은 정지상태 입니다. 해당부분을 자동시작으로 변경하시려면

아래 경로의 스크립트를 찾아 다음과 같이수정해 주시면 됩니다.

../dist/add-on/jplayer.playlist.min.js 를 에디터 플러스와같은

편집기로 열고 Shift+F버튼(찾기)을 누르신후 autoPlay 를 검색합니다.

아래의 기본상태는 autoPlay:!1,loopOnPrevious

autoPlay:!1 입니다. 이부분을 0으로 고치시면 PC 및 모바일 접속시에도

자동으로 플레이 됩니다.

 

모바일 재생시 보여지는 플레이어와 리스트에 대한 크기 지정.

편집기로 dist/skin/blue.monday/css/jplayer.blue.monday.css 를 열고

49번과 53번줄을 수정하시면 됩니다.

(반응형 100%로 되어있으니 특수한경우외에 수정하지 마세요.)

 

.jp-video-360p {
  width: 100%; }

.jp-video-full {
  /* Rules for IE6 (full-screen) */
  width: 100%;
  height: 270px;

 

플레이어의 포스터(화면에 보이는 이미지) 크기 수정.

편집기로 musicplayer/player/index.php 를 열고

110번과 111번째 줄을 수정하시면 됩니다.

가로크기는 100% 반응형으로 되있으나 세로크기 270px는 사용하시는 분에 따라 상이할수 있으니

해당부분을 원하시는 세로 크기로 수정하시면 됩니다.

   width: "100%",
   height: "270px",

 

음악플레이어를 PC 및 모바일등에서 모두 사용하고자 하실 경우

다른이름으로 플레이어를 생성하신후 아래의 경로에서

../../dist/skin/blue.monday/css/jplayer.blue.monday.css 를

m.jplayer.blue.monday.css 등과같이 생성후 css 속성에서 폰트크기를 변경해줍니다.

편집기로 여신후 32번째 줄에 폰트 크기를 지정하는 곳이 있습니다.

33번째줄은 웹폰트등을 지정하는곳 입니다. 참고바랍니다.

  font-size: 16px;
  font-family: Verdana, Arial, sans-serif;

 

아래의 스크립트를 PC용 플레이어의 헤더에 삽입하신후

모바일접속시 보여질 모바일용 플레이어의 경로를 적어주시면 됩니다.

사용예제 입니다.

PC용 플레이어 (PC로 실행했을경우 나타남)

http://eunsolee.com/responsive_jukebox/musicplayer/player/list_01.php

mobile용 플레이어 (PC가 아닌 모바일기기에서 접속했을경우 나타남)

글자크기와 이미지 크기가 모바일 환경에 맞게 맞춰짐.

http://eunsolee.com/responsive_jukebox/musicplayer/player/m.list_01.php

 

<script language="javascript"> //Go to  Mobile Page
  // Mobile여부를 구분하기 위함
  var uAgent = navigator.userAgent.toLowerCase();
   
  // 아래는 모바일 장치들의 모바일 페이지 접속을위한 스크립트
  var mobilePhones = new Array('iphone', 'ipod', 'ipad', 'android', 'blackberry', 'windows ce','nokia', 'webos', 'opera mini', 'sonyericsson', 'opera mobi', 'iemobile');
  for (var i = 0; i < mobilePhones.length; i++)
  if (uAgent.indexOf(mobilePhones[i]) != -1)
  document.location = "m.list_01.php";
  </script>

 

추천1

댓글 전체

전체 1,831 |RSS
그누보드5 스킨 내용 검색

회원로그인

진행중 포인트경매

  1. 참여27 회 시작20.08.05 04:15 종료20.08.12 04:15

(주)에스아이알소프트 (06212) 서울시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT