I am building a wordpress site using jQuery with cycle plugin to cycle through some posts.
I have an image used as a full background, with this css:
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
I have inserted the first image attachment url into the img.bg with a javascript from the loop. However, this understandably only works once, at page load.
This is the javascript:
$(function () {
$('.bg').attr('src', '<?php get_image_url(); ?>');
});
What I need, I guess is to fire off the script with each iteration of the cycle script, because the source shows that the get_image_url() function supplies the script with the unique url in each article div. In the end, I even want some navigation buttons to move back and forth, switching the posts and the background simultanuously.
Any suggestions?
As for now, I use $(".bg").prependTo(document.body);
to get the background images out of the article div, and then starting the cycle. This works, although some more problems might mount on the way.