带有多年以来从mysql数据库过滤器的组合图像库

Question

我有一个数据库表，其中包含主题，年份和图像链接列。有点像下面。

subject     |    year   |  image_link
------------------------------------------------
ABC1        |    1988   |  img/image1.jpg
ABC2        |    1988   |  img/image2.jpg
ABC3        |    1992   |  img/image3.jpg
ABC4        |    1994   |  img/image4.jpg
ABC5        |    1994   |  img/image5.jpg
ABC6        |    1996   |  img/image6.jpg
ABC7        |    1998   |  img/image7.jpg

我想按年份显示此数据和过滤器。

如果具有静态图像链接，则为以下代码。

如何与mysql表中的数据动态地使用它？

HTML

<div class="container">

    <ul id="filters" class="clearfix">
        <li><span class="filter active" data-filter=".app, .card, .icon, .logo, .web">All</span></li>
        <li><span class="filter" data-filter=".app">App</span></li>
        <li><span class="filter" data-filter=".card">Card</span></li>
        <li><span class="filter" data-filter=".icon">Icon</span></li>
        <li><span class="filter" data-filter=".logo">Logo</span></li>
        <li><span class="filter" data-filter=".web">Web</span></li>
    </ul>

    <div id="portfoliolist">

        <div class="portfolio logo" data-cat="logo">
            <div class="portfolio-wrapper">             
                <img src="img/logo/5.jpg" alt=""/>
                <div class="label">
                    <div class="label-text">
                        <a class="text-title">Bird Document</a>
                        <span class="text-category">Logo</span>
                    </div>
                    <div class="label-bg"></div>
                </div>
            </div>
        </div>              

        <div class="portfolio app" data-cat="app">
            <div class="portfolio-wrapper">         
                <img src="img/1.jpg" alt=""/>
                <div class="label">
                    <div class="label-text">
                        <a class="text-title">Visual Infography</a>
                        <span class="text-category">APP</span>
                    </div>
                    <div class="label-bg"></div>
                </div>
            </div>
        </div>      

        <div class="portfolio web" data-cat="web">
            <div class="portfolio-wrapper">                     
                <img src="img/web/4.jpg" alt=""/>
                <div class="label">
                    <div class="label-text">
                        <a class="text-title">Sonor's Design</a>
                        <span class="text-category">Web design</span>
                    </div>
                    <div class="label-bg"></div>
                </div>
            </div>
        </div>              

Javascript

<script>
$(document).ready(function(){
 $(function () {
 var filterList = { 
    init: function () {     
        // MixItUp plugin
        // http://mixitup.io
        $('#portfoliolist').mixItUp({
            selectors: {
          target: '.portfolio',
          filter: '.filter' 
      },
      load: {
          filter: '.app' // show app tab on first load
        }     
        });                             

    }

  };

   // Run the show!
    filterList.init();

 });    
});
</script>

我尝试使用静态数据（手动输入图像链接和其他显示文本，并且可以正常工作。

但是我想按年份在数据库中创建过滤器，然后按年份显示相应的图像。

我如何使其正常工作？

我目前使用以下php代码。但这样只能看到带有年份按钮的过滤器。没有看到图像。

<div class="container">
    <ul id="filters" class="clearfix">
        <li><span class="filter active" data-filter=".app, .all, .icon, .logo, .web">All</span></li>
       <?php
       $query = "select * from $performances_table group by year order by year asc";
       $result = $database->get_results($query);
         foreach($result as $data){     
            $year = $data['year'];
       ?>     
          <li><span class="filter" data-filter=".<?php echo $year;?>"><?php echo $year;?></span></li>   
      <?php } ?>  
   </ul>    

使用此代码，可以正确创建按年份过滤按钮链接。但是我被卡在如何使用图像显示部分。循环中（上面的foreach）不起作用...（更换过滤器...）

什么是图像显示部分的代码？

<div class="portfolio <?php echo $data['year'];?>" data-cat="<?php echo $data['year'];?>">
        <div class="portfolio-wrapper">
            <img src="img/<?php echo $data['image_link'];?>" alt="" />
            <div class="label">
                <div class="label-text">
                    <a class="text-title"><?php echo $data['subject'];?></a> 
                    <span class="text-category"><?php echo $data['year'];?></span>
                </div>
            <div class="label-bg"> </div>
            </div>
        </div>
     </div>

Answer 1

您可以在循环中生成两个部分并分配变量，在这之后，您可以在它们各自的部分使用两个变量。

<ul id="filters" class="clearfix">
<li><span class="filter active" data-filter=".app, .all, .icon, .logo, .web">All</span></li>
<?php
$thumbnail = $img_gallry = '';
$query = "select * from $performances_table group by year order by year asc";
$result = $database->get_results($query);
foreach($result as $data){
$year = $data['year'];
$thumbnail .= '<li><span class="filter" data-filter=".'.$year.'">'.$year.'</span></li>';
$img_gallry .= '<div class="portfolio '.$year.'" data-cat="'.$year.'"><div class="portfolio-wrapper"><img src="img/'.$data['image_link'].'" alt="" /><div class="label"><div class="label-text"><a class="text-title">'.$data['subject'].'</a><span class="text-category">'.$data['year'].'</span></div><div class="label-bg"> </div></div></div></div>";
?>
<?php } ?>
<?php echo $thumbnail; ?>
</ul>