Control navigator with thumbnail not styled

+1

For anyone that's trying to get this to work instead of relying on this module I simply used the Nivo Slider plugin in combination with image fields, views, and templates. Took a little bit of doing but I was able to get it to work flawlessly.

Do you mind posting details on how exactly you did this. I am interested but not having any luck.

Thanks

- Add the Nivo javascript files to YOUR_THEME/js

- Be sure to add them to YOUR_THEME.info
e.g.
scripts[] = js/jquery.nivo.slider.js
scripts[] = js/jquery.nivo.slider.pack.js

- I created a new content type (name it whatever you like)

- Added 2 image fields: Photo and Thumbnail

- Change the file directory of the Photo field to "slider" and the Thumbnail field to "slider/thumbs"

- Created a view (you can use my export below)

$view = new view;
$view->name = 'custom_nivo_slider';
$view->description = '';
$view->tag = 'default';
$view->base_table = 'node';
$view->human_name = 'Custom Nivo Slider';
$view->core = 7;
$view->api_version = '3.0';
$view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */

/* Display: Master */
$handler = $view->new_display('default', 'Master', 'default');
$handler->display->display_options['access']['type'] = 'perm';
$handler->display->display_options['cache']['type'] = 'none';
$handler->display->display_options['query']['type'] = 'views_query';
$handler->display->display_options['query']['options']['query_comment'] = FALSE;
$handler->display->display_options['exposed_form']['type'] = 'basic';
$handler->display->display_options['pager']['type'] = 'some';
$handler->display->display_options['pager']['options']['items_per_page'] = '5';
$handler->display->display_options['style_plugin'] = 'default';
$handler->display->display_options['row_plugin'] = 'fields';
$handler->display->display_options['row_options']['hide_empty'] = 0;
$handler->display->display_options['row_options']['default_field_elements'] = 0;
/* Relationship: File Usage: File */
$handler->display->display_options['relationships']['node_to_file']['id'] = 'node_to_file';
$handler->display->display_options['relationships']['node_to_file']['table'] = 'file_usage';
$handler->display->display_options['relationships']['node_to_file']['field'] = 'node_to_file';
$handler->display->display_options['relationships']['node_to_file']['required'] = 0;
/* Field: File: Name */
$handler->display->display_options['fields']['filename']['id'] = 'filename';
$handler->display->display_options['fields']['filename']['table'] = 'file_managed';
$handler->display->display_options['fields']['filename']['field'] = 'filename';
$handler->display->display_options['fields']['filename']['relationship'] = 'node_to_file';
$handler->display->display_options['fields']['filename']['label'] = '';
$handler->display->display_options['fields']['filename']['alter']['alter_text'] = 1;
$handler->display->display_options['fields']['filename']['alter']['text'] = '<img src="/sites/default/files/slider/[filename]" rel="/sites/default/files/slider/thumbs/[filename]">';
$handler->display->display_options['fields']['filename']['alter']['make_link'] = 0;
$handler->display->display_options['fields']['filename']['alter']['absolute'] = 0;
$handler->display->display_options['fields']['filename']['alter']['external'] = 0;
$handler->display->display_options['fields']['filename']['alter']['replace_spaces'] = 0;
$handler->display->display_options['fields']['filename']['alter']['trim_whitespace'] = 0;
$handler->display->display_options['fields']['filename']['alter']['nl2br'] = 0;
$handler->display->display_options['fields']['filename']['alter']['word_boundary'] = 1;
$handler->display->display_options['fields']['filename']['alter']['ellipsis'] = 1;
$handler->display->display_options['fields']['filename']['alter']['strip_tags'] = 0;
$handler->display->display_options['fields']['filename']['alter']['trim'] = 0;
$handler->display->display_options['fields']['filename']['alter']['html'] = 0;
$handler->display->display_options['fields']['filename']['element_type'] = '0';
$handler->display->display_options['fields']['filename']['element_label_type'] = '0';
$handler->display->display_options['fields']['filename']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['filename']['element_wrapper_type'] = '0';
$handler->display->display_options['fields']['filename']['element_default_classes'] = 0;
$handler->display->display_options['fields']['filename']['hide_empty'] = 0;
$handler->display->display_options['fields']['filename']['empty_zero'] = 0;
$handler->display->display_options['fields']['filename']['hide_alter_empty'] = 1;
$handler->display->display_options['fields']['filename']['link_to_file'] = 0;
/* Contextual filter: Content: Nid */
$handler->display->display_options['arguments']['nid']['id'] = 'nid';
$handler->display->display_options['arguments']['nid']['table'] = 'node';
$handler->display->display_options['arguments']['nid']['field'] = 'nid';
$handler->display->display_options['arguments']['nid']['default_action'] = 'default';
$handler->display->display_options['arguments']['nid']['default_argument_type'] = 'node';
$handler->display->display_options['arguments']['nid']['default_argument_skip_url'] = 0;
$handler->display->display_options['arguments']['nid']['summary']['number_of_records'] = '0';
$handler->display->display_options['arguments']['nid']['summary']['format'] = 'default_summary';
$handler->display->display_options['arguments']['nid']['summary_options']['items_per_page'] = '25';
$handler->display->display_options['arguments']['nid']['break_phrase'] = 0;
$handler->display->display_options['arguments']['nid']['not'] = 0;
/* Filter criterion: Content: Published */
$handler->display->display_options['filters']['status']['id'] = 'status';
$handler->display->display_options['filters']['status']['table'] = 'node';
$handler->display->display_options['filters']['status']['field'] = 'status';
$handler->display->display_options['filters']['status']['value'] = 1;
$handler->display->display_options['filters']['status']['group'] = 0;
$handler->display->display_options['filters']['status']['expose']['operator'] = FALSE;

/* Display: Block */
$handler = $view->new_display('block', 'Block', 'block');
$translatables['custom_nivo_slider'] = array(
  t('Master'),
  t('more'),
  t('Apply'),
  t('Reset'),
  t('Sort by'),
  t('Asc'),
  t('Desc'),
  t('File'),
  t('<img src="/sites/default/files/slider/[filename]" rel="/sites/default/files/slider/thumbs/[filename]">'),
  t('All'),
  t('Block'),
);

Then it took a little bit of template theming. Be sure to have the following template files copied from the fields and views modules:

- field.tpl.php
- views-view-unformatted.tpl.php
- views-view.tpl.php
-

I changed my view template "views-view--custom-nivo-slider--block.tpl.php"

<?php
/**
 * @file views-view.tpl.php
 * Main view template
 *
 * Variables available:
 * - $classes_array: An array of classes determined in
 *   template_preprocess_views_view(). Default classes are:
 *     .view
 *     .view-[css_name]
 *     .view-id-[view_name]
 *     .view-display-id-[display_name]
 *     .view-dom-id-[dom_id]
 * - $classes: A string version of $classes_array for use in the class attribute
 * - $css_name: A css-safe version of the view name.
 * - $css_class: The user-specified classes names, if any
 * - $header: The view header
 * - $footer: The view footer
 * - $rows: The results of the view query, if any
 * - $empty: The empty text to display if the view is empty
 * - $pager: The pager next/prev links to display, if any
 * - $exposed: Exposed widget form/info to display
 * - $feed_icon: Feed icon to display, if any
 * - $more: A link to view more, if any
 *
 * @ingroup views_templates
 */
?>
<div id="contentSlider-container">
<div class="slider-wrapper theme-default controlnav-thumbs">
<div id="contentSlider" class="nivoSlider" style="width:770px;height:310px;">

  <?php if ($rows): ?>

      <?php print $rows; ?>

   <?php endif; ?>

</div></div>
<script type="text/javascript">
jQuery(window).load(function(){
    jQuery("#contentSlider").nivoSlider({
        effect:"random",
        slices:15,
        boxCols:8,
        boxRows:4,
        animSpeed:200,
        pauseTime:3000,
        startSlide:0,
        directionNav:true,
        directionNavHide:true,
        controlNav:true,
        controlNavThumbs:true,
        controlNavThumbsFromRel:true,
        keyboardNav:true,
        pauseOnHover:true,
        manualAdvance:false
    });
});
</script>
</div>

<?php /* class view */ ?>

And "views-view-unformatted--custom-nivo-slider--block.tpl"

<?php
/**
 * @file views-view-unformatted.tpl.php
 * Default simple view template to display a list of rows.
 *
 * @ingroup views_templates
 */
?>

<?php foreach ($rows as $id => $row): ?>
    <?php print $row; ?>
<?php endforeach; ?>

Then in my content type under Manage Display I have added my "Custom Nivo Slider" block I created in views as a block field titled "Custom Nivo Slider" and changed its template "field--custom-nivo-slider.tpl.php" to

<?php

/**
 * @file field.tpl.php
 * Default template implementation to display the value of a field.
 *
 * This file is not used and is here as a starting point for customization only.
 * @see theme_field()
 *
 * Available variables:
 * - $items: An array of field values. Use render() to output them.
 * - $label: The item label.
 * - $label_hidden: Whether the label display is set to 'hidden'.
 * - $classes: String of classes that can be used to style contextually through
 *   CSS. It can be manipulated through the variable $classes_array from
 *   preprocess functions. The default values can be one or more of the
 *   following:
 *   - field: The current template type, i.e., "theming hook".
 *   - field-name-[field_name]: The current field name. For example, if the
 *     field name is "field_description" it would result in
 *     "field-name-field-description".
 *   - field-type-[field_type]: The current field type. For example, if the
 *     field type is "text" it would result in "field-type-text".
 *   - field-label-[label_display]: The current label position. For example, if
 *     the label position is "above" it would result in "field-label-above".
 *
 * Other variables:
 * - $element['#object']: The entity to which the field is attached.
 * - $element['#view_mode']: View mode, e.g. 'full', 'teaser'...
 * - $element['#field_name']: The field name.
 * - $element['#field_type']: The field type.
 * - $element['#field_language']: The field language.
 * - $element['#field_translatable']: Whether the field is translatable or not.
 * - $element['#label_display']: Position of label display, inline, above, or
 *   hidden.
 * - $field_name_css: The css-compatible field name.
 * - $field_type_css: The css-compatible field type.
 * - $classes_array: Array of html class attribute values. It is flattened
 *   into a string within the variable $classes.
 *
 * @see template_preprocess_field()
 * @see theme_field()
 */
?>
<!--
THIS FILE IS NOT USED AND IS HERE AS A STARTING POINT FOR CUSTOMIZATION ONLY.
See http://api.drupal.org/api/function/theme_field/7 for details.
After copying this file to your theme's folder and customizing it, remove this
HTML comment.
-->

    <?php foreach ($items as $delta => $item): ?>
      <?php print render($item); ?>
    <?php endforeach; ?>

There are alot of steps and I hope I didn't leave any out but that's how I was able to accomplish it. I was able to have a nivo slider in the content area of my nodes. It took quite a bit of theming however, since you can't have any additional markup inside of the slider or it will break according to Nivo's documentation.

Hope that helps and wasn't too difficult to follow. I suck at giving instructions

*edit: Be sure that the photos you upload for the "Photo" and "Thumbnail" field have the same filename. Once uploaded your original photos should be in the "/sites/default/files/slider" directory and thumbnail photos should be in the "/sites/default/files/slider/thumbs" directory.

Thanks for your help, but when I tried to follow your instructions I am still unable to get it to work.

My site is at www.shawnbanks.com and the page I have the block on is www.shawnbanks.com/node/14

I have the same problem on D6.

I think what's needed is :
1) to have sensible defaults (maybe 50px * 50px ?)
2) to dynamically create the css in a template file and assigning the width and length of .nivocontrolNav a according the ImageCache (D6) / Image Style (D7) used to generate the thumbnails.

Something I don't understand is that in the demo site (http://www.lunarclips.com/nivoslider-thumbnails), the thumbnails have the proper style. But the settings seem different. The Nivo slider css (default.css) comes from the sites/all/libraries folders, and it's overridden with the proper size in the Nivo module itself, in thumbnails.css. They use 50px square thumbnails. Does it mean these dimensions are hardcoded in the module's css file for D7 ? And not overridden in the D6 version ?

same problem here on D7 dev environment