Adding text for the Horizontal thumbnails

You can make your horizontal thumbnails to show the title of the slides under the thumbnail images, if you would open up this file:

WordPress

\wp-content\plugins\nextend-smart-slider2-full\plugins\nextendsliderwidgetthumbnail\horizontal\horizontal.php

Joomla

\plugins\nextendsliderwidgetthumbnail\horizontal\horizontal.php

Around line 59. find this code:

$html .= '<div onclick="njQuery(\'#' . $id . '\').smartslider(\'goto\',' . $i . ',false);" class="' . $class . ($slider->_slides[$i]['first'] ? ' active' : '') . '" style="' . $style . 'background-image: url(\'' . $slider->_slides[$i]['thumbnail'] . '\')"></div>';

Change it to this:

$html .= '<div onclick="njQuery(\'#' . $id . '\').smartslider(\'goto\',' . $i . ',false);" class="' . $class . ($slider->_slides[$i]['first'] ? ' active' : '') . '" style="' . $style . 'background-image: url(\'' . $slider->_slides[$i]['thumbnail'] . '\')"><div class="horizontal-thumbnail-title">'.$slider->_slides[$i]['title'].'</div></div>';

Then get this file:

Joomla

\plugins\nextendsliderwidgetthumbnail\horizontal\horizontal\style.css

WordPress

\wp-content\plugins\nextend-smart-slider2-full\plugins\nextendsliderwidgetthumbnail\horizontal\horizontal\style.css

And add some extra style to it:

.nextend-thumbnail{
	position:relative;
}
.horizontal-thumbnail-title{
	position:absolute;
	bottom:-20px;
	left:0;
	color:white;
	z-index:1;
}

You could change the horizontal-thumbnail-title as you would like to have it. Remember the bottom position’s number for the next step.

Open this file:

Joomla

\plugins\nextendsliderwidgetthumbnail\horizontal\horizontal\script.js

WordPress

\wp-content\plugins\nextend-smart-slider2-full\plugins\nextendsliderwidgetthumbnail\horizontal\horizontal\script.js

Look for this code around line 62.:

var height = this.thumbnails.outerHeight(true);

And give the bottom position’s number to it:

var height = this.thumbnails.outerHeight(true) + 20;

Then go to your slider and click on Refresh Cache to see the changes on the frontend too.
thumbnail