Question

我有一个带有某些菜单的网站。项目是菜单栏中的菜单之一。在项目中，有更多子菜单，如全部，住宅，办公室，零售店，酒店，医院，会所和学校。它具有后端管理面板。如果我根据类别在后端上传了图像，它将显示在首页上。假设我单击所有菜单，那么所有图像都显示在该页面上，这很好。假设如果我单击住宅菜单，那么住宅图像将与办公室图像一起显示，而办公室图像也将以隐藏模式显示。但是我不要如果我单击“住宅”，则只会显示该图像。请帮助我。

<?php include("links/top.php");?>

<body>
  <?php include("links/menu.php");?>

  <ul class="category-filter white">
    <li class="selected"><a style="color:#ae916b; z-index:999999;" href="#all">All</a></li>
    <?php
    $se=mysql_query("select * from projects_cat");
    while($res=getAssoc($se)){
    ?>
      <li>
        <a style="color:#ae916b; z-index:999999;" href="#<?php echo $res['id'];?>">
          <?php echo $res['title'];?>
        </a>
      </li>
      <?php } ?>



  </ul>
  <!-- Grid -->
  <div class="grid grid--portfolio">
    <?php
$pr=mysql_query("select * from projects");
while($prj=getAssoc($pr)){
?>
      <article class="grid__caption" data-category="all <?php echo $prj['category'];?>">
        <a href="uploads/images/<?php echo $prj['image'];?>" class="overlay group2" data-background="uploads/images/<?php echo $prj['image'];?>">
          <!--<div class="content">
                <h2>Bottom caption</h2>
                <p>Curabitur blandit tempus porttitor.</p>
            </div>-->
        </a>
      </article>
      <?php } ?>
  </div>

  <div style="clear:both;"></div>

  <?php include("links/footer.php");?>
  <!-- Include jQuery -->
  <script src="js/vendor/jquery-1.10.2.min.js"></script>
  <!-- Include main JavaScript file -->
  <script src="js/script.js"></script>
  <link rel="stylesheet" href="colorbox/example1/colorbox.css" />
  <script src="colorbox/jquery.colorbox.js"></script>
  <script>
    $(document).ready(function() {
      //Examples of how to assign the Colorbox event to elements
      $(".group1").colorbox({
        rel: 'group1'
      });
      $(".group2").colorbox({
        rel: 'group2',
        transition: "fade"
      });
      $(".group3").colorbox({
        rel: 'group3',
        transition: "none",
        width: "50%",
        height: "50%"
      });
      $(".group4").colorbox({
        rel: 'group4',
        slideshow: true
      });
      $(".ajax").colorbox();
      $(".youtube").colorbox({
        iframe: true,
        innerWidth: 640,
        innerHeight: 390
      });
      $(".vimeo").colorbox({
        iframe: true,
        innerWidth: 500,
        innerHeight: 409
      });
      $(".iframe").colorbox({
        iframe: true,
        width: "80%",
        height: "80%"
      });
      $(".inline").colorbox({
        inline: true,
        width: "50%"
      });
      $(".callbacks").colorbox({
        onOpen: function() {
          alert('onOpen: colorbox is about to open');
        },
        onLoad: function() {
          alert('onLoad: colorbox has started to load the targeted content');
        },
        onComplete: function() {
          alert('onComplete: colorbox has displayed the loaded content');
        },
        onCleanup: function() {
          alert('onCleanup: colorbox has begun the close process');
        },
        onClosed: function() {
          alert('onClosed: colorbox has completely closed');
        }
      });
      $('.non-retina').colorbox({
        rel: 'group5',
        transition: 'none'
      })
      $('.retina').colorbox({
        rel: 'group5',
        transition: 'none',
        retinaImage: true,
        retinaUrl: true
      });

      //Example of preserving a JavaScript event for inline calls.
      $("#click").click(function() {
        $('#click').css({
          "background-color": "#f00",
          "color": "#fff",
          "cursor": "inherit"
        }).text("Open this window again and this message will still be here.");
        return false;
      });
    });
  </script>
</body>

如何在php页面中显示所需的图像

0 个答案: