all. I am developing a Wordpress theme and I need to have a random background image display on the home page with specific text for each image.
I have installed the Background Manager plugin (http://wordpress.org/plugins/background-manager/), but it only supports displaying an overlay on image sets, and I don't see an easy way to customize it.
As an alternative, I found this website article (http://wpdevsnippets.com/full-page-screen-background-image-slideshow-easy/), which covers a basic script to show random background images. The only way I can imagine to make it work for the site is to add a custom content type to Wordpress for background images, and then allow for a featured image and an excerpt for those content items.
Where I'm lost is in how to call these images from a template page (outside of the loop), and then later on, within the page content, call the title or caption from the image that was randomly selected.
Here's all of the code from that other site's example. Any help or pointers would be a huge help.
HTML:
<div id="full-bg">
<img class="full-bg" src="http://wpdevsnippets.com/snippets-media/bg/hires-bg1.jpg" />
<img class="full-bg" src="http://wpdevsnippets.com/snippets-media/bg/hires-bg2.jpg" />
<img class="full-bg" src="http://wpdevsnippets.com/snippets-media/bg/hires-bg3.jpg" />
<img class="full-bg" src="http://wpdevsnippets.com/snippets-media/bg/hires-bg4.jpg" />
</div>
CSS:
html, body {
height: 100%;
}
#full-bg img {
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
z-index:-10;
opacity: .9;
}
Javascript:
<script type="text/javascript">
jQuery(document).ready(function($) {
/* random ordering of images */
var $fullBGs = $("#full-bg img"),
$copies = $fullBGs.clone(true);
[].sort.call($copies, function() { return Math.random() - 0.5; });
$copies.each(function(i){
$fullBGs.eq(i).replaceWith(this);
});
setInterval(function(){
$('#full-bg img.active').animate({opacity:0},500, function(){
$(this).removeClass('active');
})
if($('#full-bg img.active').next().length>0)
$('#full-bg img.active').next().animate({opacity:1},500).addClass('active');
else
$('#full-bg img:first').animate({opacity:1},500).addClass('active');
} ,4000);
$('#full-bg img:first').animate({opacity:1},400).addClass('active');
});
</script>