Update the classes on slideshow controls when clicked, so "Pause" and "Resume" can be replaced with images via CSS [#1280596]

I am using Bottom Widget Text Controls. I am trying to replace the text with my own custom images using CSS.

Inside views-slideshow-controls-text-next.tpl.php I adjust it so it reads:

Then through css I set a background image for the next button. It works!

Problem is with the PAUSE button. When it is clicked there is javascript replacement code inside views_slideshow.js to replace the contents of the hyper-link with the text 'RESUME'. If clicked again, there is JS code to replace the text with 'PAUSE'.

  // Theme the resume control.
  Drupal.theme.prototype.viewsSlideshowControlsPause = function () {
    return Drupal.t('Resume');
  };

  // Theme the pause control.
  Drupal.theme.prototype.viewsSlideshowControlsPlay = function () {
    return Drupal.t('Pause');
  };

This obviously breaks my image replacement method because the spacer image gets replaced by the above text.

Obviously I can adjust the above to just return; to have no text replacement but how can this be adjusted so that instead of replacing the text inside the hyperlink when PAUSE is clicked - it adds a new class to the hyper link?

E.g when clicked .... becomes ... ?

This would allow me to throw an overlay image background when the pause is active? Any suggestions?

Comment	File	Size	Author
#5	add_css_classes-1280596-5.patch	1007 bytes	jenlampton

Comments

Comment #1

redndahead commented 17 September 2011 at 21:04

Status:

Active

» Fixed

Use a background image and set your css for the controls to text-indent: -9999px;

Comment #2

1 October 2011 at 21:11

Status:

Fixed

» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Comment #3

jenlampton

she / her

commented 9 May 2012 at 01:45

Title:	views_slideshow.js - Text controls have hardcoded replacement text 'Pause' & 'Resume. How to replace with image link instead?	» Update the classes on slideshow controls when clicked, so "Pause" and "Resume" can be replaced with images via CSS
Status:	Closed (fixed)	» Active

The classes on slideshow controls do not change when the links are clicked. It's easy to replace the text with a background image when the link says "Pause" but there's no way to replace the "resume" text with a different background image, since there are no identifiers that differ.

Comment #4

jenlampton

she / her

commented 9 May 2012 at 04:15

Version:	7.x-3.x-dev	» 7.x-3.0
Status:	Active	» Closed (fixed)

On closer examination, it looks like this has been fixed in the dev version. Changing version number, and marking as fixed.

For those of you who would like access to the css classes from the the dev version of the module, here's what I changed in js/views_slideshow.js:

// Process pause link
      $('.views_slideshow_controls_text_pause:not(.views-slideshow-controls-text-pause-processed)', context).addClass('views-slideshow-controls-text-pause-processed').each(function() {
        var uniqueID = $(this).attr('id').replace('views_slideshow_controls_text_pause_', '');
        $(this).click(function() {
          if (Drupal.settings.viewsSlideshow[uniqueID].paused) {
            Drupal.viewsSlideshow.action({ "action": 'play', "slideshowID": uniqueID, "force": true });
            $('.views_slideshow_controls_text_pause').removeClass('views-slideshow-controls-text-status-play');
            $('.views_slideshow_controls_text_pause').addClass('views-slideshow-controls-text-status-pause');
          }
          else {
            Drupal.viewsSlideshow.action({ "action": 'pause', "slideshowID": uniqueID, "force": true });
            $('.views_slideshow_controls_text_pause').removeClass('views-slideshow-controls-text-status-pause');
            $('.views_slideshow_controls_text_pause').addClass('views-slideshow-controls-text-status-play');
          }
          return false;
        });
      });