jQuery Ideas for Featured Article on Wordpress
I'm trying to do this in Wordpress: http://i.imgur.com/dELCMH7.png
Basically there are six 'featured' articles with their respective thumbnails on the right. When I click on the thumbnail on the right, I want it to appear bigger in the 'main' image spot, swapping the thumbnail with what was there previously. Can you guys recommend a simple way to do this- any plugins, etc?
Thanks a ton.
Solutions
I don't think adding bootstrap will find you resolve. If I'm understanding correctly, you want to replace the
large image
with the image that was clicked on. When that happens, you also want to replace the thumbnail you clicked on with the image that is
currently the mainimage
, however, use a thumbnail.
$('.feature').click(function(){
/* The SRC of the image you want to use as the mainimage */
var newImg = $(this).find('img').prop('src');
/* The SRC of the mainimage you want to use as the new featured image */
var oldImg = $('#mainstory').find('img').prop('src');
/* Change the SRC of the current #mainstory image to the one from the featured image */
$('#mainstory').find('img').prop('src', newImg);
/* Change the SRC of the clicked featured image to the SRC from the mainimage
$(this).find('img').prop('src', oldImg);
});
Alternatively, you can supply certain heights/widths to get the correct size. If you didn't create the image with multiple sizes, you can by using add_image_size().
You can use bootstrap it offers some nice feature out of the box and is easy to use, once you download it you just do this to include it :
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>