如果要问的太多了,我先向您道歉,但是,我竭尽全力试图弄清楚这一点。我最大的问题是我对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>