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?

"But when the link is clicked, the background image does not change." At css path to image is ../images/ints/blank.jpg , at click event path to image is images/ints/001.jpg ? Two different folders named "images" at server ? — guest271314
– guest271314, Commented Dec 1, 2015 at 23:57

James111 · Accepted Answer · 2015-12-01 23:52:43Z

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)");
 });

answered Dec 1, 2015 at 23:52

James111

16k17 gold badges89 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Apolymoxic Over a year ago

Awesome, that worked. I don't know why, but it did. I would have never thought to do that. Thank you!

James111 Over a year ago

I was in the same situation a while back, don't worry! I would suggest using the .on('click' instead of the .click( from now on as you might have the same problem and forget that your html is being dynamically generated. With the .on('' you can use it for all jquery methods (change, mouseover, etc...) - api.jquery.com/on @Apolymoxic

Drixson Oseña · Accepted Answer · 2015-12-01 23:42:58Z

0

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

answered Dec 1, 2015 at 23:42

Drixson Oseña

3,6313 gold badges25 silver badges36 bronze badges

1 Comment

Apolymoxic Over a year ago

I did that. Sorry... I should have clarified. I have added those settings to show how I defined the #galleryPhoto

Collectives™ on Stack Overflow

JQuery and PHP - change background image

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related