By karc2008 on

HI,

I integrated Views Slideshow on my site and it runs well, but after the displayed content, i want to add "previous", "next" and "Pause". It´s easily activated of course, but I don´t want them as text. I want to use buttons for them.

I found the plain text inside the file "views_slideshow_singleframe.theme.inc"

I changed the lines 99-101 from:

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";
}

to

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('<img src="/images/misc/previous.gif" width="37" height="32" alt="Zur&uuml;ck" title="Zur&uuml;ck" />') . "</a>\n";
}

It works well for the "Previous" and "Next"-Button.

But with pause and play I got problems, because they of get changed against each other. The script for this change is in the file "views_slideshow.js"

At line 100 it says:

      	  $('#views_slideshow_singleframe_playpause_' + settings.id).addClass('views_slideshow_singleframe_pause').removeClass('views_slideshow_singleframe_play').text('Pause');

When I´m jsut putting in something like
<img src="images/misc/pause.gif" width="29" height="32" alt="Anhalten" title="Anhalten" width="32" height="35" />
(instead of "Pause")

the output is just, that the whole line is displayed 1:1 as text. but not as the html-function (loading the image) it should do.

&lt;img src="images/misc/play.gif" width="29" height="32" alt="Fortsetzen" title="Fortsetzen" width="32" height="35" /&gt;</a>

I don´t know javascript.. is there an easy way to make this work. And to turn this &lt; into an "<" ?

⋅ Categories: Drupal 6.x

Comments

karc2008’s picture

karc2008 commented

An it was really simple (if one knows JQuery). Well I didn´t. But the solution is:

Instead of .text("Pause"), I just had to put it .html("my image HTML-Code").

drippydrop’s picture

drippydrop commented

If you don't want to hack the module itself you can put the functions in the theme template itself.

For example this is what I put in my template.php file within my theme:

/**
 * Views Slideshow: "previous" control.
 *
 * @ingroup themeable
 */
function THEME_views_slideshow_singleframe_control_previous($id, $view, $options) {

$path = drupal_get_path('theme', 'THEME');

  return '<a href="#" id="views_slideshow_singleframe_prev_' . $id . '" class="views_slideshow_singleframe_previous">' . t('<img src="'.$path.'/images/arrows/left_arrow.png" alt="Previous" title="Previous" />') . "</a>\n";
}

/**
 * Views Slideshow: "pause" control.
 *
 * @ingroup themeable
 */
function THEME_views_slideshow_singleframe_control_pause($id, $view, $options) {
// Not using
}

/**
 * Views Slideshow: "next" control.
 *
 * @ingroup themeable
 */
function THEME_views_slideshow_singleframe_control_next($id, $view, $options) {
$path = drupal_get_path('theme', 'THEME');

  return '<a href="#" id="views_slideshow_singleframe_next_' . $id . '" class="views_slideshow_singleframe_next">' . t('<img src="'.$path.'/images/arrows/right_arrow.png" alt="Next" title="Next" />') . "</a>\n";
}

I commented out the pause function because I just wanted left and right arrows.

andb’s picture

andb commented

You've posted a nice way to do this. You might want to alter the t() function though. I'd suggest altering the return from

return '<a href="#" id="views_slideshow_singleframe_next_' . $id . '" class="views_slideshow_singleframe_next">' . t('<img src="'.$path.'/images/arrows/right_arrow.png" alt="Next" title="Next" />') . "</a>\n";

to

return '<a href="#" id="views_slideshow_singleframe_next_' . $id . '" class="views_slideshow_singleframe_next">' . '<img src="/' . $path. '/images/arrows/left_arrow.png" alt="' . t('Next') . '" title="' . t('Next') . '" /></a>';

This makes the translation a bit cleaner. If your goal is to have a different image for different languages, for example if the image has text on it, then perhaps you could simply name the arrows with the language extension, for example left_arrow_EN.png or left_arrow_FR.png and alter the image used in the function based on appending the language code from the global $language variable.

Also note the '/' at the start of img src. The drupal_get_path() function wont return the leading slash, so the code as it is would only load the image if the slideshow was on the front page.