Make slideshow controls themable

+1 for this, and (I hope this is okay) I am changing the title because the issue is more general than simply assigning images to the slideshow controls. As antcw mentioned, at present, the replacement of the "Pause" and "Resume" text is done in Javascript after the first click, which is difficult at best to override and also bypasses the translation layer.

If the html elements are loaded from the start and then the display adjusted with css, we can have the same effect with completely themable elements that use the translation layer. Additionally, if like myself and antcw one wishes to have images, this is possible without hacking javascript, and since the images stay loaded on the page there is not that millisecond of loading image time that one gets with a js .html method.

The attached patch achieves the effect with minimal revisions; however, if it were my module, I might make another theme() function for the resume button and move the spans to theme_views_slideshow_singleframe_controls.

This is currently up and running on the site http://bahaipoint.com - Works in FF, IE, Chrome.

I tried appying the patch but get errors for both 6.x-2.0-beta2 and 6.x-2.x-dev.

What version is the patch against?

The patch from #1 is not usable as it contains paths to a special theme.

The controls only make sense if JavaScript is enabled so actually they should be inserted by JavaScript after the page is loaded. We need to use the Drupal.theme.prototype way just like the pager does. I guess there's a problem with the ids for the controls? I don't quite understand how the counter is set for the slideshows. Also I'm confused by so many theme functions that call other theme functions...

This is far from ready but maybe it's a first step.

This is far from ready but maybe it's a first step.

i just hope the next version of Views_Slideshow is easy to theme...

I think for accessibility you should be using CSS to achieve this effect. Use text-indent to hide the text and add a background image using CSS.

Something I'm missing?

Here is an example I just knocked together to illustrate my point:

http://screencast.com/t/YWVhMGQ5MjUt

Here is the CSS for it:

.views_slideshow_previous,
.views_slideshow_pause,
.views_slideshow_play,
.views_slideshow_next {
  text-indent: -999px;
  display: block;
  background-repeat: no-repeat;
  background-position: 0 0;
  float: left;
  margin-right: 5px;
  width: 20px;
}

.views_slideshow_previous {
  background-image: url(../images/previous.png);
}

.views_slideshow_pause {
  background-image: url(../images/pause.png);
}

.views_slideshow_play {
  background-image: url(../images/play.png);
}

.views_slideshow_next {
  background-image: url(../images/next.png);
}

.views_slideshow_previous:active,
.views_slideshow_pause:active,
.views_slideshow_play:active,
.views_slideshow_next:active {
  background-position: 0 1px;
}

Icons are attached.

I have another patch waiting to be reviewed. If it gets in I'd be more than happy to work on this issue with you.

#713750: Reformatted code structure for coding standards and readability

Here's another one that looks like Coda's Slider.

http://screencast.com/t/OWFhYzYxZDE

.views_slideshow_previous,
.views_slideshow_pause,
.views_slideshow_play,
.views_slideshow_next,
.views_slideshow_pager .pager-item a {
  text-indent: -9999px;
  display: block;
  background-repeat: no-repeat;
  background-position: 0 0;
  float: left;
  margin-right: 5px;
  width: 18px;
  height: 18px;
}

.views_slideshow_pause,
.views_slideshow_play {
  display: none;
}

.views_slideshow_previous {
  background-image: url(../images/button_sprite.png);
  background-position: 0 0;
}

.views_slideshow_previous:hover {
  background-position: 0 -18px;
}

.views_slideshow_previous:active {
  background-position: 0 -36px;
}

.views_slideshow_next {
  background-image: url(../images/button_sprite.png);
  background-position: -18px 0;
}

.views_slideshow_next:hover {
  background-position: -18px -18px;
}

.views_slideshow_next:active {
  background-position: -18px -36px;
}

.views_slideshow_pager .pager-item a {
  background-image: url(../images/slider_inactive.png);
  margin-right: 0;
  background-position: 4px 4px;
}

.views_slideshow_pager .pager-item a.activeSlide {
  background-image: url(../images/slider_active.png);
}

Images attached.

Why would it be more accessable to use CSS background images? That's what the alt attribute is for. Anyway this is about themability to you can choose yourself how to do it.

I think it's way more accessable if the controls are inserted by JavaScript as there's no use in them without JavaScript.

Oh, and with your way, if you switch off the display of images, there's nothing at all displayed.

The play, pause, next and previous links don't have value without JavaScript so, yes, they should be added via JavaScript.

The pager for the slideshow should work without JavaScript though. This would be easy to implement and I think it should be the default.

What exactly is it that you can't achieve with the way things are at the moment?

Could you review a patch for me?

http://drupal.org/node/713750

Can anyone please address my issue here http://drupal.org/node/715362 ??

"I know its something complicated and dunno if i can achieve it with slideshow but i wanna give it a try anyway. So what i am trying to achieve is have my Taxonomy terms as Pager controls (instead of numbers) and each frame content (links,nodes, images etc) should be related to that particular Taxonomy term. So i am hoping to encapsulate a bunch of pages in just one slideshow block. Any thoughts? any similar module?"

Thanks

Thanks it works great now!

#11
Your slideshow controls are great by the way, but they dont seem to be 'clickable' in IE8.

They work perfectly in FF, IE7, Chrome etc.. just not IE8!

Any ideas??

I made an image-pager by adding a Custom text with a "img src" to a 1x1 px empty image (in my theme), I put it above my image for the slideshow and choose "thumbnails" for pager in the slideshow settings.
The rest is just css:

.views_slideshow_singleframe_pager div a img, .views_slideshow_singleframe_pager.thumbnails a.activeSlide img { 
	width: 10px; 
	height: 10px; 
	border: 0 none;
	margin: 0 2px;
	}
.views_slideshow_singleframe_pager .pager-item a {
	background: url(../img/pager.png) 0 0 no-repeat;
	}
.views_slideshow_singleframe_pager .pager-item a.activeSlide {
	background-position: -15px 0; 
	}

I just wish the prev/next buttons were possible to solve the same way... Will have a go at the preprocess function now. :S

Um, I think it is themable.... someone correct me if this is wrong.

I have a Views Slideshow running - it's a single_frame show. If you go digging in the Views_Slideshow module, you can find the "Contrib" folder. Digging a little further, I found this file:

views_slideshow / contrib / views_slideshow_singleframe / views_slideshow_singleframe.theme.inc

In it, somewhere in the middle, are a pile of theme functions defined for the slideshow controls.

<?php
/**
 * Themed Previous Control
 */
function theme_views_slideshow_singleframe_control_previous($id, $view, $options) {
  return '<a href="#" id="views_slideshow_singleframe_prev_' . $id . '" class="views_slideshow_singleframe_previous">' . t('Previous') . "</a>\n";
}

/**
 * Themed Pause Control
 */
function theme_views_slideshow_singleframe_control_pause($id, $view, $options) {
  return '<a href="#" id="views_slideshow_singleframe_playpause_' . $id . '" class="views_slideshow_singleframe_pause">' . t('Pause') . "</a>\n";
}

/**
 * Themed Next Control
 */
function theme_views_slideshow_singleframe_control_next($id, $view, $options) {
  return '<a href="#" id="views_slideshow_singleframe_next_' . $id . '" class="views_slideshow_singleframe_next">' . t('Next') . "</a>\n";
}

?>

I wanted to control the text in the pause area... actually - I want to introduce new text in that area, between the 'pause' and 'next' buttons. So I copy and pasted these functions into template.php. Rename them by replacing 'theme' with your theme's name. Then edit away!

e.g. Wanted to introduce a themable <span> beside the 'pause' button, so I copied its theme function into my template.php and edited it like this ('opus3' is our theme name):

<?php

/**
 * Themed Pause Control
 */
function opus3_views_slideshow_singleframe_control_pause($id, $view, $options) {

  $output = '<a href="#" id="views_slideshow_singleframe_playpause_' . $id . '" class="views_slideshow_singleframe_pause">' . t('Pause') . "</a>\n";
  $output .= '<span class="slideshow-ctrl-text">';
  $output .= 'My new text!';
  $output .= '</span>';
  return $output;

}


?>

This resulted in a <span> with my new text sitting right beside the pause button. It has a class I can attack with CSS to make it look nice n' pretty. ;)

Multiple ways listed here on how to theme the controls. Marking as fixed.

Thank you, psynaptic, for sharing the icons.

[EDIT]
Oops, I forgot to add the css to my theme info file, sorry for the dumb intrusion.
It works great and thank you for this very helpful thread. It would be great to include this in the documentation.
[/EDIT]

I am afraid it may not be good etiquette for me to add this to a closed issue.

I too would like to thank psynaptic for sharing the css and icons.

I am trying to implement the example in #9 and am having some problems.

I have added the images to the images folder in my custom zen theme folder and the views_slideshow.css to my theme folder with the necessary edits to where the images have been placed relative to the theme folder, but it is not working.

I noticed the VSS module has three views_slideshow.css files in various folders and presumed that the one in my theme folder would override the others but that does not seem to be happening.

Do I need to edit the css files in the module folder? Or am I doing something else wrong?

Any help would be appreciated. Thanks,

Izzy

Apologies for reopening this but I think that the initial issue of the "Pause" and "Resume" labels being controlled by javascript has not been resolved. I can see how one can remove the text altogether and replace it with images, but changing the text is still impossible without changing views_slideshow.js . I think the proposed patch by dnotes at #1 was working towards that direction. Am I wrong?

subscribe

please open a new issue if it's already set to closed.

#9 and #11

I am trying this by

1- uploading the icon folders to the images folder and
2- adding the code to local.css - theme Danland.

When I extract the icon/images they both become text files. I don't find icons or images.

And there is no change in the controls.

Is my process correct and if so any tips on what may be wrong? Thank you.

I did something similar with image replacement however the javascript does indeed replace any spans that you add to the controls if they are between the link tags. So it removes the span inside the play/resume link when you toggle between them.

subscribing

sub

Here's my theme for the controls, if it would be of use to anyone. Find image (sprite) for this menu attached to this post.

CSS:

.views-slideshow-controls-bottom{
	float: right;
	margin: -40px 8px 0 0;
	position: relative;
	z-index: 6;
	background: rgba(0,0,0,0.4);
	overflow: hidden;
	padding: 6px 5px;
	-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
}

.field-name-field-slider-slide{
	position: relative;
	z-index: 4;
}

.views-slideshow-controls-bottom a{
    width: 23px;
    height: 0;
    margin: 0 2px;
    padding: 20px 0 0;
    display: block;
    float: left;
    overflow: hidden;
    background-image: url(../images/control-slider.png); /* replace image path if necessary */
    background-repeat: no-repeat;
}

#views_slideshow_controls_text_previous_slideheader-block a{ background-position: 0 100% }
#views_slideshow_controls_text_pause_slideheader-block a{ background-position: -27px 100% }
#views_slideshow_controls_text_next_slideheader-block a{ background-position: -55px 100% }

#views_slideshow_controls_text_previous_slideheader-block a:hover{ background-position: 0 0 }
#views_slideshow_controls_text_pause_slideheader-block a:hover{ background-position: -27px 0 }
#views_slideshow_controls_text_next_slideheader-block a:hover{ background-position: -55px 0 }

I'm missing a pause/resume class in the current (D7) code. If this would be introduced in the code sometime in the future, you can add these lines in the stylesheet as well:

#views_slideshow_controls_text_resume_slideheader-block a{ background-position: -82px 100% }
#views_slideshow_controls_text_resume_slideheader-block a:hover{ background-position: -82px 0 }

I'm using the D7 version, but I guess these CSS-selectors are basicly the same.

EDIT: there's a patch for the D7-version: #1353994: Add "paused" class to controls for theming

#31 worked for me after some modifications to work on D6. Here is the final code I used after all the edits.
My changes were to #1 update the #ID-tags to the right names for D6 and #2 position the buttons on top of the image slideshow.

.views-slideshow-controls-top{
	float: right;
	margin: -40px 2px 0 0;
	position: relative; top: 42px;
	z-index: 700;
	background: rgba(0,0,0,0.4);
	overflow: hidden;
	padding: 6px 5px;
	-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
}

.field-name-field-slider-slide{
	position: relative;
	z-index: 4;
}

.views-slideshow-controls-top a{
    width: 23px;
    height: 0;
    margin: 0 2px;
    padding: 20px 0 0;
    display: block;
    float: left;
    overflow: hidden;
    background-image: url(../img/control-slider.png);
    background-repeat: no-repeat;
}

#views_slideshow_singleframe_prev_Promos-block_1 { background-position: 0 100% }
#views_slideshow_singleframe_playpause_Promos-block_1 { background-position: -27px 100% }
#views_slideshow_singleframe_next_Promos-block_1{ background-position: -55px 100% }

#views_slideshow_singleframe_prev_Promos-block_1:hover { background-position: 0 0 }
#views_slideshow_singleframe_playpause_Promos-block_1:hover{ background-position: -27px 0 }
#views_slideshow_singleframe_next_Promos-block_1:hover{ background-position: -55px 0 }

#views_slideshow_singleframe_playpause_Promos-block_1.views_slideshow_singleframe_play { background-position: -82px 100% }
#views_slideshow_singleframe_playpause_Promos-block_1.views_slideshow_singleframe_play:hover{ background-position: -82px 0 }

Styling I used for getting a similar result to post #9 by psynaptic :

.views-slideshow-controls-text-previous,
.views-slideshow-controls-text-pause,
.views-slideshow-controls-text-play,
.views-slideshow-controls-text-next {
  text-indent: -999px;
  display: block;
  background-repeat: no-repeat;
  background-position: 0 0;
  float: left;
  margin-right: 5px;
  width: 20px;
}

.views-slideshow-controls-text-previous {
  background-image: url(/sites/lthltd.com/files/images/slideshow/previous.png);
}

.views-slideshow-controls-text-pause {
  background-image: url(/sites/lthltd.com/files/images/slideshow/pause.png);
}

.views-slideshow-controls-text-play {
  background-image: url(/sites/default/files/images/slideshow/play.png);
}

.views-slideshow-controls-text-next {
  background-image: url(/sites/default/files/images/slideshow/next.png);
}

.views-slideshow-controls-text-previous:active,
.views-slideshow-controls-text-pause:active,
.views-slideshow-controls-text-play:active,
.views-slideshow-controls-text-next:active {
  background-position: 0 1px;
}

.views-slideshow-controls-text {
    display: block;
    float: none;
    margin: 0 auto;
    width: 100px;
}

Also used the following module to apply this css style to only this view:
http://drupal.org/project/cpv

Works fine on D7 with views and views slideshow.

thanks #33, works fine on d7 :)

33 works just fine.but the play button does not show when paused.

i haven't read all about the thread here... i just wanna give this link http://bit.ly/V2NbQC as alternative theming for views slideshow by Chris Shattuck.

hope this may help to some...

thanks

I would like apply the buttons as illustrated in #9 but I can't get the play button to appear. I realize antcw edited the js file... I am a freshmen at theming and editing the .js file ... and can't understand what exactly you guys are doing with that file specifically to make the pause and play button work in sync.

I have applied #33 css (drupal 7) and everything functions except the play button.

Also, when I apply the css in #11, nothing shows up... Is there an obvious reason for why I can see #33 and not #11? I wanted to implement the pager controls using this css:

.views_slideshow_pager .pager-item a {
  background-image: url(../images/slider_inactive.png);
  margin-right: 0;
  background-position: 4px 4px;
}

.views_slideshow_pager .pager-item a.activeSlide {
  background-image: url(../images/slider_active.png);
}