Styling Views Slideshow
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ück" title="Zurü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.
<img src="images/misc/play.gif" width="29" height="32" alt="Fortsetzen" title="Fortsetzen" width="32" height="35" /></a>
I don´t know javascript.. is there an easy way to make this work. And to turn this < into an "<" ?
SOLVED
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").