2013-01-03 1 views
2

내 새로운 Drupal 7 웹 사이트의 사이트 이름에 Lettering.js를 사용하려고합니다. 여기까지 내가 지금까지 한 일이있다 :Lettering.js를 사이트 이름에 Drupal 7과 함께 사용하는 방법?

  1. 나는 Github에서 파일을 다운로드하여 내 테마 안에있는 scripts라는 폴더에 넣었다. (그래서이 /sites/all/themes/MyThemeName/scripts/jquery.lettering.js)

  2. 다음이 구문을 사용하여 내 테마 정보 파일에 스크립트를 추가했습니다. "scripts [] = scripts/jquery. lettering.js ". 페이지 원본을 볼 때 스크립트가로드되고 있음을 알 수 있습니다.

내가 문제가되는 부분은이를 호출하는 방법입니다. 나는 http://drupal.org/node/171213에서 설명서를 읽고 있었지만 여전히 혼란 스럽다. template.php에 전화를 걸어야하고 $ site_name을 사용하여 사이트 내의 사이트 이름에 액세스 할 수 있다고 가정합니다. 그러나 사이트에서 이동할 위치가 확실하지 않습니다.

조언을 제공 할 수있는 사람 덕분입니다.

답변

0

전체 lettering.js는 텍스트를 스팬으로 분할하는 것입니다. 경우

$chars = str_split($site_name); 
$letter_site_name = ""; 
for($i=0,$count=count($chars);$i<$count;$i++) { 
    $letter_site_name = '<span class="char' . ($i+1) . '">' . $chars[$i] . '</span>'; 
} 

: https://github.com/davatron5000/Lettering.js/blob/master/jquery.lettering.js

이 쉽게 PHP를 사용하여 전처리 기능 또는 템플릿에서 수행 할 수 있습니다

<p>Hey</p> 

<p><span class="char1">H</span><span class="char2">e</span><span class="char3">y</span></p> 

세부 사항에 대한 소스 코드를 참조하십시오되다 당신은 lettering.js를 사용하고 싶습니다. 어쨌든 추가 자바 스크립트를 작성해야합니다. 이 스크립트는 클래스 제목이있는 모든 헤드 라인에서 letteringjs를 실행할 수있는 Drupal 동작을 정의해야합니다.

(function ($) { 
    Drupal.behaviors.headline_lettering = { 
    attach:function (context, settings) { 
     $("h1.lettering:not(.lettering-attached)", context) 
     .addClass('lettering-attached') 
     .lettering(); 
    } 
    } 
})(jQuery); 
0

이전 대답을 확장하십시오. 내가 한

<script> 
(function ($) { 
    Drupal.behaviors.headline_lettering = { 
    attach:function (context, settings) { 
     $(".lettering:not(.lettering-attached)", context) 
     .addClass('lettering-attached') 
     .lettering(); 
    } 
    } 
})(jQuery); 
</script> 
로 page.tpl.php하는

drupal_add_js($path_to_theme . '/scripts/jquery.lettering-0.6.1.min.js'); 

그리고 추가 할 수 있습니다 위에서 언급 한 추가 스크립트를

자바 스크립트는 template.php에서 drupal_add_js()를 사용하여 추가 할 수 있습니다 스크립트에 .h1을 추가하지 말고 모든 텍스트에 "레터링"클래스를 추가하면 레터링이 적용됩니다.

그런 다음 Kern.js을 사용하여 각 문자의 위치를 ​​조정할 수 있습니다. 그것은 페이지에 포함되어야하는 CSS를 생산합니다.

관련 문제