JQuery and PHP - change background image

Question

I am trying to get a background image to change on the click of a link. In the page, there is a php function that gets all of the files (just images) from a directory and writes the following for each item:

print("
    $(\"#photo" . "$curimage\").click(function(e){
    e.preventDefault();
    $(\"#galleryPhoto\").css(\"background-image\", \"url(images/ints/$file)\");
        });
");

The entire code (for just one item) ends up looking like this:

<script type="text/javascript">
        $(function(){   

            $("#photo1").click(function(e){
                e.preventDefault(); 
                $("#galleryPhoto").css("background-image", "url(images/ints/001.jpg)");
            });

        return false;    
        }); 
</script>

In the body of the page, there is another php section that does the same thing, but this time it provides the link:

print("<a id=\"photo" . "$curimage\" href=\"#\" >Change</a>");

This, of course, gives a completed link of:

<a id="photo1" href="#" >Change</a>

In addition, there is a div with the id of galleryPhoto, with the following settings in the css:

<div id='galleryPhoto'>
        Main photo here
</div>

#galleryPhoto {
    position: relative;
    height: 300px;
    width: 600px;
    background-color: black;
    background-image: url(../images/ints/blank.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    margin: 20px;
}

But when the link is clicked, the background image does not change. I am clueless on what I am doing wrong. I have tried so many different things that the code is probably all messed up now, but I don't know why (JQuery newbie, sorry).

Can someone please point me in the right direction?

Answer 1

Since your html is being generated dynamically through PHP ensure that you are using the .on function. So anytime that your html is being generated dynamically it's best to use the .on function.

So instead of using this:

 $("#photo1").click(function(e){
      e.preventDefault(); 
      $("#galleryPhoto").css("background-image", "url(images/ints/001.jpg)");
 });

You would use this:

 $(document).on('click', '#photo1', function(e){
      e.preventDefault(); 
      $("#galleryPhoto").css("background-image", "url(images/ints/001.jpg)");
 });

Answer 2

You have to set the height and width of your #galleryPhoto div because Background image base its height and width on it's container. Unlike <img> takes the image height and width if not defined