0

我正在尝试在 Wordpress 中执行此操作：http: //i.imgur.com/dELCMH7.png

基本上有六篇“特色”文章，右侧有各自的缩略图。当我单击右侧的缩略图时，我希望它在“主”图像点中显得更大，将缩略图与之前的缩略图交换。你们能推荐一个简单的方法来做到这一点 - 任何插件等？

万分感谢。

4

2 回答 2

0

您可以使用bootstrap，它提供了一些开箱即用的好功能并且易于使用，一旦您下载它，您只需执行以下操作即可包含它：

<!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>
于 2013-06-16T21:02:46.457 回答
0

我认为添加引导程序不会让您解决问题。如果我理解正确，您想用单击的图像替换大图像。发生这种情况时，您还希望将单击的缩略图替换为图像currently the mainimage，但是，请使用缩略图。

$('.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);
});

或者，您可以提供某些高度/宽度以获得正确的尺寸。如果您没有创建具有多种尺寸的图像，则可以使用add_image_size()。

于 2013-06-16T21:18:20.347 回答