我是JavaScript＆amp;显然是JQuery和这个网站的新手！
我知道这将是一个愚蠢的问题，但任何人都可以弄清楚为什么我会收到这个错误？我试着谷歌搜索并阅读它。我几乎可以肯定它与js脚本的顺序有关。
我在控制台中收到的错误是
未捕获的TypeError：$（...）。css（...）。velocity不是一个函数 我正在使用fullpage.js，modernizer和jquery速度脚本在第105行的main.js中我附加了一个链接到网站以显示错误，当你点击图像的底部时弹出窗口是为了显示有更多信息。
http://thisisme.me/stack/simple.html
如果我移动js脚本我可以让它工作，但然后全屏js或导航栏不会工作。它的意思是像这个例子http://thisisme.me/stack/design.html
一样工作提前感谢任何人的帮助。
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="fullPage very simple demo." />
<meta name="keywords" content="fullpage,jquery,demo,simple" />
<meta name="Resource-type" content="Document" />
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" />
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="css/style2.css"> <!-- Resource style -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff']
});
});
</script>
<script src="js/script.js"></script>
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<script src="js/main.js"></script>
</head>
<body>
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li ><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<div id="fullpage">
<div class="section active" id="section0">
<h1>fullPage.js</h1>
</div>
<div class="section" id="section1">
<h1>fullPage.js</h1>
</div>
<div class="section" id="section2">
<ul class="cd-items cd-container">
<li class="cd-item">
<img src="img/item-1.jpg" alt="Item Preview">
<a href="#0" class="cd-trigger">Maisons</a>
</li> <!-- cd-item -->
<li class="cd-item">
<img src="img/item-1.jpg" alt="Item Preview">
<a href="#0" class="cd-trigger">Quick View</a>
</li> <!-- cd-item -->
<li class="cd-item">
<img src="img/item-1.jpg" alt="Item Preview">
<a href="#0" class="cd-trigger">Quick View</a>
</li> <!-- cd-item -->
<li class="cd-item">
<img src="img/item-1.jpg" alt="Item Preview">
<a href="#0" class="cd-trigger">Quick View</a>
</li> <!-- cd-item -->
<li class="cd-item">
<img src="img/item-1.jpg" alt="Item Preview">
<a href="#0" class="cd-trigger">Quick View</a>
</li> <!-- cd-item -->
<li class="cd-item">
<img src="img/item-1.jpg" alt="Item Preview">
<a href="#0" class="cd-trigger">Quick View</a>
</li> <!-- cd-item -->
<li class="cd-item">
<img src="img/item-1.jpg" alt="Item Preview">
<a href="#0" class="cd-trigger">Quick View</a>
</li> <!-- cd-item -->
<li class="cd-item">
<img src="img/item-1.jpg" alt="Item Preview">
<a href="#0" class="cd-trigger">Quick View</a>
</li> <!-- cd-item -->
<!-- cd-item -->
</ul> <!-- cd-items -->
<div class="cd-quick-view">
<div class="cd-slider-wrapper">
<ul class="cd-slider">
<li class="selected"><img src="img/item-1.jpg" alt="Product 1"></li>
<li><img src="img/item-2.jpg" alt="Product 2"></li>
<li><img src="img/item-3.jpg" alt="Product 3"></li>
</ul> <!-- cd-slider -->
<ul class="cd-slider-navigation">
<li><a class="cd-next" href="#0">Prev</a></li>
<li><a class="cd-prev" href="#0">Next</a></li>
</ul> <!-- cd-slider-navigation -->
</div> <!-- cd-slider-wrapper -->
<div class="cd-item-info">
<h2>Produt Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, omnis illo iste ratione. Numquam eveniet quo, ullam itaque expedita impedit. Eveniet, asperiores amet iste repellendus similique reiciendis, maxime laborum praesentium.</p>
<ul class="cd-item-action">
<li><button class="add-to-cart">Add to cart</button></li>
<li><a href="#0">Learn more</a></li>
</ul> <!-- cd-item-action -->
</div> <!-- cd-item-info -->
<a href="#0" class="cd-close">Close</a>
</div> <!-- cd-quick-view -->
</div>
<div class="section" id="section3"><h1>Just the simplest demo ever</h1></div>
</div>
</body>
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<script src="js/script.js"></script>
</html>
的CSS .overlay { 位置：固定; 背景：＃FF5252; 顶部：0; 左：0; 宽度：100％; 身高：0％; 不透明度：0; 能见度：隐藏; -webkit-transition：不透明度.35s，可见性.35s，高度.35s; 过渡：不透明度.35s，能见度.35s，高度.35s; 溢出：隐藏;
opacity: 0.5;
z-index: 10;
}
.overlay.open {
opacity: .9;
visibility: visible;
height: 100%;
}
.overlay.open li {
-webkit-animation: fadeInRight .5s ease forwards;
animation: fadeInRight .5s ease forwards;
-webkit-animation-delay: .35s;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
-webkit-animation-delay: .45s;
animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
-webkit-animation-delay: .50s;
animation-delay: .50s;
}
.overlay nav {
position: relative;
height: 70%;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 50px;
font-family: 'Vollkorn', serif;
font-weight: 400;
text-align: center;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #FFF;
text-decoration: none;
overflow: hidden;
}
.overlay ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
height: 3px;
background: #FFF;
-webkit-transition: .35s;
transition: .35s;
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
CSS2
*, *::after, *::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*::after, *::before {
content: '';
}
body {
font-size: 100%;
font-family: "PT Sans", sans-serif;
color: #3e585f;
background-color: #47374e;
}
body::after {
/* dark overlay layer - visible when we fire .cd-quick-view */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(71, 55, 78, 0.8);
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
@media only screen and (min-width: 1024px) {
body.overlay-layer::after {
visibility: visible;
opacity: 1;
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
}
a {
color: #f82f53;
text-decoration: none;
}
img {
max-width: 100%;
}
/* --------------------------------
Modules - reusable parts of our design
-------------------------------- */
.cd-container {
/* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
width: 90%;
max-width: 1170px;
margin: 0 auto;
}
.cd-container:after {
content: "";
display: table;
clear: both;
}
/* --------------------------------
Main components
-------------------------------- */
html, body {
height: 100%;
}
header {
position: relative;
height: 160px;
line-height: 170px;
text-align: center;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
header h1 {
color: #ffffff;
font-size: 20px;
font-size: 1.25rem;
}
@media only screen and (min-width: 768px) {
header {
line-height: 180px;
}
header h1 {
font-size: 26px;
font-size: 1.625rem;
}
}
@media only screen and (min-width: 1024px) {
header {
line-height: 220px;
}
}
.cd-items {
padding: 1em 0;
}
@media only screen and (min-width: 768px) {
.cd-items {
padding: 2em 0 0;
}
}
@media only screen and (min-width: 1024px) {
.cd-items {
padding: 4em 0 0;
}
}
.cd-item {
position: relative;
margin: 0 0 1em;
}
.cd-item > img {
display: block;
width: 100%;
}
@media only screen and (min-width: 768px) {
.cd-item {
width: 48%;
float: left;
margin: 0 4% 2em 0;
}
.cd-item:nth-child(2n) {
margin-right: 0;
}
}
@media only screen and (min-width: 1024px) {
.cd-item {
width: 22%;
float: left;
margin: 0 4% 2.8em 0;
}
.cd-item:nth-child(2n) {
margin-right: 4%;
}
.cd-item:nth-child(4n) {
margin-right: 0;
}
.cd-item.empty-box::after {
/* box visible as placeholder when the .cd-quick-view zooms in */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #392c3f;
}
}
.cd-trigger {
position: absolute;
height: 50px;
line-height: 50px;
width: 100%;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.1);
text-align: center;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #ffffff;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.2s, background-color 0.2s;
-moz-transition: opacity 0.2s, background-color 0.2s;
transition: opacity 0.2s, background-color 0.2s;
}
.no-touch .cd-trigger:hover {
background: rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width: 1024px) {
.cd-trigger {
/* always visible on small devices */
visibility: visible;
opacity: 1;
}
}
@media only screen and (min-width: 1170px) {
.cd-trigger {
/* only visible on hover on big devices */
opacity: 0;
}
}
@media only screen and (min-width: 1170px) {
.no-touch .cd-item:hover .cd-trigger {
opacity: 1;
}
.touch .cd-item .cd-trigger {
opacity: 1;
}
}
.cd-quick-view {
/* quick view non available on small devices */
display: none;
}
@media only screen and (min-width: 1024px) {
.cd-quick-view {
display: block;
position: fixed;
max-width: 900px;
visibility: hidden;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: left, top, width;
z-index: 1;
}
.cd-quick-view:after {
content: "";
display: table;
clear: both;
}
.cd-quick-view.is-visible {
/* class added when user clicks on .cd-trigger */
visibility: visible;
}
.cd-quick-view.animate-width {
/* class added at the end of the first zoom-in animation */
background-color: #ffffff;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
-webkit-transition: box-shadow 0.3s;
-moz-transition: box-shadow 0.3s;
transition: box-shadow 0.3s;
}
}
.cd-slider-wrapper {
position: relative;
display: inline-block;
float: left;
}
.cd-slider-wrapper:after {
content: "";
display: table;
clear: both;
}
.cd-slider {
float: left;
}
.cd-slider li {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.cd-slider li img {
display: block;
width: 100%;
max-width: 400px;
}
.cd-slider li.selected {
position: relative;
z-index: 3;
}
.add-content .cd-slider {
margin-right: 3em;
}
.cd-slider-navigation {
opacity: 0;
}
.add-content .cd-slider-navigation {
opacity: 1;
}
.cd-slider-navigation li {
position: absolute;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 3;
}
.cd-slider-navigation li:first-child {
left: 0;
}
.cd-slider-navigation li:last-child {
/* equal to the .cd-slider-wrapper margin-right */
right: 3em;
}
.cd-slider-navigation li a {
display: block;
width: 40px;
height: 50px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
opacity: 0;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.2s, background 0.2s;
-moz-transition: opacity 0.2s, background 0.2s;
transition: opacity 0.2s, background 0.2s;
}
.cd-slider-navigation li a::before, .cd-slider-navigation li a::after {
/* create arrows in CSS */
position: absolute;
top: 18px;
left: 14px;
display: inline-block;
background: #ffffff;
height: 3px;
width: 12px;
}
.cd-slider-navigation li a::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-slider-navigation li a::after {
-webkit-transform: translateY(7px) rotate(-45deg);
-moz-transform: translateY(7px) rotate(-45deg);
-ms-transform: translateY(7px) rotate(-45deg);
-o-transform: translateY(7px) rotate(-45deg);
transform: translateY(7px) rotate(-45deg);
}
.add-content .cd-slider-navigation li a {
opacity: .2;
}
.no-touch .cd-slider-navigation li a:hover {
background: rgba(71, 55, 78, 0.8);
opacity: 1;
}
.touch .cd-slider-navigation li a {
opacity: 1;
}
.cd-slider-navigation li:first-child a::before {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.cd-slider-navigation li:first-child a::after {
-webkit-transform: translateY(7px) rotate(45deg);
-moz-transform: translateY(7px) rotate(45deg);
-ms-transform: translateY(7px) rotate(45deg);
-o-transform: translateY(7px) rotate(45deg);
transform: translateY(7px) rotate(45deg);
}
.cd-item-info {
position: absolute;
padding: 3em 3em 3em 0;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s, visibility 0s;
-moz-transition: opacity .3s, visibility 0s;
transition: opacity .3s, visibility 0s;
}
.cd-item-info h2 {
font-size: 28px;
font-size: 1.75rem;
}
.cd-item-info p {
line-height: 1.6;
margin: 1em 0;
color: #67919c;
}
.cd-item-info .cd-item-action li {
display: inline-block;
margin-right: 1em;
}
.cd-item-info .cd-item-action li:first-child {
margin-left: -4px;
}
.cd-item-info .add-to-cart {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
border-radius: 0.25em;
border: none;
padding: .6em 1.2em;
background-color: #f82f53;
color: #ffffff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "PT Sans", sans-serif;
font-size: 16px;
font-size: 1rem;
cursor: pointer;
}
.add-content .cd-item-info {
/* class added at the end of the width animation, used to show the content */
position: relative;
visibility: visible;
opacity: 1;
}
.add-content .cd-item-info h2 {
-webkit-animation: cd-slide-in 0.3s;
-moz-animation: cd-slide-in 0.3s;
animation: cd-slide-in 0.3s;
}
.add-content .cd-item-info p {
-webkit-animation: cd-slide-in 0.4s;
-moz-animation: cd-slide-in 0.4s;
animation: cd-slide-in 0.4s;
}
.add-content .cd-item-info .cd-item-action {
-webkit-animation: cd-slide-in 0.5s;
-moz-animation: cd-slide-in 0.5s;
animation: cd-slide-in 0.5s;
}
@-webkit-keyframes cd-slide-in {
0% {
-webkit-transform: translate3d(-40px, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
}
}
@-moz-keyframes cd-slide-in {
0% {
-moz-transform: translate3d(-40px, 0, 0);
}
100% {
-moz-transform: translate3d(0, 0, 0);
}
}
@keyframes cd-slide-in {
0% {
-webkit-transform: translate3d(-40px, 0, 0);
-moz-transform: translate3d(-40px, 0, 0);
-ms-transform: translate3d(-40px, 0, 0);
-o-transform: translate3d(-40px, 0, 0);
transform: translate3d(-40px, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.cd-close {
position: absolute;
top: 10px;
right: 10px;
display: inline-block;
width: 30px;
height: 30px;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
visibility: hidden;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform .3s 0s, visibility 0s .3s;
-moz-transition: -moz-transform .3s 0s, visibility 0s .3s;
transition: transform .3s 0s, visibility 0s .3s;
}
.cd-close::before, .cd-close::after {
/* close icon in css */
position: absolute;
top: 12px;
left: 5px;
display: inline-block;
height: 4px;
width: 20px;
background: #47374e;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-close::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.no-touch .cd-close:hover {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.add-content .cd-close {
visibility: visible;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform .3s 0s, visibility 0s 0s;
-moz-transition: -moz-transform .3s 0s, visibility 0s 0s;
transition: transform .3s 0s, visibility 0s 0s;
}
main.js
jQuery(document).ready(function($){
//final width --> this is the quick view image slider width
//maxQuickWidth --> this is the max-width of the quick-view panel
var sliderFinalWidth = 400,
maxQuickWidth = 900;
//open the quick view panel
$('.cd-trigger').on('click', function(event){
var selectedImage = $(this).parent('.cd-item').children('img'),
slectedImageUrl = selectedImage.attr('src');
$('body').addClass('overlay-layer');
animateQuickView(selectedImage, sliderFinalWidth, maxQuickWidth, 'open');
//update the visible slider image in the quick view panel
//you don't need to implement/use the updateQuickView if retrieving the quick view data with ajax
updateQuickView(slectedImageUrl);
});
//close the quick view panel
$('body').on('click', function(event){
if( $(event.target).is('.cd-close') || $(event.target).is('body.overlay-layer')) {
closeQuickView( sliderFinalWidth, maxQuickWidth);
}
});
$(document).keyup(function(event){
//check if user has pressed 'Esc'
if(event.which=='27'){
closeQuickView( sliderFinalWidth, maxQuickWidth);
}
});
//quick view slider implementation
$('.cd-quick-view').on('click', '.cd-slider-navigation a', function(){
updateSlider($(this));
});
//center quick-view on window resize
$(window).on('resize', function(){
if($('.cd-quick-view').hasClass('is-visible')){
window.requestAnimationFrame(resizeQuickView);
}
});
function updateSlider(navigation) {
var sliderConatiner = navigation.parents('.cd-slider-wrapper').find('.cd-slider'),
activeSlider = sliderConatiner.children('.selected').removeClass('selected');
if ( navigation.hasClass('cd-next') ) {
( !activeSlider.is(':last-child') ) ? activeSlider.next().addClass('selected') : sliderConatiner.children('li').eq(0).addClass('selected');
} else {
( !activeSlider.is(':first-child') ) ? activeSlider.prev().addClass('selected') : sliderConatiner.children('li').last().addClass('selected');
}
}
function updateQuickView(url) {
$('.cd-quick-view .cd-slider li').removeClass('selected').find('img[src="'+ url +'"]').parent('li').addClass('selected');
}
function resizeQuickView() {
var quickViewLeft = ($(window).width() - $('.cd-quick-view').width())/2,
quickViewTop = ($(window).height() - $('.cd-quick-view').height())/2;
$('.cd-quick-view').css({
"top": quickViewTop,
"left": quickViewLeft,
});
}
function closeQuickView(finalWidth, maxQuickWidth) {
var close = $('.cd-close'),
activeSliderUrl = close.siblings('.cd-slider-wrapper').find('.selected img').attr('src'),
selectedImage = $('.empty-box').find('img');
//update the image in the gallery
if( !$('.cd-quick-view').hasClass('velocity-animating') && $('.cd-quick-view').hasClass('add-content')) {
selectedImage.attr('src', activeSliderUrl);
animateQuickView(selectedImage, finalWidth, maxQuickWidth, 'close');
} else {
closeNoAnimation(selectedImage, finalWidth, maxQuickWidth);
}
}
function animateQuickView(image, finalWidth, maxQuickWidth, animationType) {
//store some image data (width, top position, ...)
//store window data to calculate quick view panel position
var parentListItem = image.parent('.cd-item'),
topSelected = image.offset().top - $(window).scrollTop(),
leftSelected = image.offset().left,
widthSelected = image.width(),
heightSelected = image.height(),
windowWidth = $(window).width(),
windowHeight = $(window).height(),
finalLeft = (windowWidth - finalWidth)/2,
finalHeight = finalWidth * heightSelected/widthSelected,
finalTop = (windowHeight - finalHeight)/2,
quickViewWidth = ( windowWidth * .8 < maxQuickWidth ) ? windowWidth * .8 : maxQuickWidth ,
quickViewLeft = (windowWidth - quickViewWidth)/2;
if( animationType == 'open') {
//hide the image in the gallery
parentListItem.addClass('empty-box');
//place the quick view over the image gallery and give it the dimension of the gallery image
$('.cd-quick-view').css({
"top": topSelected,
"left": leftSelected,
"width": widthSelected,
}).velocity({
//animate the quick view: animate its width and center it in the viewport
//during this animation, only the slider image is visible
'top': finalTop+ 'px',
'left': finalLeft+'px',
'width': finalWidth+'px',
}, 1000, [ 400, 20 ], function(){
//animate the quick view: animate its width to the final value
$('.cd-quick-view').addClass('animate-width').velocity({
'left': quickViewLeft+'px',
'width': quickViewWidth+'px',
}, 300, 'ease' ,function(){
//show quick view content
$('.cd-quick-view').addClass('add-content');
});
}).addClass('is-visible');
} else {
//close the quick view reverting the animation
$('.cd-quick-view').removeClass('add-content').velocity({
'top': finalTop+ 'px',
'left': finalLeft+'px',
'width': finalWidth+'px',
}, 300, 'ease', function(){
$('body').removeClass('overlay-layer');
$('.cd-quick-view').removeClass('animate-width').velocity({
"top": topSelected,
"left": leftSelected,
"width": widthSelected,
}, 500, 'ease', function(){
$('.cd-quick-view').removeClass('is-visible');
parentListItem.removeClass('empty-box');
});
});
}
}
function closeNoAnimation(image, finalWidth, maxQuickWidth) {
var parentListItem = image.parent('.cd-item'),
topSelected = image.offset().top - $(window).scrollTop(),
leftSelected = image.offset().left,
widthSelected = image.width();
//close the quick view reverting the animation
$('body').removeClass('overlay-layer');
parentListItem.removeClass('empty-box');
$('.cd-quick-view').velocity("stop").removeClass('add-content animate-width is-visible').css({
"top": topSelected,
"left": leftSelected,
"width": widthSelected,
});
}
});