0

整理个人和项目组合，并尝试将 Vu Khanh Truong 的“elastic_grid”jQuery 插件用于实际组合。你可以在这里查看。问题是它似乎在我的页面上导致以下错误：

1）我有一个投资组合部分的标题，当我加载运行插件的页面时，它使我的标题消失。

2) 应该有根据用于对内容进行分类的不同标签出现的过滤按钮，而那些不会出现。

3) 它加载了我正在使用的不同类别的预览缩略图图像，但是当我点击它们时，它不会像预期的那样加载带有全尺寸图像（和描述）的模式。

当我在 Chrome 中打开控制台时，出现以下错误：

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

我尝试创建一个 JSFiddle 来发布以复制我遇到的问题，但我猜 JSFiddle 不允许您使用某些脚本或其他东西？'因为每当我尝试在页面上包含我正在使用的所有脚本时，它都会在控制台中给我MIME 类型错误。

我已经根据文档安装并使用了该插件，但我并不是最擅长解构 Javascript，所以我不知道为什么会出现这些错误。:P 如果有人可以提供帮助，我将不胜感激。

HTML

<!-- "DOCTYPE" Declaration -->
<!DOCTYPE HTML>

<!-- Start HTML -->
<html lang="en">

    <!-- Start HTML Header -->
    <head>
        <title>My Portfolio</title>

        <!-- Stylesheets -->
        <link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" /><!-- Bootstrap.css -->
        <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" /><!-- Font-Awesome -->
        <link href="elastic/css/elastic_grid.min.css" rel="stylesheet" type="text/css" /><!-- Elastic CSS -->
        <link href="mycss.css" rel="stylesheet" type="text/css" /><!-- Custom CSS -->

        <!--Javascripts -->
        <script src="jquery/jquery.js"></script><!-- jQuery -->
        <script src="bootstrap/js/bootstrap.js"></script><!-- Bootstrap jQuery -->
        <script src="jquery/jquery.scrollTo.js"></script><!-- "scrollTo" Smooth Scrolling jQuery plugin -->
        <!-- Elastic -->
        <script src="elastic/js/modernizr.custom.js"></script><!-- Modernizr -->
        <script src="elastic/js/classie.js"></script><!-- Classie -->
        <script src="elastic/js/elastic_grid.min.js"></script> <!-- Elastic -->
        <!-- Initializing & Customizing JS -->
        <script src="js/my.js"></script><!-- Personal Javascript for initializing & using Javascript & jQuery plugins -->

    </head>

    <!-- Start Page Body -->
    <body data-spy="scroll" data-target="#topNav" data-offset="75">

        <!-- Start Navigation -->
        <nav id="topNav" class="navbar navbar-inverse navbar-fixed-top" role="navigation">

            <div class="navbar-header"> 

                <div class="navbar-collapse collapse " id="myNavbar" role="navigation">

                <!-- Site Logo -->
                <a href="#home"><img src="imgs/logo_ph.png" alt="Logo placeholder" class="navbar-brand img-responsive" /></a>

                <!-- Start Navbar Links -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>                        
                </button>

                <ul class="nav navbar-nav navbar-right nav-pills">
                    <li role="presentation"><a href="#about">About Me</a></li>
                    <li role="presentation"><a href="#portfolio">Portfolio</a></li>
                    <li role="presentation"><a href="#contact">Contact Me</a></li>
                    <li role="presentation"><a href="#footer"><i class="text-center fa fa-angle-double-down fa-lg"></i></a></li>
                </ul>

                </div>
            </div>
        </nav>
        <!-- End Navigation -->

        <!-- Start Site Container -->
        <div class="container container-fluid" id="home">

            <br><br>

            <!-- Start "About Me" Section -->
            <section id="about" class="secB center-block">
                <h1 class="text-center">About Me</h1>
                <br><br>
                <img class="me-left" src="imgs/me-1.png" alt="Me" />
                <p>This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
<img class="me-right" src="imgs/me-1.png" alt="Me" />
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text </p>
            <div class="clearfix"></div>
            </section>
            <!-- End "About Me" Section -->

            <!-- Start "Portfolio" Section -->
            <section id="portfolio" class="secA center-block">
                <h1 class="text-center">Sample Work</h1>
                <br><br>
                <div id="portfolio">

                    <script type="text/javascript">

    $(function(){

        $("#portfolio").elastic_grid({
            'filterEffect': 'fallperspective',
            'hoverDirection': true,
            'hoverDelay': 0,
            'hoverInverse': false,
            'expandingSpeed': 500,
            'expandingHeight': 500,
                'items' :
                [
                    {
                        'title'         : 'Covers',
                        'description'   : ' A collection of media covers I\'ve designed',
                        'thumbnail'     : ['imgs/covers/s/1.jpg', 'imgs/covers/s/2.jpg'],
                        'large'         : ['imgs/covers/l/1.jpg', 'imgs/covers/l/2.jpg'],
                        'button_list'   :
                        [
                            { 'title':'Demo', 'url' : 'http://bonchen.net/' },
                            { 'title':'Download', 'url':'http://porfolio.bonchen.net/'}
                        ],
                        'tags'          : ['Covers']
                    },
                     {
                        'title'         : 'Logos',
                        'description'   : ' A collection of business logos I\'ve designed',
                        'thumbnail'     : ['imgs/logos/s/1.jpg', 'imgs/logos/s/2.jpg'],
                        'large'         : ['imgs/logos/l/1.jpg', 'imgs/logos/l/2.jpg'],
                        'button_list'   :
                        [
                            { 'title':'Demo', 'url' : 'http://bonchen.net/' },
                            { 'title':'Download', 'url':'http://porfolio.bonchen.net/'}
                        ],
                        'tags'          : ['Logos']
                    }
                ]
        });
    });
</script


                </div>
            </section>
            <!-- End "Portfolio" Section -->

            <!-- Start "Contact" Section -->
            <section id="contact" class="secB center-block">
            <h1 class="text-center">Hire Me!</h1>
            <h5 class="text-center">...or you know...just HMU to chat. :P</h5>
                <br><br>
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
                </section>
            <!-- End "Contact" Section -->


        <!-- End Site Container -->
        </div>

            <!-- Start "Footer" Section -->
                <footer class="footer center-block" id="footer">

                    <!-- Footer Content-->
                    <div class="footer-content">

                        <!-- Footer text -->
                        <div class="footer-text text-center">
                            <span class="text-primary">Port-FAUX-lio</span> | &copy; Husayn Muhammad 2016
                        </div>

                        <!-- Social Media -->
                        <div class="footer-icons-box text-center">
                            <div class="fa-stack fa-2x sm-icon">
                                <a href="mailto:cloud4xL@gmail.com">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
                                </a>
                            </div>
                            <div class="fa-stack fa-2x sm-icon">
                                <a href="http://twitter.com/cloud4xL" target="_blank">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
                                </a>
                            </div>
                            <div class="fa-stack fa-2x sm-icon">
                                <a href="http://freecodecamp.com/cloud4xL" target="_blank">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-free-code-camp fa-stack-1x fa-inverse"></i>
                                </a>
                            </div>
                            <div class="fa-stack fa-2x sm-icon">
                                <a href="https://www.linkedin.com/in/husayn-muhammad-040614106?trk=nav_responsive_tab_profile" target="_blank">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
                                </a>
                            </div>
                        </div>

                        <div class="clearfix"></div>    

                    </div>
                </footer>
                <!-- End "Footer" Section -->

    <!-- End Body -->
    </body>

    <!-- End HTML -->
</html>

CSS

body {

    background-color: #e1e1e1;
    min-width: 430px !important;

}

/****** TOP NAVIGATION STYLES ******/

.navbar {

    background-color: #f2f2f2 !important; /*#190c03*/
    box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.5);

}

.navbar-brand {

    float: left !important;
    height: auto !important;
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.4s, opacity 0.4s;

}

.navbar-brand:hover {

    transform: translateX(25px);
    opacity: 0;
    transition: transform 0.4s, opacity 0.4s;

}

.navbar-right {

    margin-right: 15px !important;

}

.navbar-header {

    position: relative !important;
    float: left !important;
    width: 100% !important;

}

.navbar-toggle {

    /* margin-top: 0px !important; */

}

.navbar ul {

    float: right !important;

}

.nav-pills > li {

    border: 1px solid rgba(0, 0, 0, 0.4);
    background-color: #d8661A;
    border-radius: 5px;
    margin-top: 3.5%;
    margin-right: 5px;
    box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.4);
    transform: scale(1, 1);
    transition: box-shadow 0.4s, transform 0.4s;

}

.nav-pills > li:hover {

    transform: translateY(-5px);
    border: 1px solid rgba(0, 0, 0, 0.7);
    transition: transform 0.4s, border 0.4s;

}

.navbar-inverse .navbar-nav > .active > a {

    background-color: transparent !important;

}

.nav-pills > li.active {

    transform: translateY(-5px);
    height: 50%;
    border: 1px solid rgba(0, 0, 0, 0.7);
    color: white !important;
    background-color: #337ab7 !important;
    transition: transform 0.4s, color 0.4s, background-color 0.4s;

}

.nav-pills > li a {

    color: white !important;
    border-bottom: 1px solid transparent !important;
    transition: color 0.4s, border-bottom 0.4s !important;

}


.nav-pills > li.active > a:hover {

    color: white !important;

}

/****** HEADER IMAGE STYLES ******/

.mast {

    width: auto;
    position: relative;
    height: 600px;
    margin-top: 7%;
    margin-bottom: 2%; 
    /* box-shadow: 0 4px 2px 0px rgba(0, 0, 0, 0.7); */

}

/****** <SECTION> STYLES ******/

.secA, .secB {

    width: auto;
    min-height: 400px;
    height: auto;
    padding: 4% 10% 8%;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.secA {

    background-color: rgba(0, 0, 0, 0.4);
    overflow: auto !important;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);

}

.secB {

    background-color: rgba(0, 0, 0, 0.2);

}

/****** ABOUT ME SECTION STYLES ******/

.me-left {

    float: left; 
    max-height: 200px; 
    border: 5px solid black; 
    border-radius: 50%; 
    padding-left: 8px; 
    margin: 10px 10px 10px 0px;
    background-color: white; 
    transform: scaleX(-1);

}

.me-right {


    float: right; 
    max-height: 200px; 
    border: 5px solid black; 
    border-radius: 50%; 
    padding-left: 8px; 
    margin: 10px 0px 10px 10px;
    background-color: white

}

/*********************************

**********sdFilterMe CSS**********

#sdfm-wrapper img, 
.sdfm-overlay {

    //Define the WIDTH of sdFilterMe Images 
    width: 200px !important;
    //Define the HEIGHT of sdFilterMe Images
    height: 200px !important;
    border-radius: 7px;
    overflow: hidden !important;

}

.sdfm-inner-wrapper {

    border-radius: 10px;
    margin: 5px !important;

}

.sdfm-overlay {

    background-color: rgba(0, 0, 0, 0.7) !important;
    color: white !important;
    font-size: 0.35em !important;
    text-overflow: clip !important;

}

.sdfm-overlay span {

    padding: 5% !important;
    margin: 8% auto !important;
    max-width: 85% !important;
    height: auto !important;
    word-wrap: break-word !important;
    border-radius: 2px !important;

}

*********************************/

/****** FOOTER STYLES ******/

.footer {

    width: auto;
    /* min-height: 150px; */
    /*margin-bottom: 5px !important;*/
    background-color: #1b1d1e;
    padding: 1.5% 5%;
    z-index: 3;
    border-top: 1px solid red;

}

.footer-content {

    /* border: 1px solid yellow; */
    margin: 0 auto;
    padding: 10px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;

}

.footer-text {

    font-size: 1.5em;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.7);
    /* border: 1px solid white; */
    width: auto;
    padding: 5px;
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 0.73%;
    display: flex;
    flex-flow: row wrap;
    align-self: flex-start;
    justify-content: center;

}

.footer-icons-box {

    /* border: 1px solid red; */
    width: auto;
    padding: auto;
    margin-left: 25px;
    margin-right: 25px;
    display: flex;
    flex-flow: row wrap;
    align-self: flex-end;

}

.sm-icon {

    display: inline-block;
    text-align: right;

}

.fa-circle {

    color: rgba(255, 255, 255, 0.9);
    transition: all 0.4s;

}

.footer-icons-box .fa-envelope, 
.fa-twitter, .fa-free-code-camp, .fa-linkedin {

    color: #1b1d1e;
    transform: scale(1, 1);
    transition: all 0.4s;

}

.footer-icons-box .fa-envelope:hover,
.fa-twitter:hover, .fa-free-code-camp:hover,
.fa-linkedin:hover  {

    color: #337ab7 !important;
    transform: scale(0.8, 0.8);
    transition: all 0.4s;

}

JS（来自我在上面的 HTML 部分中引用的“my.js”文件）

/* Begin 'scrollTo' */

$(document).ready(function() {
    $('#topNav a').click(function() {
        $.scrollTo(this.hash, 1200, {offset: -70}, {easing:'swing'});
        return false;
    });
});

/* End 'scrollTo' */
4

2 回答 2

0

在 Elastic_grid.js 中搜索 'if(numOfTag > 1){ 在菜单中创建“Everything”选项： createList("config.something"); $.each(itemsByTags, function(I, i) { createList(I) })'

并用 createList("All"); 更改粗体行

于 2017-04-01T13:45:53.030 回答
0

尝试：

在 elastic_grid.js 中找到函数 createList(text)

并更改以下几行：

[...]
    function createList(text) {
        var filter = text.toLowerCase().replace(' ', '-');
        // This is a helper function that takes the
        // text of a menu button and array of li items
        if (text != '') {
            var li = $('<li>');
            var a = $('<a>', {
[...]

为了：

[...]
        function createList(text) {
        // This is a helper function that takes the
        // text of a menu button and array of li items
        if (text != '' && text !== undefined) {
            var filter = text.toLowerCase().replace(' ', '-');
            var li = $('<li>');
            var a = $('<a>', {
[...]

修复 toLowerCase() 未定义：https ://github.com/vukhanhtruong/jquery-elastic-grid/pull/6/commits/5e6ceb02dccb57af536e1728dc5950d1622d0361

于 2017-05-06T08:35:15.410 回答