-1
我想从一个Codepen中将一个动态库的一些代码复制到我的一个项目中，但这只是无法正常工作，无论我看起来如何。已经确保被包含所有相关的库，没有被报道与Javascript错误...但它似乎像JS只是不运行或东西...有人可以请帮我找出为什么这个JS画廊不工作？
请看这里：http://samnorris.co.nz/portfoliowip/index.html
这是包含的脚本，我粘贴在我的main.js文件的顶部（http://www.samnorris.co.nz/portfoliowip/js/main.js）我也尝试加载在单独的外部JS文件和各种加载命令等。
$(function(){
var topbar = $('.topbar').height()+20;
var height = $(window).innerHeight();
var width = $(window).innerWidth();
if(580 >= width){
$('.fa-2x').removeClass('fa-2x').addClass('fa-lg');
}
else {
$('.project').css({'min-height':height-topbar, 'height':'auto'});
}
$('.title').fitText(0.9,{ maxFontSize: '28px' });
if (window.location.hash) {
$(window.location.hash).click();
}
$('.social').tooltip();
});
if(screen && screen.width > 580) {
$(window).resize(function(){
var height = $(window).innerHeight();
var topbar = $('.topbar').height()+20;
$('.project').css({'min-height':height-topbar});
});
}
$('body').on('click', '.project', function(){
$(this).addClass('selected').siblings().addClass('deselected');
window.location.hash = $(this).attr('id');
$(this).siblings().children('.title').hide();
$('.close').fadeIn();
setTimeout(function(){
$('.selected').children('.content').fadeIn();
},500);
});
$('body').on('click', '.close', function(){
$(this).fadeOut();
window.location.hash = '';
$('.selected').children('.content').fadeOut();
setTimeout(function(){
$('.selected').siblings().removeClass('deselected');
$('.selected').removeClass('selected');
setTimeout(function(){
$('.title').fadeIn();
$('.title').fitText(0.9,{ maxFontSize: '28px' });
},500);
},500);
});
相关的HTML：
<div class="gallery-wrapper" id="portfolio">
<div class="project one" id="bcmcr">
<h2 class="title">BCMCR.org</h2>
<div class="content">
<a href="http://bcmcr.org" target="_blank">
<picture>
<source srcset="http://55sketch.com/images/bcmcr_mobile.jpg" media="(max-width: 480px)">
<img src="http://55sketch.com/images/bcmcr.jpg" alt="BCMCR.org website screenshot" title="Click Image To Visit Site"/>
</picture>
</a>
<a href="http://bcmcr.org" class="gallery-btn" target="_blank">Visit Site <i class="fa fa-arrow-pf-right"></i></a>
<div class="details">
<b>Platform:</b> <i class="fa fa-wordpress"></i> WordPress | <b>Languages:</b> HTML, CSS, JQuery, PHP | <b>Plugins:</b> <a href="http://isotope.metafizzy.co" target="_blank">Isotope</a>
</div>
<p>The <a href="http://bcmcr.org" target="_blank">Birmingham Centre For Media & Cultural Research</a> is made up of several research teams carrying out collaborative work aross a range of cultural interests. They required a new website that amalgamated the existing websites for these teams and acted as a hub for the research centre itself.</p>
<picture>
<source srcset="http://55sketch.com/images/bcmcr_mobile.jpg" media="(max-width: 480px)">
<img src="http://55sketch.com/images/bcmcr-main.jpg" alt="BCMCR.org website screenshot" title="Click Image To Visit Site"/>
</picture>
<p>The treatment of the main site was to make the central hub focussed on the researchers - the people behind the centre - and offer them an attractive profile page that brings in all of their work across the teams.</p>
<picture>
<source srcset="http://55sketch.com/images/bcmcr-profile_mobile.jpg" media="(max-width: 480px)">
<img src="http://55sketch.com/images/bcmcr-profile.jpg" alt="BCMCR.org profile screenshot"/>
</picture>
<p>Complementary themes were created for the individual sites to give them their own personality, as well as holding together a coherent design style throughout.</p>
<picture>
<source srcset="http://55sketch.com/images/bcmcr-ic_mobile.jpg" media="(max-width: 480px)">
<img src="http://55sketch.com/images/bcmcr-ic.jpg" alt="Interactive Cultures screenshot"/>
</picture>
<picture>
<source srcset="http://55sketch.com/images/bcmcr-cecp_mobile.jpg" media="(max-width: 480px)">
<img src="http://55sketch.com/images/bcmcr-cecp.jpg" class="pf-left" alt="CECP.org screenshot"/>
</picture>
<picture class="clearfix">
<source srcset="http://55sketch.com/images/bcmcr-sc_mobile.jpg" media="(max-width: 480px)">
<img src="http://55sketch.com/images/bcmcr-sc.jpg" class="pf-right" alt="Screen Cultures screenshot"/>
</picture>
<p>The sites are responsive, built on WordPress using custom MySQL queries, and the <a href="http://isotope.metafizzy.co" target="_blank">Isotope JQuery plugin</a> was used to handle sorting and filtering.</p>
</div>
</div>
<div class="project two" id="edition-records">
<h2 class="title">Edition Records</h2>
<div class="content">
<a href="http://editionrecords.com" target="_blank">
<picture>
<source srcset="http://55sketch.com/images/edition_mobile.jpg" media="(max-width: 480px)">
<img src="http://55sketch.com/images/edition.jpg" alt="Edition Records website screenshot" title="Click Image To Visit Site"/>
</picture>
</a>
<a href="http://editionrecords.com" class="gallery-btn" target="_blank">Visit Site <i class="fa fa-arrow-pf-right"></i></a>
<div class="details">
<b>Platform:</b> <i class="fa fa-wordpress"></i> WordPress | <b>Languages:</b> HTML, CSS, JQuery, PHP
</div>
<p><a href="http://editionrecords.com" target="_blank">Edition Records</a> is one of the leading Jazz record labels in Europe.</p>
<picture>
<source srcset="http://55sketch.com/images/edition_mobile.jpg" media="(max-width: 480px)">
<img src="http://55sketch.com/images/edition-main.jpg" alt="Edition Records website screenshot"/>
</picture>
<p>The label has access to a very large range of high quality photography, so the design of the site is geared towards showing off this fantastic imagery.</p>
<picture>
<source srcset="http://55sketch.com/images/edition-artist_mobile.jpg" media="(max-width: 480px)">
<img src="http://55sketch.com/images/edition-artist.jpg" class="pf-left" alt="Artist example screenshot"/>
</picture>
<picture class="clearfix">
<source srcset="http://55sketch.com/images/edition-release_mobile.jpg" media="(max-width: 480px)">
<img src="http://55sketch.com/images/edition-release.jpg" class="pf-right" alt="Release example screenshot"/>
</picture>
<p>The client needed distinct areas of the site for their artists and releases, as well as more standard features such as news updates and static pages. The site needed to be responsive and several third party services, such as Bandcamp, Flickr and Soundcloud also needed to be integrated.</p>
<picture>
<source srcset="http://55sketch.com/images/edition-video_mobile.jpg" media="(max-width: 480px)">
<img src="http://55sketch.com/images/edition-video.jpg" alt="Video modal screenshot"/>
</picture>
<p>In response to these requirements the site was built on WordPress, using a wide range of Custom Post Types and Custom Fields in order to make updating and managing the site extremely easy for the client.</p>
</div>
</div>
<div class="project three" id="uberbooths">
<h2 class="title">Uberbooths</h2>
<div class="content">
<a href="http://uberbooths.co.uk" target="_blank">
<picture>
<source srcset="http://55sketch.com/images/uberbooths_mobile.jpg" media="(max-width: 480px)">
<img src="http://55sketch.com/images/uberbooths.jpg" alt="Uberbooths website screenshot" title="Click Image To Visit Site"/>
</picture>
</a>
<a href="http://uberbooths.co.uk" class="gallery-btn" target="_blank">Visit Site <i class="fa fa-arrow-pf-right"></i></a>
<div class="details">
<b>Platform:</b> <i class="fa fa-wordpress"></i> WordPress | <b>Languages:</b> HTML, CSS, JQuery, Javascript, PHP | <b>Plugins:</b> <a href="http://liquidslider.kevinbatdorf.com/" target="_blank">LiquidSlider</a>
</div>
<p><a href="http://uberbooths.co.uk" target="_blank">Uberbooths</a> provide bespoke photobooths for a variety of events across the whole of the UK.</p>
<picture>
<source srcset="http://55sketch.com/images/uberbooths_mobile.jpg" media="(max-width: 480px)">
<img src="http://55sketch.com/images/uberbooths-main.jpg" alt="Uberbooths main screenshot"/>
</picture>
<p>The client had access to some excellent imagery for the website, so a large featured image was utilised on each page, and a full width content slider welcomes visitors to the front page of the website.</p>
<picture>
<source srcset="http://55sketch.com/images/uberbooths-page_mobile.jpg" media="(max-width: 480px)">
<img src="http://55sketch.com/images/uberbooths-page.jpg" alt="Uberbooths page screenshot"/>
</picture>
<p>One of the main features of the site allows users to design their own custom booth and get an instant quote. This was achieved using Javascript, JQuery and a PHP mail form.</p>
<picture>
<source srcset="http://55sketch.com/images/uberbooths-booth_mobile.jpg" media="(max-width: 480px)">
<img src="http://55sketch.com/images/uberbooths-booth.jpg" alt="Uberbooths Design Your Booth screenshot"/>
</picture>
<p>The site is responsive and built on WordPress</p>
</div>
</div>
<div class="project four" id="tim-garland">
<h2 class="title">Tim Garland</h2>
<div class="content">
<a href="http://timgarland.com" target="_blank">
<picture>
<source srcset="http://55sketch.com/images/tim-garland_mobile.jpg" media="(max-width: 480px)">
<img src="http://55sketch.com/images/tim-garland.jpg" alt="Tim Garland website screenshot" title="Click Image To Visit Site"/>
</picture>
</a>
<a href="http://timgarland.com" class="gallery-btn" target="_blank">Visit Site <i class="fa fa-arrow-pf-right"></i></a>
<div class="details">
<b>Platform:</b> <i class="fa fa-wordpress"></i> WordPress | <b>Languages:</b> HTML, CSS, JQuery, PHP | <b>Plugins:</b> <a href="http://liquidslider.kevinbatdorf.com/" target="_blank">LiquidSlider</a>
</div>
<p><a href="http://timgarland.com" target="_blank">Tim Garland</a> is one of <a href="http://editionrecords.com" target="_blank">Edition Records'</a> main artists and the label required a new website to coincide with the launch of Tim's new album.</p>
<picture>
<source srcset="http://55sketch.com/images/tim-garland-1_mobile.jpg" media="(max-width: 480px)">
<img src="http://55sketch.com/images/tim-garland-1.jpg" alt="Tim Garland screenshot"/>
</picture>
<p>Due to the nature of Tim's long, successful and varied career the website needed to showcase several different areas in which Tim works.</p>
<picture>
<source srcset="http://55sketch.com/images/tim-garland-2_mobile.jpg" media="(max-width: 480px)">
<img src="http://55sketch.com/images/tim-garland-2.jpg" alt="Tim Garland screenshot"/>
</picture>
<p>The site is built on WordPress and the responsive design reflects the artwork from Tim's latest album. Several third party services needed to be integrated, such as YouTube, SoundCloud and Songkick</p>
<picture>
<source srcset="http://55sketch.com/images/tim-garland-3_mobile.jpg" media="(max-width: 480px)">
<img src="http://55sketch.com/images/tim-garland-3.jpg" alt="Tim Garland screenshot"/>
</picture>
<p>The entire site is navigated through utilising LiquidSlider acting as a full page content slider, which provides an interesting and unique user experience.</p>
</div>
</div>
<div class="project five" id="soundcloud-visualiser">
<h2 class="title">Soundcloud Data</h2>
<div class="content">
<a href="http://55sketch.com/soundcloud" target="_blank">
<picture>
<source srcset="http://55sketch.com/images/soundcloud_mobile.jpg" media="(max-width: 480px)">
<img src="http://55sketch.com/images/soundcloud.jpg" alt="Soundcloud Visualiser website screenshot" title="Click Image To Visit Site"/>
</picture>
</a>
<a href="http://55sketch.com/soundcloud" class="gallery-btn" target="_blank">Visit Site <i class="fa fa-arrow-pf-right"></i></a>
<div class="details">
<b>Platform:</b> Static | <b>Languages:</b> HTML, CSS, JQuery, JSON, API | <b>Plugins:</b> <a href="https://github.com/soundcloud/SoundCloud-API-jQuery-plugin" target="_blank">SoundCloud API JQuery Plugin</a>, <a href="http://isotope.metafizzy.co" target="_blank">Isotope</a>
</div>
<p>Built as an exercise in learning how to utilise Web APIs, my <a href="http://55sketch.com/soundcloud" target="_blank">SoundCloud Data Visualiser</a> allows users to log in with their SoundCloud account and view their stats for Plays, Downloads and Favourites</p>
<p>The stats can be sorted using the Isotope plugin, and the relative size of the bars can be adjusted to suit the user's taste</p>
<p>If you don't have a SoundCloud account, you can view a basic version of the visualiser on my <a href="http://codepen.io/nickmoreton/pen/Eveaq" target="_blank">CodePen account</a></p>
</div>
</div>
</div>
供参考，这是原来的Codepen的副本：http://samnorris.co.nz/portfoliogallery/index.html
将不胜感激任何帮助弄清楚为什么这是不工作！谢谢。
'有没有错误报告的Javascript'有控制台中的错误... –
哦，对不起，是的 - 但他们没有关系...（只修正其中之一：p） – FuManchuNZ
'他们与此无关'你确定？如果是这样，那是怎么回事？！ –