Digital Pro – replace main page image with slider?

[neilc]

I'm developing a site on Digital pro and the person I'm doing it for has now decided they want "the picture on the front page to move" - ie. a slider.

Given this image appears to be put in place and sized by a jquery, what is the easiest was to replace it with a slider to which the users can get access to to change the images/messages etc?

Thanks

[Brad Dalton]

Link to your site please.

1. You would need to give the users access to plugin settings.

2. The code required to replace the image with a slider is not so simple and requires a tutorial.

---

Tutorials for StudioPress Themes.

[Tal]

I'm wondering this also...

Is there a similar theme that will allow a slider/rotating images in place of the main front page image that would be easier to use?

[Genesis Developer]

I have pro tips for this. I used Genesis Responsive Slider plugin.

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[Brad Dalton]

If you only want to replace the image with a slider and not display the widget content over the slider image, you can use the following code:

add_action( 'genesis_after_header', 'slider', 5 );
function slider() {
if ( function_exists( 'soliloquy' ) ) { soliloquy( '81' ); 
    }
}

And then remove the PHP code from the front-page.php file for the front-page-1 widget area and background image.

---

Tutorials for StudioPress Themes.

[Toon61]

The main thing the front-page-1 widget does is use a simple jQuery script to get an image and stretch it over the entire browser window. This script is called backstretch, and it uses a companion script to show the actual image: backstretch-set.
If you want more then 1 image to show in a slideshow manner, just alter the 'backstretch-set.js' that you can find in the 'js' folder of the child theme.

I changed mine in something like this:

jQuery(document).ready(function($) {
	$(".front-page-1").backstretch([
	"http://example.com/wp-content/themes/digital-pro/images/front-page-1_01.jpg",
	"http://example.com/wp-content/themes/digital-pro/images/front-page-1_02.jpg",
	"http://example.com/wp-content/themes/digital-pro/images/front-page-1_03.jpg"
	], {duration: 3000, fade: 1750});
});

The original file was this:

jQuery(document).ready(function($) {
 	$(".front-page-1").backstretch([BackStretchImg.src]);
});

As you can see, I added some additional parameters for duration and fade time.
It is not a fancy solution with a nice dashboard GUI or using a third party slider plugin, and you have to edit this script whenever you like to change the images.
But it works!

I came to this solution by looking at the original jQuery plugin's site (http://srobbin.com/jquery-plugins/backstretch/).

[Author]

Posts