过滤和加载

时间：2015-12-18 14:43:56

标签： javascript php jquery html

我正在构建此图库页面http://www.zivaexotika.cz/galleries_masonry_wall.php 正如您所看到的，我在菜单导航的右侧有过滤器。但是..整个画廊我有两个问题。过滤器仅适用于已加载的照片。因此，如果您没有为更多照片加载，则filtr无法从一个数据ID中获取所有照片。我该如何定制？下一个问题是加载。如果我有500张照片，例如访客将看到前15，在滚动动作后，它将开始加载所有485张照片。这是一个非常缓慢和糟糕的解决方案。

这是Data_manager.php 

<?php

class DataManager
{
/**
 * @param $request - typ požadavku $_GET, $_POST
 * @param $connectionInfo - informace pro připojení do DB
 * @param $sqlQuery - SQL dotaz, který má být proveden
 * @param $params - paramtery pro dotaz, $query->bindParam(:xx, $xx);
 * @return vrátí výpis dat
 */

static function updateHashtag($id, $data) {

    if($id && $data) {

        if(strtolower($data) === 'null') {
            $data = null;
        }

        $dbh = self::db();

        try {
            $query = $dbh->prepare('UPDATE `photos` SET `hashtags` = :hashtags WHERE id = :id');
            $query->bindParam(':id', $id, PDO::PARAM_INT);
            $query->bindParam(':hashtags', $data, PDO::PARAM_STR);
            $query->execute();

            // Vratime jmeno fotky (ID)
            return true;
        }
        catch (PDOException $ex) {
            echo $ex->getMessage();
            return false;
        }

    } else {
        return false;
    }
}

static function removePhoto($id, $ext) {

    if($id && $ext) {
        $dbh = self::db();

        try {
            $query = $dbh->prepare('DELETE FROM `photos` WHERE `id` = :id');
            $query->bindParam(':id', $id, PDO::PARAM_INT);
            $query->execute();

            if($query) {
                if(!unlink('../../images/gallery/' . $id . '.' . $ext)) {
                    return 'Hlavní fotka nemohla být smazána.. ERROR';
                }
                if(!unlink('../../images/gallery/thumbs/' . $id . '.' . $ext)) {
                    return 'Miniatura fotky nemohla být smazána.. ERROR';
                }
                return 'Fotka byla úspěšně vymazána!';
            }
        }
        catch (PDOException $ex) {
            return $ex->getMessage();
        }
    }
}

static function insertPhoto($ext)
{

    if (!empty($ext)) {
        $dbh = self::db();

        try {
            $query = $dbh->prepare('INSERT INTO `photos` VALUES (NULL, :ext, NULL)');
            $query->bindParam(':ext', $ext, PDO::PARAM_STR);
            $query->execute();

            // Vratime jmeno fotky (ID)
            return self::lastInsertID();
        }
        catch (PDOException $ex) {
            return false;
        }
    }

    return false;
}

static function lastInsertID()
{
    $dbh = self::db();

    try {
        return $dbh->query('SELECT id FROM `photos` ORDER BY id DESC LIMIT 1')->fetch(PDO::FETCH_COLUMN);
    }
    catch (PDOException $ex) {
        return $ex->getMessage();
    }
}


static function getPhotos($fotekDefault = 10)
{
    $dbh = self::db();

    $sqlQuery = 'SELECT * FROM photos ORDER BY id DESC LIMIT 0, ' . $fotekDefault;
    $data = self::sql_exec($dbh, $sqlQuery);

    return $data;
}

static function getLastDownloadedID($fotekDefault = 10) {
    $dbh = self::db();

    $query = 'SELECT id FROM photos ORDER BY id DESC LIMIT 0, ' . $fotekDefault;
    $data = self::sql_exec($dbh, $query);

    $id = null;

    foreach ($data as $dato) {
        if($id === null)
            $id = $dato['id'];

        if ($id > $dato['id']) {
            $id = $dato['id'];
        }
    }

    return $id;
}

/**
 * @param $connectionInfo - informace pro připojení do DB
 * @param $sqlQuery - SQL dotaz, který má být proveden
 * @param $params - paramtery pro dotaz, $query->bindParam(:xx, $xx);
 * @return vrátí výpis dat
 */

static function getPhotosJson($fotekDefault = 10)
{

    $dbh = self::db();


    $sqlQuery = 'SELECT * FROM photos WHERE id < ' . self::getLastDownloadedID($fotekDefault) . ' ORDER BY id DESC';

    $fotky = self::sql_exec($dbh, $sqlQuery);

    if(!empty($fotky)) {
        $hashtags = $fotka['hashtags'];
        // Definice pro pozdejsi pouziti
        $poleFoto = [
            "items" => ""
        ];

        foreach ($fotky as $fotka) {
            $poleFoto["items"][] = [
                "imageSrc" => "../../images/gallery/thumbs/" . $fotka['id'] . "." . $fotka['extension'],
                "lightBoxImage" => "../../images/gallery/" . $fotka['id'] . "." . $fotka['extension'],
                "layoutType" => intval(6),
                "category" => $fotka['hashtags'],
                "galleryName" => "gallery_wall",
                "iconType" => "photo",
                "statLink1" => array(
                    "amount" => 15,
                    "icon" => "eye"
                ),
                "statLink2" => array(
                    "amount" => 100,
                    "icon" => "heart-empty"
                )
            ];
        }

        return $poleFoto;
    }

    return 'nic';
}

下一个文件是index.php 

<?php
 /**
 * Created by PhpStorm.
 * User: Tomas2D
 * Date: 18.11.15
 * Time: 12:26
 */

const
fotekDefault = 30;


require 'DataManager.php';

/**
  * @return bool
 */
function isAjax() {
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&     strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    // Jedná se o AJAX
    return true;
} else {
    return false;
}
}

function getDefaultPhotos()
{
$fotky = DataManager::getPhotos(fotekDefault);

if(!empty($fotky)) {
    //var_dump($fotky);
    foreach($fotky as $fotka)
    {
        $hashtags = $fotka['hashtags'];
        ?>

        <div class="isotope_item <?= $hashtags ?>">

            <div class="wall_j_item type_1">
                <a href="../../images/gallery/<?= $fotka['id'] ?>.<?= $fotka['extension'] ?>"
                   class="fancybox wall_image photo" data-rel="gallery_wall" rel="gallery_wall">
                    <img class="item_image"
                         src="../../images/gallery/thumbs/<?= $fotka['id'] ?>.<?= $fotka['extension'] ?>">
                </a>
            </div>

        </div>

        <?php
    }
}
}

function getJsonPhotos()
{
echo json_encode(DataManager::getPhotosJson(fotekDefault), JSON_PRETTY_PRINT|JSON_UNESCAPED_SLASHES);
}

/* Aplikační logika */
if(isAjax()) {
getJsonPhotos();
} else {
getDefaultPhotos();
}

用户界面的主文件是：

<!doctype html>


<head>

    <!-- Basic page needs
    ============================================ -->
    <title>Jaccobphoto | Portfolio</title>
    <meta charset="utf-8">
    <meta name="author" content="">
    <meta name="description" content="">
    <meta name="keywords" content="">

    <!-- Mobile specific metas
    ============================================ -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- Favicon
    ============================================ -->
    <link rel="shortcut icon" type="image/x-icon" href="images/fav_icon.ico">

    <!-- Google web fonts
    ============================================ -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css'>

    <!-- Libs CSS
    ============================================ -->
    <link rel="stylesheet" href="css/portfolio/css/animate.css">
    <link rel="stylesheet" href="plugins/fancybox/jquery.fancybox.css">
    <link rel="stylesheet" href="plugins/fancybox/helpers/jquery.fancybox-thumbs.css">
    <link rel="stylesheet" href="plugins/fancybox/helpers/jquery.fancybox-buttons.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- Theme CSS
    ============================================ -->
    <link rel="stylesheet" href="css/portfolio/css/style.css">
    <link rel="stylesheet" href="css/fontello.css"
    <!-- <link rel="stylesheet" href="css/rtl.css"> -->

    <!-- JS Libs
    ============================================ -->
    <script src="plugins/modernizr.js"></script>

    <!-- Old IE stylesheet
    ============================================ -->
    <!--[if lte IE 9]>
        <link rel="stylesheet" type="text/css" href="css/oldie.css">
        <script src="js/placeholderIE.js"></script>
    <![endif]-->

</head>

<body class="horizontal_menu_type" style="owerflow: hidden">

    <div id="page_loader" class="page_loader">
        <div id="loader"></div>
    </div>

    <!-- - - - - - - - - - - - - - Cookie Control & Old ie Message - - - - - - - - - - - - - - - - -->

    <div class="messages_wrap">

        <!-- - - - - - - - - - - - - - Old IE Message - - - - - - - - - - - - - - - - -->

        <!--[if lt IE 9]>

        <div class="old_ie_message">

            <div class="on_the_sides">

                <div class="left_side">

                    <i class="icon-attention"></i> <b>Attention!</b> This page may not display correctly. You are using an outdated version of Internet Explorer. For a faster, safer browsing experience.

                </div>

                <div class="right_side">

                    <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode" class="btn small transparent black" target="_blank">Update Now!</a>

                </div>

            </div>

        </div>

        <![endif]-->

        <!-- - - - - - - - - - - - - - End of Old IE Message - - - - - - - - - - - - - - - - -->

    </div>

    <!-- - - - - - - - - - - - - - End of Cookie Control & Old ie Message - - - - - - - - - - - - - - - - -->

    <div id="document_wrap">

        <!-- - - - - - - - - - - - - - Header - - - - - - - - - - - - - - - - -->

        <header role="banner" id="header" class="hm">

            <!-- - - - - - - - - - - - - - Logo - - - - - - - - - - - - - - - - -->

            <a href="index.html" class="logo" style="width:200px; margin:15px;">

                <img src="img/logo.png" alt="">

            </a>

            <!-- - - - - - - - - - - - - - End Logo - - - - - - - - - - - - - - - - -->

            <!-- - - - - - - - - - - - - - Horizontal Main Navigation - - - - - - - - - - - - - - - - -->

            <div id="horizontal_menu_wrap" class="hm_wrap">

                <nav>

                    <ul class="navigation">

                        <li>

                            <a href="index.html">Domů</a>

                        </li>

                        <li>

                            <a href="prodejci.html">Pro prodejce</a>

                        </li>



                    </ul>

                </nav>

            </div>

            <!-- - - - - - - - - - - - - - End of Main Navigation Container - - - - - - - - - - - - - - - - -->

            <!-- - - - - - - - - - - - - - Top Buttons - - - - - - - - - - - - - - - - -->

            <div id="top_actions_wrap">

                <!-- - - - - - - - - - - - - - Isotope Filter - - - - - - - - - - - - - - - - -->

                <p style="
display: inline-block;
align: left;
text-align: left;
margin: 5px;
">FILTR</p>

                <div id="filter_wrap">

                    <span id="filter_btn" class="si-icon toggle_box" data-width="28" data-height="28" data-event="click" data-icon-name="filter"></span>


                    <ul id="filter" class="animation_box">

                        <li data-filter="*">Vše</li>
                        <li data-filter=".jesteri">Ještěři</li>
                        <li data-filter=".savci">Savci</li>
                        <li data-filter=".krmivo">Krmiva</li>
                        <li data-filter=".hadi">Hadi</li>
                        <li data-filter=".bezobratli">Bezobratlí</li>


                    </ul>

                </div>

                <!-- - - - - - - - - - - - - - End of Isotope Filter - - - - - - - - - - - - - - - - -->


                <span id="toggle_menu" class="si-icon toggle_menu2" data-width="36" data-height="36" data-event="click" data-icon-name="hamburgerCross"></span>

            </div><!--/ #top_btns_wrap -->

            <!-- - - - - - - - - - - - - - End of Top Buttons - - - - - - - - - - - - - - - - -->

        </header>

        <!-- - - - - - - - - - - - - - End Header - - - - - - - - - - - - - - - - -->

        <!-- - - - - - - - - - - - - - Page content - - - - - - - - - - - - - - - - -->

        <div id="page_wrap" class="wall">

            <!-- - - - - - - - - - - - - - Isotope Container - - - - - - - - - - - - - - - - -->

            <!-- - - - - - - - - - - - - - Isotope Container - - - - - - - - - - - - - - - - -->

            <div class="gallery_isotope_container full_width" data-max-request-posts="20" data-page-type="gallery" data-masonry="true" data-url="php/class/index.php">

                <?php

                include 'php/class/index.php';

                ?>

            </div>

            <!-- - - - - - - - - - - - - - End of Isotope Container - - - - - - - - - - - - - - - - -->

            <!-- - - - - - - - - - - - - - End of Isotope Container - - - - - - - - - - - - - - - - -->

        </div><!--/ .page_wrapper -->

        <!-- - - - - - - - - - - - - - End page content - - - - - - - - - - - - - - - - -->

        <!-- - - - - - - - - - - - - - Footer - - - - - - - - - - - - - - - - -->

        <footer role="contentinfo" id="footer" class="fullscreen">

            <span class="copyright">&copy; 2015 Jakub Čuřík. Všechna práva vyhrazena.</span>

            <!-- - - - - - - - - - - - - - Social icons - - - - - - - - - - - - - - - - -->



            <!-- - - - - - - - - - - - - - End Social icons - - - - - - - - - - - - - - - - -->

        </footer>

        <!-- - - - - - - - - - - - - - End Footer - - - - - - - - - - - - - - - - -->

    </div>

    <!-- Include Libs & Plugins
    ============================================ -->
    <script src="js/portfolio/js/jquery-2.1.3.min.js"></script>
    <script src="js/portfolio/js/imagesloaded.pkgd.min.js"></script>
    <script src="plugins/isotope.pkgd.min.js"></script>

    <script src="plugins/jquery.mousewheel.min.js"></script>
    <script src="plugins/svg/snap.svg-min.js"></script>
    <script src="plugins/svg/svgicons-config.js"></script>
    <script src="plugins/svg/svgicons.js"></script>
    <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53b561d45194bf47" async="async"></script>
    <script src="plugins/fancybox/jquery.fancybox.pack.js"><=/script>
    <script src="plugins/fancybox/helpers/jquery.fancybox-thumbs.js"></script>
    <script src="plugins/fancybox/helpers/jquery.fancybox-buttons.js"></script>
    <script src="plugins/fancybox/helpers/jquery.fancybox-media.js"></script>

    <!-- Theme files
    ============================================ -->

    <script src="js/portfolio/js/theme.core.js"></script>
    <script src="js/portfolio/js/theme.plugins.js"></script>

</body>

非常感谢！ 抱歉我的英文

0 个答案:

没有答案
相关问题
最新问题