Drupal 7にSupersized.jsを実装するのに役立ちます
私は Supersized.js を私のDrupal 7サイトに追加しようとしています。最新バージョンのjQueryを使用するためにDrupalを更新しました、scripts [] = js/supersized.3.1.3.min.jsを.infoファイルに追加し、html.tpl.phpファイルに追加しました：
<script type="text/javascript">
(function($){
alert('test');
$.supersized({
alert('test2');
//Functionality
slideshow : 1, //Slideshow on/off
autoplay : 1, //Slideshow starts playing automatically
start_slide : 1, //Start slide (0 is random)
random : 0, //Randomize slide order (Ignores start slide)
slide_interval : 3000, //Length between transitions
transition : 1, //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 500, //Speed of transition
new_window : 1, //Image links open in new window/tab
pause_hover : 0, //Pause slideshow on hover
keyboard_nav : 1, //Keyboard navigation on/off
performance : 1, //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 1, //Disables image dragging and right click with Javascript
image_path : 'img/', //Default image path
//Size & Position
min_width : 0, //Min width allowed (in pixels)
min_height : 0, //Min height allowed (in pixels)
vertical_center : 1, //Vertically center background
horizontal_center : 1, //Horizontally center background
fit_portrait : 1, //Portrait images will not exceed browser height
fit_landscape : 0, //Landscape images will not exceed browser width
//Components
navigation : 1, //Slideshow controls on/off
thumbnail_navigation : 1, //Thumbnail navigation
slide_counter : 1, //Display slide numbers
slide_captions : 1, //Slide caption (Pull from "title" in slides array)
slides : [ //Slideshow Images
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/quietchaos-kitty.jpg', title : 'Quiet Chaos by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/wanderers-kitty.jpg', title : 'Wanderers by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/Apple-kitty.jpg', title : 'Applewood by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'}
]
});
})(jQuery);
</script>
ここで行き詰まっています。 Drupal、Javascript、jQueryの経験はあまりありません。
ラッパーへのボブの変更を含むように編集されました。
ここにはいくつかの問題があります。
Drupalスクリプトに含まれていないhtml.tpl.phpにスクリプトを追加するためのベストプラクティス
そうは言っても、それを行うには2つの方法があります。 （a）テーマの.infoファイルに追加して、そこから.jsファイルスクリプト（つまり、「scripts.js」）を呼び出すことができます。テーマフォルダー、理想的には、このサイト全体が必要な場合は「js」または「scripts」サブフォルダー内（b）不要な場合サイト全体で使用するか、テーマのtemplate.phpファイルでdrupal_add_jsを使用して呼び出し、特定のページ/パスのみをターゲットにすることができます
JavaScriptの呼び出し方法 Drupal 7）で変更されました
主な新しいことは次のようなものを含めることです：
(function ($) {
//needed for drupal 7
Drupal.behaviors.myTheme = {
attach: function(context, settings) {
// end drupal 7 syntax
...スクリプトの上部。
したがって、クリーンバージョンは次のように機能します。
(function ($) {
//needed for drupal 7
Drupal.behaviors.myTheme = {
attach: function(context, settings) {
// end dtupal 7 syntax
$.supersized({
//Functionality
slideshow : 1, //Slideshow on/off
autoplay : 1, //Slideshow starts playing automatically
start_slide : 1, //Start slide (0 is random)
random : 0, //Randomize slide order (Ignores start slide)
slide_interval : 3000, //Length between transitions
transition : 1, //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 500, //Speed of transition
new_window : 1, //Image links open in new window/tab
pause_hover : 0, //Pause slideshow on hover
keyboard_nav : 1, //Keyboard navigation on/off
performance : 1, //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 1, //Disables image dragging and right click with Javascript
image_path : 'img/', //Default image path
//Size & Position
min_width : 0, //Min width allowed (in pixels)
min_height : 0, //Min height allowed (in pixels)
vertical_center : 1, //Vertically center background
horizontal_center : 1, //Horizontally center background
fit_portrait : 1, //Portrait images will not exceed browser height
fit_landscape : 0, //Landscape images will not exceed browser width
//Components
navigation : 1, //Slideshow controls on/off
thumbnail_navigation : 1, //Thumbnail navigation
slide_counter : 1, //Display slide numbers
slide_captions : 1, //Slide caption (Pull from "title" in slides array)
slides : [ //Slideshow Images
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/quietchaos-kitty.jpg', title : 'Quiet Chaos by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/wanderers-kitty.jpg', title : 'Wanderers by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/Apple-kitty.jpg', title : 'Applewood by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'}
]
});
//ending drupal 7 specific calls / syntax
}};
}) (jQuery);
ブラウザでページソースを表示して、スクリプトが正しく読み込まれていることを確認しましたか？そうでない場合は、ファイルがサーバーのどこにあるのか、infoファイルがどこを指しているのかを調査できます。
もしIS正しくロードされているなら、それはクライアント側の何かだと思います。それがフロントページ、または特定のページで起こっているだけなら、front--page.tpl.php/node- -.tpl.php/etcとコードをそこに配置します。
クライアント側の場合は、HTMLのみを使用する作業用コピーを作成/検索し、そこからコードを1つずつ転送することも有効です。これにより、少なくとも確認用の作業用コピーを作成できます。
これにはいくつかのトラブルシューティングとJavaScriptの一般的な実用的な知識が必要ですが、私自身のサイトでjQuery画像ギャラリーを取得するのと同様の問題があり、試行錯誤の後に解決したと言います。
編集
私はあなたのコードでラッパーが気付いたばかりです：
(function($){
//code
}(jQuery));
これを次のように変更する必要があります。
(function($){
// code
})(jQuery);
申し訳ありませんが、以前は気づかなかったのですが、これがおそらくアラートが機能しない理由です。
Supersized.jsに付属するすべてのCSSおよびJavaScriptファイルを含めましたか？
コードを見ると、スーパーサイズの呼び出し内にalert('test2');があるようです。それは削除する必要があります。また、特大の呼び出しでは、「image_path」と呼ばれるオプションがありますが、これは特大のプラグインでは使用できないオプションのようです。それを削除してみてください。
plugin も現在のリリースである3.2.6に更新します。