0

我目前正在使用 Wordpress 开发一个网站。我已经达到了我无法理解的程度。我正在使用 Isotope 在我的网站的主要部分创建和过滤我的作品。现在，如果观众点击它，我想快速预览该作品。我想在选定的作品之后插入一个新的同位素项目，但每次尝试时我的网格都会崩溃或作品出现在网格后面。

    <h1>Isotope - packery layout mode</h1>
<div class="container">
<div class="thumbs masonry">


  <div class="project small"></div>
  <div class="project small "></div>
  <div class="project small"></div>
     <div class="project small second">
    <div class="title">Project 02</div>
    <div class="slide-show"><ul class="slides">
<li class="flex-active-slide" style="width: 100%; float: left; margin-right: -100%; position: relative; display: list-item;"><img src="slide_01.jpg"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative;"><img src="slide_02.jpg"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative;"><img src="slide_03.jpg"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative;"><img src="slide_04.jpg"></li>
</ul></div>
    <div class="description">orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam</div>
    </div>
  <div class="project small"></div>
  <div class="project small"></div>
  <div class="project small"></div>
  <div class="project small"></div>
  <div class="project small"></div>
  <div class="project small"></div>
  <div class="project small">hello</div>
</div>
</div>

我的CSS：

.thumbs.masonry:after {
  content: '';
  display: block;
  clear: both;

}
#content .project.small{    
    width: 22.7%;
    height: auto;
    display: block; 
    margin: 0 2% 20px 0;    
    padding-bottom: 0;
    cursor: pointer;
    float: left;        
}

#content .project.small.width2{ 
    width: 100%;
    height: 300px;
    background-color: red;  
    position: absolute;
    left: 0;
}

#content .project.small img{
    width: 100%;
    height: auto;   
}

#content .project.small .title {
    display: none;  
    color: #FFF;
    position: absolute;
    bottom: 0;
    left: 0;    
    padding: 0;
    font-size: 0.917em;     
    width: 100%;
    font-size: 11px;
    line-height: 1.1em;
    background: transparent url(images/black_alpha_50.png); 
}

#content .project.small.selected .title{
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1;
    display: block;
    visibility: visible;
}

#content .project.small .title span{
    padding: 12px 17px 12px 17px;
    display: block;
}

javascript:

var container = jQuery('.thumbs.masonry');
        var colW = container.width() * 0.2475;      
        container.isotope({ 
        animationEngine: 'jquery',  
        resizable: false,
        layoutMode: 'packery',
        packery: {
            //columnWidth: colW
}

和

function gridResize() { 
    // update columnWidth on window resize
    var container = jQuery('.thumbs.masonry');
    var colW = container.width() * 0.2475;  
    container.isotope({
        resizable: false,
        packery: {
            //columnWidth: colW
        }
    });         
}

我已经用 codepen.io 试过了：http ://codepen.io/anon/pen/ogwEJO 红色方块将是选定的大作品。那个有效。

我试图在 Wordpress 中做同样的事情，但红色方块总是消失。

我在上班时需要的帮助是实现我的想法。也许还有另一种解决方案。

谁能帮我解决这个问题？我真的很感激任何建议。

提前致谢。

  • 双桅船
4

1 回答 1

0

layout单击元素并应用具有新大小的类后用作选项，这里有一个示例：http : //isotope.metafizzy.co/methods.html#layout

于 2015-01-30T01:01:10.623 回答