为什么我的jQuery画廊，在我的前端根本没有出现？

Question

我已经包含了整个网页，因此您没有疏忽。这是Magento CMS中的一个页面。我相信我的JQuery代码是正确的，因为我已经看过了，当我回到原来的JQuery代码之后没有出现任何新的代码，它也不会出现。我必须在没有注意的情况下搬家。但我再也看不到了。有什么想法吗？

/* 2 column */
.two-up { margin:0 5%; width:40%; float:left }

/* sections */
#one { width:100%; min-height:370px; background-image:url('{{media url="wysiwyg/Images/product_education/header-service-sm.jpg"}}'); padding:130px 10% 0 10%; }
#two, #four { width:80%; margin:50px auto; }
#three { width:100%; margin:50px auto; padding:50px 0; background-color:#e0ecec; }

#video { width:560px; height:315px; }
#video-div { width:560px; margin:0 auto; }

/* text */
.top-headline { font-family:'Montserrat', Arial, sans-serif; font-weight:700; font-size:56px; line-height:53px; color:#fff; max-width:390px; }
.link { text-decoration:underline; }
.head { font-family:'Montserrat', Arial, sans-serif; font-size:40px; line-height:45px; color:#000; text-align:center; text-transform:none; }
.lead-in { font-family:'Montserrat', Arial, sans-serif !important; font-size:16px !important; font-style:normal !important; line-height:25px !important; color:#4e4e4e !important; text-align:center; }
.head-left { font-family:'Montserrat', Arial, sans-serif; font-size:40px; line-height:45px; color:#000; text-align:center; text-transform:none; text-align:left; }
.lead-in-left { font-family:'Montserrat', Arial, sans-serif !important; font-size:16px !important; font-style:normal !important; line-height:25px !important; color:#4e4e4e !important; text-align:left; }
.sub-head { font-family:'Montserrat', Arial, sans-serif; font-weight:700; font-size:15px; line-height:23px; color:#008ea3; text-transform:none; }
.paragraph { font-family:'Montserrat', Arial, sans-serif !important; font-size:13px !important; line-height:23px !important; color:#4e4e4e !important; font-style:normal !important; }

.quote-head { font-family:'Montserrat', Arial, sans-serif; font-size:22px; line-height:22px; color:#000; text-align:center; text-transform:none; }
.customer-quote { font-family:'Neuton', Georgia, serif; font-style:italic; font-weight:normal; font-size:21px !important; line-height:28px !important; color:#4e4e4e; text-align:center; text-transform:none; }
.quote-credit { font-family:'Montserrat', Arial, sans-serif !important; font-size:15px !important; color:#00abc8 !important; font-style:normal !important; text-align:center; margin-top:-15px !important; }
#quote-container { float:left; width:80%; margin:0 auto; }

#arrow {
background-image:url('{{media url="wysiwyg/Images/product_education/arrow-sm.png"}}');
width:46px;
height:46px;
float:left;
margin:0 3%;
}
.next {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}


.button {
 float: none;
 background-color: #008ea3;
 padding: 16px 20px;
 font-family: 'Montserrat', sans-serif;
 font-size: 1em;
 font-weight: normal;
 color: #FFF;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 width: 200px;
 margin: 10px 0;
}

#gallery {
width:90%;
margin:50px auto;
}

#gallery a { 
width: 90px;
height: 90px;
display: block;
float:left;
margin: 10px; }

.ig-one, .ig-two, .ig-three, .ig-four, .ig-five, .ig-six, .ig-seven, .ig-eight, .ig-nine, .ig-ten, .ig-eleven, .ig-twelve, .ig-thirteen, .ig-fourteen { background-image:url('{{media url="wysiwyg/Images/product_education/ig-thumb.jpg"}}'); }
#ig-display { background-image:url('{{media url="wysiwyg/Images/product_education/ig-display.jpg"}}'); width:300px; height:300px; }
#box { width:328px; padding:14px; box-shadow:1px 1px 8px #ccc; }

.ig-one { background-position:0 0; }
.ig-two { background-position:-90px 0; }
.ig-three { background-position:-180px 0; }
.ig-four { background-position:-270px 0; }
.ig-five { background-position:-360px 0; }
.ig-six { background-position:-450px 0; }
.ig-seven { background-position:-540px 0; }
.ig-eight { background-position:0 -90px; }
.ig-nine { background-position:-90px -90px; }
.ig-ten { background-position:-180px -90px; }
.ig-eleven { background-position:-270px -90px; }
.ig-twelve { background-position:-360px -90px; }
.ig-thirteen { background-position:-450px -90px; }
.ig-fourteen { background-position:-540px -90px; }

#swipe-hide { display:none; }

@media (max-width: 770px) {

#one { width:100%; min-height:180px; background-image:url('{{media url="wysiwyg/Images/product_education/header-service-mobile.jpg"}}'); padding:30px 5% 0 5%; }

/* 2 column */
.two-up { margin:0 5%; width:90%; }

/* sections */
#three { padding:50px 5%; }
#two, #four { width:95%; }

#video { width:250px; height:141px; }
#video-div { width:250px; margin:0 auto; }

/* text */
.top-headline { font-size:40px; line-height:37px; }
.head { font-size:30px; line-height:35px; }
.customer-quote { padding:0 10px; }

#quote-container { float:left; width:100%; margin:0 auto; }

#ig-display { background-image:url('{{media url="wysiwyg/Images/product_education/ig-display.jpg"}}'); width:200px; height:200px; }
#box { width:228px; padding:14px; box-shadow:1px 1px 8px #ccc; }

.hide { display:none; }

#swipe-hide { display:block; }

}

我的HTML：

<section id="one">
<h1 class="top-headline" style="color: #333;">THE SERVICE WE PROVIDE</h1>
</section>
<section id="two">
<h2 class="head" style="color: #000;">Award Winning Customer Service</h2>

<div id="video-div"><iframe id="video" src="https://www.youtube.com/embed/SPAF1cLeurM" height="240" width="320"></iframe></div>
</section>
<section id="three">
<div style="width: 50px; height: 50px; background-color: #00abc8; border-radius: 30px; margin: 0 auto 25px auto; padding: 7px 0 0 7px;"><img alt="Quote Mark" src="{{media url="wysiwyg/Images/product_education/quote-mark-sm.png"}}" /></div>
<h2 class="quote-head" style="color: #000;">Customer Reviews</h2>
<div id="arrow" class="hide">&nbsp;</div>
<div id="quote-container">

<p id="swipe-hide" class="customer-quote">(swipe right or left)</p>
</div>
<div id="arrow" class="next hide">&nbsp;</div>
<div style="clear: both;">&nbsp;</div>
</section>
<section id="four">
<div class="two-up">
<h2 class="head-left" style="color: #000;">Instagram</h2>
<p class="lead-in-left">Take a look at our favorite Diamond Nexus products, see what goes on behind the scenes and so much more!</p>
<p class="paragraph" style="color: #fff !important; margin: 0; padding: 0;">OUR INSTAGRAM</p>
</div>
<div id="box" class="two-up">&nbsp;</div>
<div style="clear: both;">&nbsp;</div>
<div id="gallery">&nbsp;</div>
</section>

我的Javascript：

jQuery(document).ready(function(){

jQuery('.ig-one').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '0 0');
});

jQuery('.ig-two').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '-300px 0');
});

jQuery('.ig-three').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '-599px 0');
});

jQuery('.ig-four').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '-898px 0');
});

jQuery('.ig-five').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '-1200px 0');
});

jQuery('.ig-six').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '2px -300px');
});

jQuery('.ig-seven').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '-299px -300px');
});

jQuery('.ig-eight').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '-599px -300px');
});

jQuery('.ig-nine').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '-900px -300px');
});

jQuery('.ig-ten').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '-1200px -300px');
});

jQuery('.ig-eleven').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '2px -597px');
});

jQuery('.ig-twelve').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '-299px -599px');
});

jQuery('.ig-thirteen').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '-599px -599px');
});

jQuery('.ig-fourteen').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '-899px -599px');
});

});

有关示例，请参阅JSFiddle。