How to implement image pager effect in ddblock

Thanks Philip,
for your help and your great module.

i do follow all the steps you mentioned, but i till can't see the pager image, in the pager field, only show black/gray, no image...
it's seems that no thumbnail found?
Does the ddblock can convert the origin image to thumbnail for showing in the pager block automatically? or need i create the smallimages manully, just a little bit confusing....
thanks a lot:)

i am so appreciate your quick help

Actually, i just follow the guide, and import your files to Create News item content type and Create News items view
please see following debug information:

One more note:
after create News item content type by import the news_item_cck_export.txt, i do not create several items imediately, however, i create some new items with image after everythings getting down. hope this will not affect the result..

array (
'delta' => '1',
'output_type' => 'view_fields',
'pager' => 'custom-pager',
'pager_container' => NULL,
'pager_event' => NULL,
'pager_height' => 63,
'pager_width' => 195,
'imgcache_pager_item' => '',
'pager_position' => 'bottom',
'template' => 'upright40',
'custom_template' => NULL,
'view_name' => 'news_items',
)
stdClass::__set_state(array(
'nid' => '11',
'node_title' => '时尚厨房',
'node_data_field_pager_item_text_field_pager_item_text_value' => 'test',
'node_type' => 'ddblock_news_item',
'node_vid' => '11',
'node_data_field_pager_item_text_field_slide_text_value' => '用新鲜的心制作美味佳肴

时尚亦可入味',
'node_data_field_pager_item_text_field_image_fid' => '1',
'node_data_field_pager_item_text_field_image_list' => '1',
'node_data_field_pager_item_text_field_image_data' => 'a:3:{s:11:"description";s:0:"";s:3:"alt";s:0:"";s:5:"title";s:0:"";}',
'node_revisions_body' => '',
'node_revisions_format' => '1',
'node_created' => '1238887681',
))
'news_items'
stdClass::__set_state(array(
'nid' => '11',
'node_title' => '时尚厨房',
'node_data_field_pager_item_text_field_pager_item_text_value' => 'test',
'node_type' => 'ddblock_news_item',
'node_vid' => '11',
'node_data_field_pager_item_text_field_slide_text_value' => '用新鲜的心制作美味佳肴

时尚亦可入味',
'node_data_field_pager_item_text_field_image_fid' => '1',
'node_data_field_pager_item_text_field_image_list' => '1',
'node_data_field_pager_item_text_field_image_data' => 'a:3:{s:11:"description";s:0:"";s:3:"alt";s:0:"";s:5:"title";s:0:"";}',
'node_revisions_body' => '',
'node_revisions_format' => '1',
'node_created' => '1238887681',
))

Thanks Philip,
please see below template.php file:
if you need other information for debugging, please told, thanks a lot:)

<?php // $Id: template.php,v 1.4 2008/09/09 13:14:22 jmburnz Exp $
/**
* @file
* template.php
*/
/**
* Initialize theme settings
*/
$pixture_width = theme_get_setting('pixture_width');
pixture_validate_page_width($pixture_width);
/**
* Check the page width theme settings and reset to default
* if the value is null, or invalid value is specified
*/
function pixture_validate_page_width($width) {
global $theme_key;

/**
* The default values for the theme variables. Make sure $defaults exactly
* matches the $defaults in the theme-settings.php file.
*/
$defaults = array( // <-- change this array
'pixture_width' => '85%',
);

// check if it is liquid (%) or fixed width (px)
if (preg_match("/(\d+)\s*%/", $width, $match)) {
$liquid = 1;
$num = intval($match[0]);
if (50 <= $num && $num <= 100) {
return $num ."%"; // OK!
}
}
else if (preg_match("/(\d+)\s*px/", $width, $match)) {
$fixed = 1;
$num = intval($match[0]);
if (800 <= $num && $num < 1600) {
return $num ."px"; // OK
}
}

// reset to default value
variable_set(
str_replace('/', '_', 'theme_'. $theme_key .'_settings'),
array_merge($defaults, theme_get_settings($theme_key))
);
// Force refresh of Drupal internals
theme_get_setting('', TRUE);
return $defaults['pixture_width'];
}
/**
* Initialize theme settings
*/
if (is_null(theme_get_setting('pixture_superfish'))) { // <-- change this line
global $theme_key;

/**
* The default values for the theme variables. Make sure $defaults exactly
* matches the $defaults in the theme-settings.php file.
*/
$defaults = array( // <-- change this array
'pixture_superfish' => 0,
);

// Get default theme settings.
$settings = theme_get_settings($theme_key);

// Save default theme settings.
variable_set(
str_replace('/', '_', 'theme_'. $theme_key .'_settings'),
array_merge($defaults, $settings)
);
// Force refresh of Drupal internals.
theme_get_setting('', TRUE);
return $defaults['pixture_superfish'];
}
// Conditionally load the Superfish JS
if (theme_get_setting('pixture_superfish')) {
drupal_add_css(drupal_get_path('theme', 'pixture_reloaded') .'/sf/css/superfish.css', 'theme');
drupal_add_js(drupal_get_path('theme', 'pixture_reloaded') .'/sf/js/superfish.js', 'theme');
}
/**
* Override or insert PHPTemplate variables into the page templates.
*
* @param $vars
* A sequential array of variables to pass to the theme template.
* @param $hook
* The name of the theme function being called ("page" in this case.)
*/
function pixture_reloaded_preprocess_page(&$vars, $hook) {
global $theme;

// Hook into color.module
if (module_exists('color')) {
_color_page_alter($vars);
}

// Don't display empty help from node_help().
if ($vars['help'] == "

") {
$vars['help'] = '';
}

// Classes for body element. Allows advanced theming based on context
// (home page, node of certain type, etc.)
$body_classes = array($vars['body_classes']);
if (!$vars['is_front']) {
// Add unique classes for each page and website section
$path = drupal_get_path_alias($_GET['q']);
list($section, ) = explode('/', $path, 2);
$body_classes[] = pixture_reloaded_id_safe('page-'. $path);
$body_classes[] = pixture_reloaded_id_safe('section-'. $section);
if (arg(0) == 'node') {
if (arg(1) == 'add') {
if ($section == 'node') {
array_pop($body_classes); // Remove 'section-node'
}
$body_classes[] = 'section-node-add'; // Add 'section-node-add'
}
elseif (is_numeric(arg(1)) && (arg(2) == 'edit' || arg(2) == 'delete')) {
if ($section == 'node') {
array_pop($body_classes); // Remove 'section-node'
}
$body_classes[] = 'section-node-'. arg(2); // Add 'section-node-edit' or 'section-node-delete'
}
}
// Add a unique class when viewing a node
if (arg(0) == 'node' && is_numeric(arg(1))) {
$body_classes[] = 'node-full-view'; // Add 'node-full-view'
}
}
$vars['body_classes'] = implode(' ', $body_classes); // Concatenate with spaces
}
/**
* Override or insert PHPTemplate variables into the node templates.
*
* @param $vars
* A sequential array of variables to pass to the theme template.
* @param $hook
* The name of the theme function being called ("node" in this case.)
*/
function pixture_reloaded_preprocess_node(&$vars, $hook) {
global $user;

// Special classes for nodes
$node_classes = array();
if ($vars['sticky']) {
$node_classes[] = 'sticky';
}
if (!$vars['node']->status) {
$node_classes[] = 'node-unpublished';
$vars['unpublished'] = TRUE;
}
else {
$vars['unpublished'] = FALSE;
}
if ($vars['node']->uid && $vars['node']->uid == $user->uid) {
// Node is authored by current user
$node_classes[] = 'node-mine';
}
if ($vars['teaser']) {
// Node is displayed as teaser
$node_classes[] = 'node-teaser';
}
// Class for node type: "node-type-page", "node-type-story", "node-type-my-custom-type", etc.
$node_classes[] = 'node-type-'. $vars['node']->type;
$vars['node_classes'] = implode(' ', $node_classes); // Concatenate with spaces
}
/**
* Override or insert PHPTemplate variables into the comment templates.
*
* @param $vars
* A sequential array of variables to pass to the theme template.
* @param $hook
* The name of the theme function being called ("comment" in this case.)
*/
function pixture_reloaded_preprocess_comment(&$vars, $hook) {
global $user;

// We load the node object that the current comment is attached to
$node = node_load($vars['comment']->nid);
// If the author of this comment is equal to the author of the node, we
// set a variable so we can theme this comment uniquely.
$vars['author_comment'] = $vars['comment']->uid == $node->uid ? TRUE : FALSE;

$comment_classes = array();

// Odd/even handling
static $comment_odd = TRUE;
$comment_classes[] = $comment_odd ? 'odd' : 'even';
$comment_odd = !$comment_odd;

if ($vars['comment']->status == COMMENT_NOT_PUBLISHED) {
$comment_classes[] = 'comment-unpublished';
$vars['unpublished'] = TRUE;
}
else {
$vars['unpublished'] = FALSE;
}
if ($vars['author_comment']) {
// Comment is by the node author
$comment_classes[] = 'comment-by-author';
}
if ($vars['comment']->uid == 0) {
// Comment is by an anonymous user
$comment_classes[] = 'comment-by-anon';
}
if ($user->uid && $vars['comment']->uid == $user->uid) {
// Comment was posted by current user
$comment_classes[] = 'comment-mine';
}
$vars['comment_classes'] = implode(' ', $comment_classes);

// If comment subjects are disabled, don't display 'em
if (variable_get('comment_subject_field', 1) == 0) {
$vars['title'] = '';
}
}
/**
* Override or insert PHPTemplate variables into the block templates.
*
* @param $vars
* A sequential array of variables to pass to the theme template.
* @param $hook
* The name of the theme function being called ("block" in this case.)
*/
function pixture_reloaded_preprocess_block(&$vars, $hook) {
$block = $vars['block'];

// Special classes for blocks
$block_classes = array();
$block_classes[] = 'block-'. $block->module;
$block_classes[] = 'region-'. $vars['block_zebra'];
$block_classes[] = $vars['zebra'];
$block_classes[] = 'region-count-'. $vars['block_id'];
$block_classes[] = 'count-'. $vars['id'];
$vars['block_classes'] = implode(' ', $block_classes);

}
/**
* Converts a string to a suitable html ID attribute.
*
* - Preceeds initial numeric with 'n' character.
* - Replaces space and underscore with dash.
* - Converts entire string to lowercase.
* - Works for classes too!
*
* @param string $string
* The string
* @return
* The converted string
*/
function pixture_reloaded_id_safe($string) {
if (is_numeric($string{0})) {
// If the first character is numeric, add 'n' in front
$string = 'n'. $string;
}
return strtolower(preg_replace('/[^a-zA-Z0-9-]+/', '-', $string));
}

/*!
* Dynamic display block preprocess functions
* Copyright (c) 2008 - 2009 P. Blaauw All rights reserved.
* Version 1.3 (18-MAR-2009)
* Licenced under GPL license
* http://www.gnu.org/licenses/gpl.html
*/

/**
* Override or insert variables into the ddblock_cycle_block_content templates.
* Used to convert variables from view_fields to slider_items template variables
*
* @param $vars
* An array of variables to pass to the theme template.
*
*/
function pixture_reloaded_preprocess_ddblock_cycle_block_content(&$vars) {
if ($vars['output_type'] == 'view_fields') {
$content = array();
// Add slider_items for the template
// If you use the devel module uncomment the following line to see the theme variables
// dsm($vars['settings']['view_name']);
// dsm($vars['content'][0]);
// If you don't use the devel module uncomment the following line to see the theme variables
//drupal_set_message('

' . var_export($vars['settings']['view_name'], true) . '

');
//drupal_set_message('

' . var_export($vars['content'][0], true) . '

');
if ($vars['settings']['view_name'] == 'news_items') {
if (!empty($vars['content'])) {
foreach ($vars['content'] as $key1 => $result) {
// add slide_image variable
if (isset($result->node_data_field_pager_item_text_field_image_fid)) {
// get image id
$fid = $result->node_data_field_pager_item_text_field_image_fid;
// get path to image
$filepath = db_result(db_query("SELECT filepath FROM {files} WHERE fid = %d", $fid));
// use imagecache (imagecache, preset_name, file_path, alt, title, array of attributes)
if (module_exists('imagecache') && is_array(imagecache_presets()) && $vars['imgcache_slide'] <> ''){
$slider_items[$key1]['slide_image'] =
theme('imagecache',
$vars['imgcache_slide'],
$filepath,
$result->node_title);
}
else {
$slider_items[$key1]['slide_image'] =
' '" alt="' . $result->node_title .
'"/>';
}
}
// add slide_text variable
if (isset($result->node_data_field_pager_item_text_field_slide_text_value)) {
$slider_items[$key1]['slide_text'] = $result->node_data_field_pager_item_text_field_slide_text_value;
}
// add slide_title variable
if (isset($result->node_title)) {
$slider_items[$key1]['slide_title'] = $result->node_title;
}
// add slide_read_more variable and slide_node variable
if (isset($result->nid)) {
$slider_items[$key1]['slide_read_more'] = l('Read more...', 'node/' . $result->nid);
$slider_items[$key1]['slide_node'] = 'node/' . $result->nid;
}
}
$vars['slider_items'] = $slider_items;
}
}
}
}
/**
* Override or insert variables into the ddblock_cycle_pager_content templates.
* Used to convert variables from view_fields to pager_items template variables
* Only used for custom pager items
*
* @param $vars
* An array of variables to pass to the theme template.
*
*/
function pixture_reloaded_preprocess_ddblock_cycle_pager_content(&$vars) {
if (($vars['output_type'] == 'view_fields') && ($vars['pager_settings']['pager'] == 'custom-pager')){
$content = array();
// Add pager_items for the template
// If you use the devel module uncomment the following lines to see the theme variables
// dsm($vars['pager_settings']['view_name']);
// dsm($vars['content'][0]);
// If you don't use the devel module uncomment the following lines to see the theme variables
//drupal_set_message('

' . var_export($vars['pager_settings'], true) . '

');
//drupal_set_message('

' . var_export($vars['content'][0], true) . '

');
if ($vars['pager_settings']['view_name'] == 'news_items') {
if (!empty($vars['content'])) {
foreach ($vars['content'] as $key1 => $result) {
// add pager_item_image variable
if (isset($result->node_data_field_image_field_image_fid)) {
$fid = $result->node_data_field_image_field_image_fid;
$filepath = db_result(db_query("SELECT filepath FROM {files} WHERE fid = %d", $fid));
// use imagecache (imagecache, preset_name, file_path, alt, title, array of attributes)
if (module_exists('imagecache') &&
is_array(imagecache_presets()) &&
$vars['imgcache_pager_item'] <> ''){
$pager_items[$key1]['image'] =
theme('imagecache',
$vars['pager_settings']['imgcache_pager_item'],
$filepath,
$result->node_data_field_pager_item_text_field_pager_item_text_value);
}
else {
$pager_items[$key1]['image'] =
' '" alt="' . $result->node_data_field_pager_item_text_field_pager_item_text_value .
'"/>';
}
}
// add pager_item _text variable
if (isset($result->node_data_field_pager_item_text_field_pager_item_text_value)) {
$pager_items[$key1]['text'] = $result->node_data_field_pager_item_text_field_pager_item_text_value;
}
}
}
$vars['pager_items'] = $pager_items;
}
}
}

Thank you so much Philip
yes, after changed these two variables, it works...
BTW, if it possible, welcome to Beijing/China for traveling, i can be your kind guide:)
my mail: hong-liang.cao@hotmail.com