Question

我目前正在使用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中做同样的事情，但红色方块总是消失。

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

任何人都可以帮我解决这个问题吗？我真的很感激任何建议。

提前致谢。

双桅

Answer 1

点击元素后使用layout作为选项并应用具有新尺寸的类，此处有一个示例：http://isotope.metafizzy.co/methods.html#layout

创建新的同位素项并插入外来内容

1 个答案: