Question

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

基本上有六个“精选”文章，右侧各有缩略图。当我点击右边的缩略图时，我希望它在'主'图像点中显得更大，用之前的内容交换缩略图。你们可以推荐一种简单的方法 - 任何插件等吗？

非常感谢。

Answer 1

你可以使用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>

Answer 2

我不认为添加bootstrap会让你解决。如果我理解正确，您想要将大图像替换为单击的图像。发生这种情况时，您还希望将您单击的缩略图替换为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()。

关于Wordpress的精选文章的jQuery想法

2 个答案: