zzwyb89
Reputation: 470
jQuery Slit Slider issue
I am using this fantastic tutorial to create a horizontal image slider, however something is clearly wrong, as the slider looks broken. Javascript doesn't work either. I'm merely a beginner to JS, hoping to learn something off this.
I am using a CMS called phpVMS, in which every page works as a modificable template. Layout.cpl works self-explanatory to display the general layout across all pages. I checked that none of the CSS or JS files override the ones in mypage.cpl.
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="<?php echo SITE_URL?>/lib/skins/flyeuro/scripts/jquery.ba-cond.min.js"></script>
<script type="text/javascript" src="<?php echo SITE_URL?>/lib/skins/flyeuro/scripts/jquery.slitslider.js"></script>
<script type="text/javascript" src="<?php echo SITE_URL?>/lib/skins/flyeuro/scripts/modernizr.custom.79639.js" ></script>
<link rel="stylesheet" type="text/css" href="<?php echo SITE_URL?>/lib/skins/flyeuro/css/slider-style.css" />
<link rel="stylesheet" type="text/css" href="<?php echo SITE_URL?>/lib/skins/flyeuro/css/custom.css" />
Chrome seems to point to this as the only error...
Uncaught TypeError: Cannot call method 'prefixed' of undefined
Line the error appears on...
this.transEndEventName = this.transEndEventNames[ Modernizr.prefixed( 'transition' ) ];
Upvotes: 0
Views: 5435
Answers (3)
Mathias
Reputation: 334
Just load modernizr.custom.79639.js before jquery.slitslider.js:
<script type="text/javascript" src="<?php echo SITE_URL?>/lib/skins/flyeuro/scripts/modernizr.custom.79639.js" ></script>
<script type="text/javascript" src="<?php echo SITE_URL?>/lib/skins/flyeuro/scripts/jquery.slitslider.js"></script>
Upvotes: 1
mjsa
Reputation: 4399
I had a similar issue, turned out the jquery library was broken. Also be sure to include css before the javascript.
Upvotes: 0
John Peter
Reputation: 2928
Just try with the following example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Fullscreen Slit Slider with CSS3 and jQuery</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Fullscreen Slit Slider with CSS3 and jQuery" />
<meta name="keywords" content="slit slider, plugin, css3, transitions, jquery, fullscreen, autoplay" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
<noscript>
<link rel="stylesheet" type="text/css" href="css/styleNoJS.css" />
</noscript>
</head>
<body>
<div class="container demo-2">
<!-- Codrops top bar -->
<div class="codrops-top clearfix">
<a href="http://tympanus.net/Tutorials/CSS3BouncingBall/">
<strong>« Previous Demo: </strong>3D Bouncing Ball with CSS3
</a>
<span class="right">
<a href="http://www.flickr.com/photos/majownik/">Images by Majownik</a>
<a href="http://tympanus.net/codrops/?p=9357">
<strong>Back to the Codrops Article</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header class="clearfix">
<h1>Slit Slider <span>with CSS3 and jQuery</span></h1>
<nav class="codrops-demos">
<a href="index.html">Demo 1</a>
<a class="current-demo" href="index2.html">Demo 2</a>
</nav>
</header>
<div id="slider" class="sl-slider-wrapper">
<div class="sl-slider">
<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
<div class="sl-slide-inner">
<div class="bg-img bg-img-1"></div>
<h2>A bene placito.</h2>
<blockquote><p>You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity.</p><cite>Ralph Waldo Emerson</cite></blockquote>
</div>
</div>
<div class="sl-slide" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
<div class="sl-slide-inner">
<div class="bg-img bg-img-2"></div>
<h2>Regula aurea.</h2>
<blockquote><p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite></blockquote>
</div>
</div>
<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="bg-img bg-img-3"></div>
<h2>Dum spiro, spero.</h2>
<blockquote><p>Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have been utterly deprived of everything that could make their lives worth living and who endured the awful suffering and the terror of the abattoirs.</p><cite>Dame Jane Morris Goodall</cite></blockquote>
</div>
</div>
<div class="sl-slide" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="bg-img bg-img-4"></div>
<h2>Donna nobis pacem.</h2>
<blockquote><p>The human body has no more need for cows' milk than it does for dogs' milk, horses' milk, or giraffes' milk.</p><cite>Michael Klaper M.D.</cite></blockquote>
</div>
</div>
<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="bg-img bg-img-5"></div>
<h2>Acta Non Verba.</h2>
<blockquote><p>I think if you want to eat more meat you should kill it yourself and eat it raw so that you are not blinded by the hypocrisy of having it processed for you.</p><cite>Margi Clarke</cite></blockquote>
</div>
</div>
</div><!-- /sl-slider -->
<nav id="nav-dots" class="nav-dots">
<span class="nav-dot-current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</nav>
</div><!-- /slider-wrapper -->
<div class="content-wrapper">
<h2>About this slider</h2>
<p>The Slit Slider is a slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions for the content elements. </p>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ba-cond.min.js"></script>
<script type="text/javascript" src="js/jquery.slitslider.js"></script>
<script type="text/javascript">
$(function() {
var Page = (function() {
var $nav = $( '#nav-dots > span' ),
slitslider = $( '#slider' ).slitslider( {
onBeforeChange : function( slide, pos ) {
$nav.removeClass( 'nav-dot-current' );
$nav.eq( pos ).addClass( 'nav-dot-current' );
}
} ),
init = function() {
initEvents();
},
initEvents = function() {
$nav.each( function( i ) {
$( this ).on( 'click', function( event ) {
var $dot = $( this );
if( !slitslider.isActive() ) {
$nav.removeClass( 'nav-dot-current' );
$dot.addClass( 'nav-dot-current' );
}
slitslider.jump( i + 1 );
return false;
} );
} );
};
return { init : init };
})();
Page.init();
/**
* Notes:
*
* example how to add items:
*/
/*
var $items = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>bla bla</p><cite>Margi Clarke</cite></blockquote></div></div>');
// call the plugin's add method
ss.add($items);
*/
});
</script>
</body>
</html>
Also refer the following location : http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/
I think this may help you to resolve your problems.
Upvotes: 1