Search code examples
phpjavascriptjquerywordpresscycle

Changing image src outside div running jquery cycle


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?


Solution

  • 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.