조회 수 145 댓글 18

프론트엔드 책을보고 공부하다가... 좋은기능이다 싶어서 XE에 써보려니까 안되네요 ㅎㅎ... body에 쓰여있어서 새로 DIV 만들고 거기다 했는데 일반 html만들어서하는데 XE는 영... 좀 어렵네요 ㅜㅠ

 

구글링하니 애드온밖에안보이고 ㅎ..

 

캡처.PNG

 

 

접속하면..아래와같이... js 와 css 는 제대로 적용되었습니다.. 혹시모르니 js 와 css 첨부해두겠습니다

 

캡처2.PNG

 

 

<load target="vegas.min.js" />
<load target="vegas.min.css" />
<style>
    html,body{width: 100%; height: 100%; padding: 0px; margin: 0px;}
    #content{width: 800px; height: 800px;}
</style>

        
 
<div id="content">
            <h1>Fullscreen Background Image</h1>    
            <p><strong><a href="http://vegas.jaysalvat.com/">Veagas.js</a></strong>플러그인을 이용한<br>풀스크린 배경 이미지.</p>
</div>
<script>
jQuery(function(){
    jQuery('#content').vegas({
    slides:[
    {src:'bg4.png'},
    {src:'bg5.jpg'}
        ],
    delay:3500
    });            
    });
</script>        

 

  • profile
    람보 2016.06.18 22:29:11
    베가스는 하나의 요소에만 적용이 안됩니다.
    body에 적용되니, 제이쿼리형태로#content에 적용했던 내역을 없애고 적용해보세요.
    jQuery(function($){
    $.vegas('slideshow', {
    delay:5000,
    블라블라~
  • profile
    네비 2016.06.19 09:32:28 Files첨부 (2)

    감사합니다 엘러먼트를 쓰지않고는 잘작동되는걸 확인했습니다! (아마도 경로가 문제였던것같습니다 layout_info에서 뽑아오니 잘작동했습니다 ㅎㅎ;; ) 그런데 특정 엘러먼트에서 작동하려니 Console 창에 에러가 뜨네요ㅜㅜ

     

    $('#tests,body').  요렇게해도 동일합니다..

     

    테스트 링크:  http://fs.gonetis.com/test/

     

    레이아웃 파일도 첨부해두었습니다 ㅜㅜ

     

    *** 소스 ***

    <load target="js/jquery.vegas.min.js" />

    <div id="tests">
        
    </div>

    <script>
      jQuery(function($){
        $('#tests').vegas('slideshow', {
          delay:3000,
          backgrounds:[
            { src:'{$layout_info->background_image1}', fade:3000 },
            { src:'{$layout_info->background_image2}', fade:3000 },
            { src:'{$layout_info->background_image3}', fade:3000 }
          ]
        })
      });

    </script>

    {$content}

     

     

    콘솔 오류사진

    캡처.PNG

     

     

     

  • profile
    휘즈 2016.06.18 23:04:43
    http://mobile.phiz.kr/index.php?mid=main03&m=1

    jQuery("#content,body").vegas({

    ...
  • profile
    람보 2016.06.18 23:10:43
    음.. 그럼 사이트를 열어주지 않고서는 문제가 먼지 구분할 수 없을듯 해요. ㅋㅋ
  • profile
    휘즈 2016.06.18 23:14:23
    특정 엘러먼트에 적용할 때에는 $("#element, body").vegas ({})
    이렇게 적는다는 설명입니다.^^;
  • profile
    휘즈 2016.06.18 23:17:20
    메뉴를 클릭해보면 body가 아니라 특정 div에 적용된 것을 보실 수 있습니다.
  • profile
    휘즈 2016.06.18 23:32:34
    $("#element").vegas ({}) 이렇게 해도 되는 건데 본문 코드는 왜 안되지?
  • profile
    휘즈 2016.06.18 23:37:30
    이미지 경로 맞나요?
  • profile
    네비 2016.06.19 09:36:06
    감사합니다 ㅜㅠ 엘러먼트 적용하지않고는 잘작동합니다! 아마도 경로문제였던것같습니다 그런데 .. 엘러먼트를 적용하니 안되네요 ... 람보님 댓글밑에 상세상황 달았습니다 ㅜㅜ
  • profile
    휘즈 2016.06.19 09:42:47
    $('#tests') 를 jQuery('#tests') 로 바꾸어 보세요.
    jQuery(function($){})로 감싸지 않아도 됩니다.
  • profile
    네비 2016.06.19 09:59:21 Files첨부 (1)

    <load target="js/jquery.vegas.min.js" />

    <div id="tests">
        
    </div>

    <script>
        jQuery('#tests').vegas('slideshow', {
          delay:3000,
          backgrounds:[
            { src:'{$layout_info->background_image1}', fade:3000 },
            { src:'{$layout_info->background_image2}', fade:3000 },
            { src:'{$layout_info->background_image3}', fade:3000 }
          ]
        });

    </script>

    {$content}

     

    로 하였는데 똑같은현상입니다..음

     

    콘솔에러 

    캡처.PNG

     

    엘러먼트 빼면 잘되는데.. 왜 안되는거지 ㅜㅠ

     

  • profile
    proto 2016.06.19 10:24:28
    <load target="js/jquery.vegas.min.js" type="body" />
    <div id="tests">

    </div>
    <script>
    jQuery(document).on('ready', function() {
    jQuery('#tests').vegas('slideshow', {
    delay:3000,
    backgrounds:[
    { src:'{$layout_info->background_image1}', fade:3000 },
    { src:'{$layout_info->background_image2}', fade:3000 },
    { src:'{$layout_info->background_image3}', fade:3000 }
    ]
    });
    });
    </script>

    이렇게 한번 해보심이
  • profile
    네비 2016.06.19 10:31:14 Files첨부 (2)

    캡처.PNG

     

    라고뜨며 백지로되네요.. 흠.. 저만 안되는건가요 ?ㅜㅠ

     

     

    뭘하든 저기서 매번오류가발생하는데...

    캡처.PNG

     

  • profile
    proto 2016.06.19 10:52:35
    js/jquery.vegas.min.js

    경로안에 파일이 잘 있는지 확인해보세요..

    플러그인을 못 불러오고 있는지도 모르겠네요.

    아니면 메소드 사용이 잘못되진 않았는지 보세요.

    slideshow 같은 것들 그냥 지우고 해보신다거나..
  • profile
    네비 2016.06.19 11:05:43
    헉 만지작 거리다가 됐습니다

    <load target="js/vegas.min.js" /> 로 불러오면 못읽는 문제가있네요... XE 코어의 문제인가 모르겠습니다.. 버전은 최신버전사용중입니다

    <script src="js/vegas.min.js"></script> 로 하니 정상작동됩니다.... 후... 참 간단한 문제에 스트레스를 ㅜㅠ 모두들 감사드립니다!!!
  • profile
    YJSoft 2016.06.19 14:43:01

    <load target="js/common.js" />와 같이 사용시 템플릿 파일이 위치한 경로 기준 파일을 불러옵니다. 예를 들어 레이아웃 파일이라면 /layouts/레이아웃폴더/js/common.js 파일이 불러와집니다.

    반면 <script src="js/common.js"></script> 경우 브라우저의 현재 경로 기준으로 파일을 불러옵니다.
    예를 들어 현재 주소가 https://www.xetown.com/qna/305802 라면 https://www.xetown.com/qna/js/common.js 파일이 불러와지게 됩니다. 이 때문에 XE로 만든 사이트 소스코드를 보시면 모든 CSS/JS 파일 맨 앞에 /가 있는 것을 확인하실수 있습니다.(이렇게 /가 맨 앞에 있다면 최상위 기준으로 불러오기에 https://www.xetown.com/js/common.js 파일이 로드됩니다)

    즉 못 읽는 것이 아니라 경로 지정을 잘못 하신것일 수도 있습니다.

  • profile
    네비 2016.06.19 18:25:45
    그렇군요 감사합니다 ㅎ
  • profile
    네비 2016.06.19 11:09:34
    혹시몰라...

    서버환경을

    XE : 1.8.21
    host : http://127.0.0.1/
    app : Apache/2.4.17 (Win64) PHP/7.0.7
    xe_version : 1.8.21
    php : 7.0.7
    MariaDB : 10.1.9
    phpmyadmin : 4.6.2

    입니다

    기본 포함된 레이아웃은 안깨지는거보니 <load> 태그가 베가스js 만 못읽는것일지도 모르겠습니다...흡

서버에 요청 중입니다. 잠시만 기다려 주십시오...