Question

我在我的网站上使用jquery MixItUp来显示图像和视频。它在网格视图中工作正常，过滤也没关系，但我不明白如何通过单击按钮我可以将视图从网格切换到列表，找不到解决方案......

这是我的HTML：

<div class="bloc_1_medias">
    <ul id="Grid">
        <li class="mix photos"><img src="http://eofdreams.com/data_images/dreams/image/image-01.jpg" class="photo_medias"></li>
        <li class="mix photos"><img src="http://eofdreams.com/data_images/dreams/image/image-01.jpg" class="photo_medias"></li>
        <li class="mix photos"><img src="http://eofdreams.com/data_images/dreams/image/image-01.jpg" class="photo_medias"></li>
        <li class="mix photos"><img src="http://eofdreams.com/data_images/dreams/image/image-01.jpg" class="photo_medias"></li>
        <li class="mix videos"><iframe width="233" height="133" src="//www.youtube.com/embed/gg1RBO1Cj4Y" frameborder="0" allowfullscreen></iframe></li>
        <li class="mix photos"><img src="http://eofdreams.com/data_images/dreams/image/image-01.jpg" class="photo_medias"></li>
        <li class="mix videos"><iframe width="233" height="133" src="//www.youtube.com/embed/gg1RBO1Cj4Y" frameborder="0" allowfullscreen></iframe></li>
        <li class="mix photos"><img src="http://eofdreams.com/data_images/dreams/image/image-01.jpg" class="photo_medias"></li>
        <li class="mix photos"><img src="http://eofdreams.com/data_images/dreams/image/image-01.jpg" class="photo_medias"></li>
        <li class="mix videos"><iframe width="233" height="133" src="//www.youtube.com/embed/gg1RBO1Cj4Y" frameborder="0" allowfullscreen></iframe></li>
        <li class="mix photos"><img src="http://eofdreams.com/data_images/dreams/image/image-01.jpg" class="photo_medias"></li>
        <li class="mix photos"><img src="http://eofdreams.com/data_images/dreams/image/image-01.jpg" class="photo_medias"></li>
        <li class="mix photos"><img src="http://eofdreams.com/data_images/dreams/image/image-01.jpg" class="photo_medias"></li>
        <li class="mix videos"><iframe width="233" height="133" src="//www.youtube.com/embed/gg1RBO1Cj4Y" frameborder="0" allowfullscreen></iframe></li>
        <li class="mix photos"><img src="http://eofdreams.com/data_images/dreams/image/image-01.jpg" class="photo_medias"></li>
   </ul>
</div>

<span class="medias_filtre_titre">Filter by : </span>
<span class="filter" data-filter="photos">PHOTOS</span> | 
<span class="filter" data-filter="videos">VIDEOS</span> | 
<span class="filter" data-filter="photos videos">DATES</span>

<div class="switch_medias">
    <img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/grid.jpg" style="vertical-align:middle;background-color:blue;padding:5px" id="GoGrid" class="button.layout"/> | 
    <img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/list.jpg" style="vertical-align:middle;background-color:blue;padding:5px" id="GoList" class="button.layout"/>
</div>

我在点击“list.jpg”图片时尝试切换到列表，并在点击“grid.jpg”时切换到网格。

我不知道要添加到我的Js和Css中。

这是我的JS：

$(function(){


  $('#Grid').mixitup()({

    layoutMode: 'grid',
    targetDisplayGrid: 'inline-block',
    targetDisplayList: 'block',
  });

});

和jsFiddle：

http://jsfiddle.net/aaWLJ/

Answer 1

你的jQuery中有一些语法错误。我已经更正了它们，您还可以在this FIDDLE上看到“视图切换”的实现。

$(function(){

  $('#Grid').mixitup({

    layoutMode: 'grid',
    listClass: 'list',
    gridClass: 'grid',
    targetDisplayGrid: 'inline-block',
    targetDisplayList: 'block'
  });

    $('img#GoList').on('click', function(){
        $('#Grid').mixitup('toList');
    });

    $('img#GoGrid').on('click', function(){
        $('#Grid').mixitup('toGrid');
    });

});

使用MixItUp jquery插件从网格视图切换到列表视图

1 个答案: