Wordpress - Show an image when clicked

Question

I have made this page:

http://vasikaridis.gr/index2.php/?page_id=21725

At the left you can see a vertical slider. These are posts. And the thumbnail is the post's featured image.

At the right side, you can see a div which has as a background-image (css) the url of the last post from the left slider.

All I want is when someone clicks a thumbnail, to change the background-image src from the right div, to that clicked image.

Is this possible? Cause I have no idea how to fix this.

Thanks in advance!

Vagelis

EDIT: The url of the featured image is fetched with this code:

<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'thumbnail') ); ?>

So then I do this:

<div id="fbg" style="background:url('<?php echo $url ?>') center center no-repeat;"></div>

But how am I suppose to make the code dynamically change the $url when I click the thumbnail?

See full code here: http://pastebin.com/18G0Pa9P

Possible duplicate. stackoverflow.com/questions/18708439/… — Luís P. A.
Do you mean something like this? jsfiddle.net/Kirito/y0g5rd1e — roemel
@Roman Not really. :/ This works, but I do not know the url of the images. In your example the url is given manually. I want the url to be fetched dynamically. — dominotrix
So you want to get the url which is called when you clicked on one of the images on the left side? — roemel
fetched from where? try saving the image url in an extra attribute and swap it when needed — Cerlin

dominotrix dominotrix · Accepted Answer · 2015-01-08T09:02:44

For anyone that have the same issue:

    <script>
(function($){
$('.img').click(function(){
  var image = $(this).attr('src');
  document.getElementById("finalimg").src=image;
});
})(jQuery);
    </script>

The above script says that whenever the thumbnail (.img) is clicked, then take that thumbnail's src and store it to the variable 'image'. Then go to the image with id finalimg and replace its src with the url stored in the variable 'image'.

So everything works as intended.

Thanks everyone for your time and help!

Wordpress - Show an image when clicked

1 Answers