10/03/2011

Drupal 7: jQuery Backstretch

/*
* jQuery Backstretch
* http://srobbin.com/jquery-plugins/jquery-backstretch
* Add a dynamically-resized background image to the page
* Copyright (c) 2010 Scott Robbin (srobbin.com)
* Dual licensed under the MIT and GPL licenses.
*/

# Salin jQuery bawaan Drupal atau unduh dari situs jQuery

cp path/to/core/jquery.js path/to/theme/

# Unduh jQuery Backstretch

cd path/to/theme
wget https://download.github.com/srobbin-jquery-backstretch-<versi>.tar.gz
tar -xvzf srobbin-jquery-backstretch-<versi>.tar.gz

# Implementasi
## Global

nano -w path/to/theme/<file>.info

scripts[] = theme_path/to/<jquery>.js
scripts[] = theme_path/to/<jquery_backstretch>.js
scripts[] = theme_path/to/<jquery_backstretch_snippet>.js

## Lokal (contoh untuk konten tipe article)

nano -w path/to/theme/template.php

function template_preprocess_node(&$variables) {
  // further restrict to just 'article' node types
  if ($variables['node']->type == 'article') {
    // jQuery
    drupal_add_js('base_path/to/theme/jquery/js', 'file');
    // jQuery Backstretch
    drupal_add_js('base_path/to/theme/jquery/backstretch/js', 'file');
    // jQuery Backstretch snippet
    drupal_add_js('
      jQuery(document).ready(function () {
        $.backstretch("base_path/to/theme/background/image", {speed: <0~500>});
      });', array(
        'type' => 'inline',
        'scope' => 'footer',
        'weight' => 20
      )
    );
  }
}

# Cuci registry & nikmati!

Catatan:
Ubah semua <text> sesuai nilai sesungguhnya

Bahan bacaan:
http://drupal.org/node/171205#scripts
http://drupal.org/node/756722
common.inc/function/drupal_add_js/7

1 comments:

  1. Really i appreciate the effort you made to share the knowledge.The topic here i found was really effective to the topic which i was researching for a long time
    recortar siluetas

    ReplyDelete