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?