Does anybody have any tips for achieving inline [ previous button / pager / next button ] style controls? See the attached screen grab for what I'm on about.

I'm happy doing the CSS to get images to replace the text in the standard controls (it seems other people have been doing this already too: http://drupal.org/node/660312). I'm just a little stuck with the positioning as the standard markup is output in such a way that it's tricky to position the pager in between the other buttons but still have it grow/shrink depending on the number of rows in the view. I can get it working with fixed widths but I need to have that pager be able to grow/shrink accordingly.

I guess I need to have the markup so that the prev/next buttons aren't in their own wrapper div for a start.

Any help would be greatly appreciated.

CommentFileSizeAuthor
#5 controls-and-pager.png7.58 KBDanny_Joris
inline-prev-pager-next-controls.png2.11 KBdddbbb
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

koppie’s picture

koppie CreditAttribution: koppie commented
Status: Active » Closed (duplicate)

Looks like this question has already been answered:
#618548: is there any way to change the location of the Controls?
#1097566: How to Style the controls so that they overlay the Slideshow

dddbbb’s picture

dddbbb CreditAttribution: dddbbb commented
Status: Closed (duplicate) » Active

I disagree. I'm fine with positioning the controls as a group. My question is how to position the prev/next controls either side of the pager (which is dynamic in width). There still doesn't seem to be scope for this without tweaking the output markup with JavaScript.

redndahead’s picture

redndahead CreditAttribution: redndahead commented
Status: Active » Closed (fixed)

So the gist is to use the views-slideshow-singleframe.tpl.php file and print out the controls twice. Once above the pager and once below the pager. Then hide the controls you don't want shown on each side. Kind of a hack, but will do what you want. You could also copy over the preprocess function to your theme and adjust what is outputted.

dddbbb’s picture

dddbbb CreditAttribution: dddbbb commented

Cool. Many thanks.

Danny_Joris’s picture

Danny_Joris CreditAttribution: Danny_Joris commented
FileSize
controls-and-pager.png7.58 KB

For future reference: I added the pagers between the two controls using a theme function override. Still a bit of a hack, though. At least there's no need to override a template file.

Added $output .= theme('views_slideshow_singleframe_pager', $vss_id, $view, $options); 

function mytheme_preprocess_views_slideshow_singleframe(&$vars) {
  // unset pager_bottom as we include this in the controls function
  unset($vars['pager_bottom']);
}

/**
 * The slideshow controls.
 *
 * @ingroup themeable
 */
function mytheme_views_slideshow_singleframe_controls($vss_id, $view, $options) {
  $classes = array(
    'views_slideshow_singleframe_controls',
    'views_slideshow_controls',
  );

  $attributes['class'] = implode(' ', $classes);
  $attributes['id'] = "views_slideshow_singleframe_controls_" . $vss_id;
  $attributes = drupal_attributes($attributes);

  $output = "<div$attributes>";
  $output .= theme('views_slideshow_singleframe_control_previous', $vss_id, $view, $options);
  // add pager
  $output .= theme('views_slideshow_singleframe_pager', $vss_id, $view, $options);
  $output .= theme('views_slideshow_singleframe_control_next', $vss_id, $view, $options);
  $output .= "</div>\n";
  return $output;
}