CODEWITHSUNDEEP
jquerycsswordpressonclickslideshow
dominotrix
dominotrix

Reputation: 367

Wordpress - Show an image when clicked

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

Upvotes: 0

Views: 3231

Answers (1)

dominotrix
dominotrix

Reputation: 367

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!

Upvotes: 0

Related Questions