• 5 Subscribers

Wordpress Version: 4.7
Theme: Elos


I am currently working on a new Project in Wordpress Version 4.7 (Theme: Elos). Now I am at a Part where Workers are listed and an image should change when you click their Field (check my atachment). I heard of ajax but I am not sure how to do this, I never have done it before.


I need to get that working without reloading the page.

1 answers in total

MacPrawn Posted at 2017-01-11 20:20:57Z

Ok, so if the theme doesn't have the functionality out of the box, you will need to make a child theme - if for nothing else but load your own javascript code...

I see a few ways to approach this, in no particular order:

  • You could output both images in your template, but one with a special CSS class that would hide it on page load. Then using javascript, you could simply hide the visible image, and show the hidden one.
  • You could output your image with a special data attribute (i.e. "data-hover-image='URL'") and use that to simply swap your image's "src" attribute with javascript. (remember to keep a copy of the original src value so you can swap it back!)
  • Finally, yes, you could go ajax. Honestly though, for this, I think it's overkill: you'll generate one network call for your ajax call which will return the new image's URL. You'll then somehow install this on the page, which will generate a second network call to get the image itself... Especially if this is for mouseover/mouseout events, it won't make for a nice experience.

Let us know if you need more help setting-up one of these solutions...

Hope this helps!

Answer this questsion