從網格視圖切換到列表視圖使用MixItUp jquery插件

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

});