为什么我的扩展图像网格不起作用?

时间:2019-02-26 18:11:19

标签: javascript html css image grid

如果要问的太多了,我先向您道歉,但是,我竭尽全力试图弄清楚这一点。我最大的问题是我对JS不熟悉。就我的问题而言,我已经做了很多教程都没有用。正如我以前的帖子所指出的那样,我试图将可扩展的图像网格添加到我的网站,但是遇到了很多问题。我只能假定由于JS问题,我当前的尝试无法正常工作。我没有块布局,也没有我们的缩略图扩展。尽管我可能完全错了,但我认为问题是我的JS没有指向正确的来源,我不确定100%如何实现。完全是JS newb。我不希望有人“为我做我的工作”,但是,如果您能指出正确的方向,我当然会很感激的。

这是我尝试放置图像网格的页面:http://rthhockey.com/coachshop

这是我要复制的示例:https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

我正在使用的代码:

HTML
<div class="container"> 
            <div class="main">
                <ul id="og-grid" class="og-grid">
                    <li>
                        <a href="#" data-largesrc="https://i.imgur.com/qVKUdPN.png" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
                            <img src="https://i.imgur.com/qVKUdPN.png" alt="img01"/>
                        </a>
                    </li>
                    <li>
                        <a href="#" data-largesrc="https://i.imgur.com/qVKUdPN.png" data-title="Veggies sunt bona vobis" data-description="Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.">
                            <img src="https://i.imgur.com/qVKUdPN.png" alt="img02"/>
                        </a>
                    </li>
                    <li>
                        <a href="#" data-largesrc="https://i.imgur.com/qVKUdPN.png" data-title="Dandelion horseradish" data-description="Cabbage bamboo shoot broccoli rabe chickpea chard sea lettuce lettuce ricebean artichoke earthnut pea aubergine okra brussels sprout avocado tomato.">
                            <img src="https://i.imgur.com/qVKUdPN.png" alt="img03"/>
                        </a>
                    </li>
                    <li>
                        <a href="#" data-largesrc="https://i.imgur.com/qVKUdPN.png" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
                            <img src="https://i.imgur.com/qVKUdPN.png" alt="img01"/>
                        </a>
                    </li>
                    <li>
                        <a href="#" data-largesrc="https://i.imgur.com/qVKUdPN.png" data-title="Veggies sunt bona vobis" data-description="Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.">
                            <img src="https://i.imgur.com/qVKUdPN.png" alt="img02"/>
                        </a>
                    </li>
                    <li>
                        <a href="#" data-largesrc="https://i.imgur.com/qVKUdPN.png" data-title="Dandelion horseradish" data-description="Cabbage bamboo shoot broccoli rabe chickpea chard sea lettuce lettuce ricebean artichoke earthnut pea aubergine okra brussels sprout avocado tomato.">
                            <img src="https://i.imgur.com/qVKUdPN.png" alt="img03"/>
                        </a>
                    </li>
                    <li>
                        <a href="#" data-largesrc="https://i.imgur.com/qVKUdPN.png" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
                            <img src="https://i.imgur.com/qVKUdPN.png" alt="img01"/>
                        </a>
                    </li>
                    <li>
                        <a href="#" data-largesrc="https://i.imgur.com/qVKUdPN.png" data-title="Veggies sunt bona vobis" data-description="Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.">
                            <img src="https://i.imgur.com/qVKUdPN.png" alt="img02"/>
                        </a>
                    </li>
                    <li>
                        <a href="#" data-largesrc="https://i.imgur.com/qVKUdPN.png" data-title="Dandelion horseradish" data-description="Cabbage bamboo shoot broccoli rabe chickpea chard sea lettuce lettuce ricebean artichoke earthnut pea aubergine okra brussels sprout avocado tomato.">
                            <img src="https://i.imgur.com/qVKUdPN.png" alt="img03"/>
                        </a>
                    </li>

                </ul>
            </div>
        </div>

CSS
<link rel="stylesheet" type="text/css" href="css/default.css" />
        <link rel="stylesheet" type="text/css" href="css/component.css" />

JS
<script src="js/modernizr.custom.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="js/grid.js"></script>
        <script>
            $(function() {
                Grid.init();
            });
        </script>

0 个答案:

没有答案