Drupal 7 create custom slidershow

Today I gonna show you how to install and setup the amazing views slideshow module on Drupal7.

This tutorial is now uptodate with latest modules!!!

(1) Required Modules (Version: Drupal7.0)

  1. Views (7.x-3.0-beta3)
  2. Views Slideshow (7.x-3.0-alpha1)
  3. Chaos tool suite (7.x-1.0-alpha4)
  4. Libraries (7.x-1.0)
  5. Link Field (7.x-1.0-alpha3)
  6. Token (optional) (7.x-1.0-beta1)

(2) Install the Modules

In Drupal7 you can install modules from the admin section, but I still feel this new feature doesn’t have any meaning, because we have to search for the module link in the Druapl site and then copy paste into the admin module installation area, really crazy. It would have been so good if they would have made it something like wordpress a small search feasture. Anyway I just gonna download and istall it in the old way (I still recommend this old way).

Download all the modules from Drupal site and install in the directory yoursitename/sites/all/modules.
Go to http://www.yoursitename.com/node#overlay=admin/modules and enable these modules as below;

(1) Views (2) Views UI (3) Views Slideshow (4) Views Slideshow: Cycle (5) Chaos tools (6) Link (7) Libraries (8) Token (Optional)

(3) Create Image Cache

In Drupal7 imagecache is part of core module and is named as Image styles. So let’s create two image cache from here, one for the full size slider image and other for the thumbnail image. In this tutorial I use 935×293 (pixels) dimension for the full size slider image and 210×100 (pixels) dimension for the thumbnail image. Note: These configurations csn be defered depends on your needs.

* Fullsize Slider image settings

Go to http://www.yoursitename.com/node#overlay=admin/config/media/image-styles and click on the add new style link
(1) Give an Image style name and click on create new style button
(2) On the next configuration screen select new style you want and then click add button (In this tutorial I choose resize style)
(3) On the next screen set the width and height and click on the add effect button. (The settings may vary depend on the style you choose). I set width as 935 and height as 293 pixels.

Do this same process for the thumbnail image too. (for the thumbnail image dimension, I set width as 210 and height as 100 pixels.)

(4) Create New Content Type

Let’s create a new content type, From the dashboard menu bar cick on Structure and then content types then click on the add new content type link.

(1) Give a human-readable name, I named it as Featured Slider (machiine name will be auto generated based on the human readable name)
(2) Give a brief and relevant description
(3) Submission form settings, I leave as the default settings
(4) Publishing options, I checked only published (all other settings unchecked)
(5) Display settings, I have unchecked the authour and date info.
(6) Comment settings,I set hidden (disabled)
(7) Menu settings, I leave as default settings.
(8) Click Save and add fields Button

(5) Create New Fields

Here in this example I create only two fileds, and they are image field and link field.
We will use image field for uploading our slider image and link field for creating a custom link where we want our slider to be linked.

 Image Field Settings

(1) Label: Slider Image
(2) Field: slider_image
(3) Field type: image
(4) Widget (form element): image
(5) Click Save button, and on the field settings page leave default settings and click on Save field settings button.
(6) On the image field configuration settings page you can configure as you wish.
I set this field as required, I added a file director name called slider-image so that this images will be arranged sperately from other images.
You can set the maximum upload size and resolution here, I have anabled alt and title field and finally click Save settings button.

By using same method create the link field too.

Link Field Settings

    (1) Label: Slider Link
(2) Field: slider_link
(3) Field type: link
(4) Widget (form element): link
(5) Click Save button,
For the link field configurations leave evrything to default settings.
I have re arranged the field like shown below;
 Title field
Image field
Link field
Body field (you can even remove this field if not necessary)
Manage Display
On the manage display tab you can conigure how the out put of the field to be diplayed.
I have set the link field as hidden and I have also set image label as hidden
Drupal7: manage fields

(6) Create Feature Slider Content

I have created four featured slider content for this tutorial.

(1) Click on add content link
(2) Create Featured Slider content
(3) Give a proper title name
(4) Upload slider image
(5) Give alt and title field names
(6) Give a link title and url where you want the slider to be linked
(7) Leave all othe settings as default except for the path field if yo want you can give an SEO friendly URL alias.
(8) Save the content.

Same way create more Featured Slider contents (I have created four contents)

(7) Create a New View

Now it’s time to create our new Slideshow view.
From the Dashboard menu click on the Structure and then click on the Views.

(1) Click add new view link
(2) Give view name, I have named as Featured Slider (machiine name will be auto generated)
(3) Give an apropriate view description
(4) Choose Show Content of type Featured Slider (your content type name).
(5) Uncheck Create a Pge and check Create a block
(6) Type in Block title and choose display format as “Slideshow” of “fields” items per page 5 (you can enter the number of items you want to display)
(7) Click the button “Continue & edit
Views Field Settings
First let’s add link field (link must be the first field in order to work everything properly) so click on the add icon and from the filter Groups select Content
Add Content: Link, Click “Add & configure button” in the next cofiguration window uncheck “Create a label“. “CheckExclude from display.
Click “Apply button

Next let’s add image field, so click on the add icon and from the filter Groups select content
Add Content: image field (Note: make sure you choose the image field which we crerated for this slider content type only.)
Click “Add & configure button” in the next cofiguration window uncheck “Create a label“.

Formatter: Image (if you have installed Colorbox or lightbox you can choose them here!)
Image Style: Fullsize (Choose the imagecache you have created in the above step)
Link image to: Nothing
Style Settings: Leave default settings
No result behaviour: Leave default settings
Rewrite Results: Check Output this field as a link
Link path: [view_node] (Note:Scroll dow a bit and you can see replacement patterns created by Core Token module, (if we didn’t set the link field as first we can’t see link field option here) copy only [view_node] then scroll up and paste it in the link path field.)
Click “Apply button

Finally we need one more field for the thumbnail, so let’s click on the add icon and from the filter Groups select Content
Add Content: image field (Note: make sure you choose the image field which we crerated for this slider content type only.)
Click “Add & configure button” in the next cofiguration window uncheck “Create a label” and CHECK EXCLUDE FROM DISPLAY,
Formatter: Image (if you have installed Colorbox or lightbox you can choose them here!)
Image Style: Thumbnail (Choose the imagecache you have created in the above step)
Link image to: Nothing
Style Settings: Leave default settings
No result behaviour: Leave default settings
Rewrite Results: Check Output this field as a link
Link path: [view_node] (Note:Scroll dow a bit and you can see replacement patterns created by Core Token module, (if we didn’t set the link field as first we can’t see link field option here) copy only [view_node] then scroll up and paste it in the link path field.)
Click “Apply button

Views Filters Settings

In views3 the filters are created in the beginning while we choose the content type and other settings! If you need any additional filetering you can create it here!

Views Style Settings

Click on the Format Slideshow | settigs and on the next configuratioin window set as below;
(1) List type: Unordered list
(2) Wrapper class: Leave default settings
(3) Style> Skin: deafult
(4) Slides> Slideshow type: cycle
(5) Cycle options
You need to download jQuery cycle plugin and copy jquery.cycle.all.min.js to sites/all/libraries/jquery.cycle You can find the plugin at http://malsup.com/jquery/cycle.

IN SIMPLE ENGLISH
Create a folder named “libraries” in the site/all directory and then create an another folder named “jquery.cycle” in that directory and finally copy and paste only the “jquery.cycle.all.min.js” into this directory.

(6) Transittion: Fade
(7) Action: pause on hover
(8) Internet Explorer Tweaks: default
(9) Widgets: You can choose either or both Top and Bottom (I choose bottom here, and the advance settings as below;)
(10) Bottom Widgets>Pager>Pager type: Fields
(11) Pager field: Content: Image (Note: last one we added for the thumb, don’t mistake since both field will be named same.)
(12) Activate Slide and Pause on Pager Hove: checked, controls and slider counter leave unchecked.
(13) Click Apply button.

Format Show Field Settings

  1. Inline fields: Choose the thumbnail field as inline.
  2. Click Apply button. (Note: Well it actually doesn’t change much in appearance but it does change in the code. Next step use the firebug and find the class and add some styles to display properly.)

(8) Create a Custom Region (optional step)

(1) On your thems folder open the your_theme_name.info file and add a new region like this shown below;
regions[featured_slider] = Featured Slider and save the .info file.
(2) Open your themes page.tpl.php file and add these code where you want your slide to be displayed as shown below;

<?php if ($page[‘featured_slider’]): ?>
<div id=”featured-slider”>
<?php print render($page[‘featured_slider’]); ?>
</div> <!– End Featured Slider–>
<?php endif; ?>

You can even create custom front page template like page–front.tpl.php so that you do’t need to make any changes to the default page.tpl.php template.

[9] Enable & configure the Block

Now this block will be visible in the blocks disabled area, so from the Dashboard menu go to Structure>Block and enable the block to a themes default region  or the custom region we created (featured_slider). (Regions varies depends on the theme you are using.)

Block Configuration Settings
After enabling the block you get a link to configure the block so click on the Configure link and on the settings section set as below;

(1) Block title (if you don’t want blobk title to be displayed just type <none>)
(2) Again you get all enabled theme specific Region settings.
On visibility setings
(3) Pages>Show block on specific page: choose Only the listed pages and type <front> so that this block will be displayed only on the front page.

CSS TIPS TO DISPLAY THUMBNAILS INLINE

Add these CSS codes to your themes style sheet to display the thumbnails inline.
.views-slideshow-controls-bottom .views-slideshow-pager-field-item { float: left; margin: 20px 6px; } Make necessary adjustments.

That’s all now we have successfully created our new Views Slideshow on Drupal7. I hope yo could understand the tutorial I tried my best to explain as much as I can, if you still have doubt’s comment below and I will try my best to help. The scren cast of this tutorial will be coming soon.

Play around and find the best you can in Drupal7, Best wishes.

Advertisements

Drupal7中的jQuery的使用[转]

在Drupal中使用jQuery很简单,这是因为Drupal内置了jQuery,并且在添加JavaScript时会自动加载 jQuery。在Drupal中,通过drupal_add_js()函数来添加JavaScript文件。

drupal7中注意$需用jQuery代替…

一、在页面内添加jQuery(不推荐此方法使用jQuery)

Let’s get set up to play with jQuery.
1. Log into your Drupal site as user 1 (the administrative account).
2. On the Modules page, enable the PHP filter module.

开启PHP filter模块

3. Create a new node of type Basic Page, but on the node creation form, be sure to select “PHP code” under the “Input formats” section. Enter Testing jQuery as the title, and add the following to the body section of the form:

创建一个页面,选择PHP code 的输入格式

<?php
drupal_add_js(‘jQuery(document).ready(function () {
jQuery(“p”).hide();
jQuery(“p”).fadeIn(“slow”);
});’, ‘inline’);
?>
<p id=”one”>Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph three</p>

4. Click Submit, and reload the page. The three paragraphs you created will slowly fade in. Cool, eh? Refresh the page to see it again. Let’s study this example a little more.

The jQuery code is contained in a file, misc/jquery.js. This file is not loaded for every page within Drupal. Instead, anytime a drupal_add_js() call is made, jquery.js is loaded. Two parameters are passed into drupal_add_js(). The first parameter is the JavaScript code you wish to have executed, and the second parameter (inline) tells Drupal to write the code inside a pair of <script></script> tags within the document’s <head> element.

jQuery代码包含在文件misc/jquery.js中。并不是为Drupal中的每个页面都加载这个文件。只有在调用了方法 drupal_add_js()时,才加载它。这里向drupal_add_js()传递了两个参数。第一个参数是一段你希望执行的JavaScript 代码,第二个参数“inline”则用来告诉Drupal将代码写入到文档的<head>元素中 的<script></script>标签里面。
Note:We’re using drupal_add_js() quite simply here, but it has many more possibilities, which you can discover at http://api.drupal.org/api/function/drupal_add_js/7.

drupal_add_js() 更多高级用法参看http://api.drupal.org/api/function/drupal_add_js/7

jQuery:通过ID定位一个元素

Note:Accessing an element by ID is one of the fastest selector methods within jQuery because it translates to the native JavaScript: document.getElementById(“one”). The alternative, jQuery(“p#one”), would be slower because jQuery needs to find all paragraph tags and then look for an intro ID. The slowest selector method in jQuery is the class selector jQuery”.foo”), because a search would have to be made through all elements with the .foo selector class. (It would be faster to do jQuery”p.foo”) in that case.)

在jQuery里面,通过ID访问一个元素是最快的选择器方法之一,这是因为它会被翻译为本地的JavaScript代码:document.getElementById(“one “)。替代方案$(“p#one”)就会慢一些,这是因为jQuery首先需要查找所有的段落标签,然后再从中选择ID为one的元素。在jQuery中最慢的选择器方法就是$(“.foo”),因为它需要在所有的元素中查找选择器类为foo的元素(在该情况下,使用$(“p.foo”)会快一些)。

方法链(Method Chaining)

We can concatenate a series of jQuery methods because most methods within jQuery return a jQuery object. Let’s chain some methods together in a single jQuery command:

我们可以连接一系列的jQuery方法的原因是, jQuery内部的大多数方法都返回一个jQuery对象。让我们在单个jQuery命令中将多个方法串连起来:
// Hide all the p tags, fade them in to visibility, then slide them up and down.
jQuery(“p”).hide().fadeIn(“slow”).slideUp(“slow”).slideDown(“slow”);
jQuery calls are invoked from left to right. The preceding snippet finds all the paragraph tags, fades them in, and then uses a sliding effect to move the paragraphs up and then down. Because each of these methods returns the jQuery wrapper object containing the same set it was given (all the p elements), we can manipulate the same set of elements over and over again until the final effect is achieved.

jQuery的调用是从左向右进行的。前面的代码片段找到所有的段落标签,并渐进的显示它们,然后使用一个幻灯效果把段落移上去再移下 来。由于其中的每个方法返回的jQuery包装器对象都包含了相同的元素集(所有的p元素),所以我们可以对同一个元素集进行一次又一次的操作,直到达到 最终的效果。

添加或删除一个类(Adding or Removing a Class)jQuery can dynamically change the CSS class of an element. Here, we turn the first paragraph of our example red by selecting it by ID and then assigning Drupal’s error class to it:

jQuery可以动态的修改一个元素的CSS类。这里,我们通过ID选中我们例子中的第一个段落,然后为它分配一个Drupal的错误类,这样就将它转变为红色了:

jQuery(“#one”).addClass(“error”);

The counterpart to the addClass() method is the removeClass() method. The following snippet will remove the error class we just added:

与addClass()方法对应的是removeClass()方法。下面的代码片段将删除我们刚刚添加的错误类:

jQuery(“#one”).removeClass(“error”);

And then there’s the toggleClass() method, which adds or removes a class each time it is called:

还有一个toggleClass()方法,每次调用它时都会添加或删除一个类:

jQuery(“#one”).toggleClass(“error”); // Adds class “error”.
jQuery(“#one”).toggleClass(“error”); // Removes class “error”.

jQuery(“#one”).toggleClass(“error”); // Adds class “error” again.

包装已有元素(Wrapping Existing Elements)
Instead of just adding an error class to the <p id=”one”> element, let’s wrap that element in a div so that the red will show up better. The following jQuery snippet will do that:
<?php
drupal_add_js(‘jQuery(document).ready(function () {
jQuery(“#one”).wrap(“<div class=\’error\’></div>”);
});’, ‘inline’);
?>
<p id=”one”>Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph three</p>
Note the escaping of the single quotes, which is necessary because we already have open single quotes inside the drupal_add_js() function.

注意单引号的转义,由于我们在drupal_add_js()内部已经使用了一对单引号,所以需要对双引号内部的单引号进行转义。

修改CSS元素的值(Changing Values of CSS Elements)
jQuery can be used to assign (or reassign) values to CSS elements. Let’s set the border surrounding the first paragraph to solid (see Figure 18-4):
jQuery(“#one”).wrap(“<div class=\’error\’></div>”).css(“border”, “solid”);
Notice that the css method is still acting on the p element, not on the div element, because the wrap method returned the targeted p element after wrapping it.

二、在主题中使用jQuery

Adding JavaScript via a Theme .info File
The most convenient but least flexible way to include JavaScript files is to include a line in your theme’s .info file. Let’s add an effect to your site that emphasizes the logo of your site by making it fade out and then fade in again when a page is loaded. Place the following JavaScript code in a file called logofade.js in your current theme. For example, if you are using the Bartik theme, it would be at themes/bartik/logofade.js.
包含JavaScript文件的最方便的方式,就是在你的主题的.info文件中添加一行代码,不过这种方式也有一个缺点,那就是缺乏灵 活性。让我们为你的站点添加一个效果,用来强调你站点的标识语,在一个页面被加载时,先把它淡出,接着再把它渐显出来。把下面的JavaScript代码 放在你主题下的一个名为logofade.js的文件中。例如,如果你使用的主题为Bartik,那么它就位于themes/Bartik/logofade.js。
// Selects the theme element with the id “logo”, fades it out,
// then fades it in slowly.
jQuery(document).ready(function(){
jQuery(“#logo”).fadeOut(“fast”).fadeIn(“slow”);
});

The JavaScript file is in place; now we just have to tell Drupal to load it. Add the following line to your current theme’s .info file:

JavaScript文件已经有了;现在我们只需要告诉Drupal加载它就可以了。向你的当前主题的.info文件中添加下面一行代码:

scripts[] = logofade.js

The last step is to make Drupal reread the .info file so that it will see that it needs to load logofade.js. To do that, go to Appearance, temporarily switch to a different theme, and then switch back.

最后一步就是让Drupal重读.info文件,这样它就会看到它需要加载logofade.js了。为了实现这一点,导航到“管理➤站点构建➤主题”,临时的转换到一个不同的主题上,然后再转换回来。

This method of adding JavaScript is useful if the JavaScript will be loaded on every single page of your web site. In the next section, you’ll see how to add JavaScript only when a module that uses it is enabled.

如果对于你网站的每个页面,都需要为其加载某一JavaScript文件的话,那么这个方法还是非常有用的。在接下来的一节中,你将看到如何实现,只有当使用JavaScript的模块被启用时,才加载它。

三、在模块内使用jQuery

The following module does just that,using jQuery to identify and hide the blocks in the left and right sidebar regions and providing a helpful button that will bring the blocks back. Here’s sites/all/modules/custom/blockaway/blockaway.info:
下面的模块实现了这一点,它使用jQuery来对左右边栏区域中的区块进行标识和隐藏,并提供了一个有用的按钮用来将区块重新显示出来。

name = Block-Away
description = Uses jQuery to hide blocks until a button is clicked.
package = Pro Drupal Development
core = 7.x
files[]=blockaway.module

And here’s sites/all/modules/custom/blockaway/blockaway.module:

<?php
/**
* @file
* Use this module to learn about jQuery.
*/
/**
* Implements hook_init().
*/
function blockaway_init() {
drupal_add_js(drupal_get_path(‘module’, ‘blockaway’) .’/blockaway.js’);
}

All the module does is include the following JavaScript file, which you can put at
sites/all/modules/custom/blockaway/blockaway.js:

/**
* Hide blocks in sidebars, then make them visible at the click of a button.
*/
jQuery(document).ready(function() {
// Get all div elements of class ‘block’ inside the left sidebar.
// Add to that all div elements of class ‘block’ inside the
// right sidebar. Check your theme’s page.tpl.php file to see what
// selectors you should use – the following are for garland.
var blocks = jQuery(‘#sidebar-first div.block, #sidebar-second div.block’);
// Hide them.
blocks.hide();
// Add a button that, when clicked, will make them reappear.
jQuery(‘#sidebar-first’).prepend(‘<div id=”collapsibutton”>Show Blocks</div>’);
jQuery(‘#collapsibutton’).css({
‘width’: ’90px’,
‘border’: ‘solid’,
‘border-width’: ‘1px’,
‘padding’: ‘5px’,
‘background-color’: ‘#fff’
});
// Add a handler that runs once when the button is clicked.
jQuery(‘#collapsibutton’).one(‘click’, function() {
// Button clicked! Get rid of the button.
jQuery(‘#collapsibutton’).remove();
// Display all our hidden blocks using an effect.
blocks.slideDown(“slow”);
});
});

When you enable the module on the Modules page, any blocks you have visible should disappear and be replaced with a plain button.
导航到“管理➤站点构建➤模块”,启用该模块,你以前可见的所有区块都消失了,被替换为了一个没有格式的按钮。

三、可覆写的JavaScript (Overridable JavaScript)
The code in blockaway.module is simple and easy to understand. It just makes sure the blockaway.js file is included.However, if the module were more complicated, it would be friendlier to others to put the drupal_add_js() function call in a theme function instead of in hook_init(). That way, those who wanted to use your module but customize the JavaScript code in some way could do so without touching your module code at all (see Chapter 9 for how the theme system works its magic). The code that follows is a revised version of blockaway.module that declares a theme function using hook_theme(), moves the drupal_add_js() call into the theme function, and calls the theme function from hook_init(). The functionality is the same, but savvy developers can now override the blockaway.js file.
blockaway.module中的代码非常简单并易于理解。它只负责包含blockaway.js文件。然而,如果模块更加复杂一点的话,那么将 drupal_add_js()函数调用放在一个主题函数中,来取代放在hook_init()中,这对其他开发者来说会更加友好。这样,对于那些想使用 你的模块,同时又想用一些方式来定制JavaScript代码的用户,他们无需修改你模块的源代码就可以完成定制工作(关于主题系统的更多详细,可参看第 8章)。下面的代码是blockaway.module的修订版本,它使用hook_theme()声明了一个主题函数,并将 drupal_add_js()调用移到了该主题函数中,而在hook_init()中调用这个主题函数。功能是一样的,但是现在聪明的开发者就可以对 blockaway.js文件进行覆写了。

<?php
/**
* @file
* Use this module to learn about jQuery.
*/
/**
* Implements hook_init().
*/
function blockaway_init() {
theme(‘blockaway_javascript’);
}
/**
* Implements hook_theme().
* Register our theme function.
*/
function blockaway_theme() {
return array(
‘blockaway_javascript’ => array(
‘arguments’ => array(),
),
);
}
/**
* Theme function that just makes sure our JavaScript file
* gets included.
*/
function theme_blockaway_javascript() {
drupal_add_js(drupal_get_path(‘module’, ‘blockaway’) .’/blockaway.js’);
}

覆写的JavaScript文件:
Let’s go ahead and see if this approach works. We’re going to override the JavaScript provided by the module with JavaScript provided by the theme. Copy sites/all/modules/custom/blockaway/lockaway.js to your current theme—for example, themes/bartik/ blockaway.js. Let’s change the JavaScript file slightly so that we’ll know which JavaScript file is being used. Change the effect from slideDown(“slow”) to fadeIn(5000); this will fade in the blocks over a period of five seconds. Here is the new file:
让我们继续前进,来看看这种方法是否可以工作。我们将使用主题提供的JavaScript,来覆写模块提供的 JavaScript。把sites/all/modules/custom/blockaway/blockaway.js拷贝到你的当前主题下 —-例如,themes/bartik/blockaway.js。让我们稍微的修改一下JavaScript文件,这样我们就知道正在使用的是哪个 JavaScript文件。将特效从slideDown(“slow”)改为fadeIn(5000);这将使用5秒钟的时间来渐进的显示区块。下面是新 文件:

/**
* Hide blocks in sidebars, then make them visible at the click of a button.
*/
jQuery(document).ready(function() {
// Get all div elements of class ‘block’ inside the left sidebar.
// Add to that all div elements of class ‘block’ inside the
// right sidebar.
var blocks = jQuery(‘#sidebar-first div.block, #sidebar-second div.block’);
// Hide them.
blocks.hide();
// Add a button that, when clicked, will make them reappear.
jQuery(‘#sidebar-first’).prepend(‘<div id=”collapsibutton”>Show Blocks</div>’);
jQuery(‘#collapsibutton’).css({
‘width’: ’90px’,
‘border’: ‘solid’,
‘border-width’: ‘1px’,
‘padding’: ‘5px’,
‘background-color’: ‘#fff’
});
// Add a handler that runs once when the button is clicked.
jQuery(‘#collapsibutton’).one(‘click’, function() {
// Button clicked! Get rid of the button.
jQuery(‘#collapsibutton’).remove();
// Display all our hidden blocks using an effect.
blocks.fadeIn(“5000”);
});
});

The last change we need to make is to tell Drupal to load this new JavaScript file instead of the one in sites/all/modules/custom/blockaway. We do that by overriding the theme function. Add the following function to the template.php file of your theme (if your theme doesn’t have a template.php file,it’s okay to create one):
我们最后要做的修改就是告诉Drupal加载这个新文件,从而取代sites/all/modules/custom/blockaway中的文件。我们 通过覆写主题函数来实现这一点。向你主题的template.php文件中(如果你的主题还没有一个template.php文件,那么你需要创建一 个),添加下面所给的函数:

/**
* Override theme_blockaway_javascript() with the
* following function.
*/
function bartik_blockaway_javascript() {
drupal_add_js(path_to_theme() . ‘/blockaway.js’);
}

Note:Change the name of the preprocess function so that it uses the name of the theme you are using. In the preceding example, I am using the Bartik theme.

Visit the Modules page to rebuild the theme registry so your changes will be recognized. When you visit a page in your web browser, you should see the Show Blocks button, and clicking it should reveal the blocks via a gradual fade-in effect instead of the slide effect we were using earlier. Congratulations!

现在,当你使用浏览器来访问一个页面时,你应该能够看到“显示区块”按钮了,点击这个按钮,将会使用一个渐进的淡入效果来显示区块,而不是我们前面所用的幻灯效果。恭喜恭喜!
You’ve learned how to use jQuery in your module, how to write it in a way that is friendly to themers and other developers, and coincidentally, how to cleanly override or enhance JavaScript files provided by other module developers who have been equally courteous.

你已经学会了如何在你的模块中使用jQuery,如何使用友好的方式编写jQuery以方便主题制作者和其他的开发者,同时,你还学会了如何覆写或增强其它模块中的JavaScript文件,这里假定这些模块中的JavaScript文件可被覆写。
Before we leave this example, let me demonstrate how to override a template file. First, remove the bartik_blockaway_javascript() function that you added to the template.php file. Next, in your current theme, create an empty file called blockawayjavascript. tpl.php. For example, if you are using the Bartik theme, create themes/bartik/blockaway-javascript.tpl.php. Don’t put anything inside this file.
Now visit the Modules page. The act of visiting this page will rebuild the theme registry. Drupal will find the template file and use it instead of the theme function in your module. The result is that blockaway.js will never be loaded; you’ve essentially commented out the theme function by creating an empty template file (recall from Chapter 9 that, when building the theme registry, Drupal will look for a template file and then for theme functions).

在我们结束这个例子的学习以前,让我演示一下如何使用模板文件进行覆写。首先,删除你添加到template.php文件中的 bartik_blockaway_javascript()函数。接着,在你的当前主题中,创建一个空文件 blockawayjavascript.tpl.php。例如,如果你使用的是Bartik主题,那么创建的就是themes/Bartik/blockaway-javascript.tpl.php。不要在这个文件中放置任何东西。现在导航到模块页面,访问这个页面的作用就是重新构建主题注册表。Drupal 将找到该模板文件,并使用它来替代你模块中的主题函数。最终的结果就是永远也不会加载blockaway.js了;通过创建一个空的模板文件,你实质上就是注释掉了该主题函数。

Now, add the following to your blockaway-javascript.tpl.php file:

现在,向你的blockaway-javascript.tpl.php文件中添加以下代码:

<?php drupal_add_js(path_to_theme() . ‘/blockaway.js’); ?>

When you reload your page, you should see that the JavaScript file is now loading. Do you see how these techniques can be useful for substituting your own enhanced JavaScript file in a third-party module or for preventing some JavaScript from loading?

当你重新加载页面时,你应该可以看到JavaScript文件现在加载进来了。如果你想将第3方模块中的JavaScript文件替换为你的增强版本,或者想阻止加载一些JavaScript文件时,这里所讲的这些技术还是很有用处的。

You cannot call drupal_add_js() from inside page.tpl.php or any theme functions that are called in its preprocessing (such as blocks), because they are executed too late in the page building process. See modules/block/block-admin-display-form.tpl.php for an example of a core template file that adds JavaScript.

你不能在page.tpl.php中调用drupal_add_js(),对于其它的一些主题函数,如果是在它的预处理阶段调用的话 (比如区块),那么也不能使用drupal_add_js()。为什么呢?这是因为它们在页面构建流程中执行的顺序过于靠后。核心模板文件是如何添加 JavaScript的,可参看modules/block/block-admin-display-form.tpl.php。