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.


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.

    /* 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>
    <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">
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
Tags: Jquery / Wordpress / Themes

Similar questions

wordpress deploying solution, ideas?
I develop on a local machine a Wordpress site and I'm now looking for a mechanism to deploy it easy and fast. I'm thinking about a DEV environment (located on my local machine), a STAGING environment (a subdomain on the client page, maybe staging.example.com) and of course a LIVE environment (example.com)! My current workaround: As I work with Apta...
any ideas why facebook like button do not display non-English letters on a wordpress blog?
All non-English (Lithuanian) elements like š,ė,ž,č and more are displayed as code which doesnt look nice. I added a facebook like button to my wordpress blog, which looks like this: You can see that I added locale=lt_LT (I'm from Lithuania) DOCTYPE: Im using this: Can it be a problem with DOCTYPE or something else?
Two columns layout in one wordpress loop, any ideas?
My client wants the layout like this (click here), but I've tried a lot of ideas and can't get the result. I'm using wordpress for getting posts by date (this is one loop), also my theme is using this jQuery Masonry Library to get two columns layout (I can disable it if it's necessary). So I have only two authors, and now I need to place each autho...
Including wordpress on outside page is killing pagespeed- any ideas?
I am using a php function to include a snippet of the latest post from my blog page (wordpress) on my home page, which is not wordpress. The actual code i am using is: I dont have any other php on the page anywhere...not even at the very top, in the header, etc. the url of the page is http://www.uniconutrition.com . When I remove this code from the...
need ideas for remote authentication (Wordpress)
I need to redirect authenticated users from Wordpress site #1 to Wordpress site #2, and have them be already authenticated for site #2 when they land there. IOW, I don't want them to have to authenticate twice just because I've relocated their app from #1 to #2. The Wordpress user tables will be replicated between the 2 sites, which may or may not ...
My MAMP Pro trial expired, and now my Wordpress install isn't working, any ideas?
I've recently downgraded from MAMP Pro to MAMP and noticed that my Wordpress database is gone. I found this tidbit from MAMP Pro's forum, http://forum.mamp.info/viewtopic.php?f=6&t=7416 MAMP PRO 1.7.2 is using this databse: /Library/Application Support/living-e/MAMP PRO/db/mysql MAMP PRO 1.7.2 is using this databse: /Library/Application Support...

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.