Develop Reference

slippry.js plugin is not working

I am learning Web Design using many plugins. slippry.js is one of them but I could not figure what is wrong with my codes given bellow. I get nothing on page. Thank you
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/slippry.min.js"></script>
<link rel="stylesheet" href="css/slippry.css"/>
<script>
JQuery(document).ready(function() {
JQuery('#pictures-demo').slippry({
slippryWrapper: '<<div class="sy-box pictures-slider"/>',
adaptiveHeight: false,
captions: false,
pager: false,
// controls
controls: false,
autoHover: false,
// transitions
transition: 'kenburns', // fade, horizontal, kenburns, false
kenZoom: 140,
speed: 2000 // time the transition takes (ms)
}); });
</script>
HTML Code (index.html)
<div class="sy-box pictures-slider">
<div class="sy-slides-wrap">
<div class="sy-slides-crop">
<ul id="pictures-demo">
<li title="And this is some very long caption for slide 3. Yes, really long.">
<img src="images/MainBackground.png" alt="demo1_3">
</li>
<li title="And this is some very long caption for slide 4.">
<img src="images/MainBackground2.png" alt="demo1_4">
</li>
</ul>
</div>
</div>

You mistake is parameter of
slippryWrapper
hastwo
starting angular bracket
here :
<script>
JQuery(document).ready(function() {
JQuery('#pictures-demo').slippry({
slippryWrapper: '<div class="sy-box pictures-slider"/>',
adaptiveHeight: false,
captions: false,
pager: false,
// controls
controls: false,
autoHover: false,
// transitions
transition: 'kenburns', // fade, horizontal, kenburns, false
kenZoom: 140,
speed: 2000 // time the transition takes (ms)
}); });
</script>

There are some typos like "JQuery" (it must be: "jQuery") or a double < for the property slippryWrapper.
The updated code:
jQuery(document).ready(function () {
jQuery('#pictures-demo').slippry({
slippryWrapper: '<div class="sy-box pictures-slider"/>',
adaptiveHeight: false,
captions: false,
pager: false,
// controls
controls: false,
autoHover: false,
// transitions
transition: 'kenburns', // fade, horizontal, kenburns, false
kenZoom: 140,
speed: 2000 // time the transition takes (ms)
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/booncon/slippry/master/dist/slippry.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/booncon/slippry/master/dist/slippry.css"/>
<div class="sy-box pictures-slider">
<div class="sy-slides-crop">
<ul id="pictures-demo">
<li title="And this is some very long caption for slide 3. Yes, really long.">
<img src="http://slippry.com/assets/img/image-3.jpg" alt="demo1_3">
</li>
<li title="And this is some very long caption for slide 4.">
<img src="http://slippry.com/assets/img/image-4.jpg" alt="demo1_4">
</li>
</ul>
</div>
</div>

Adding animation to slides built with slick.js

I am attempting to add animation to the text on my slides built with slick.js. I attempted to use some code form this post(Slick Carousel target active slide to add and remove animation classes) but it is not adding any classes.
I feel like there is something wrong with my callback functions since I do not see these classes being added. Anyone have an idea?
<script>
$(document).ready(function(){
$('.featured-wrap').slick({
infinite: true,
speed: 400,
autoplaySpeed: 6000,
autoplay: true,
fade: true,
slide: 'div',
cssEase: 'linear',
dots: true,
arrows: true,
pauseOnHover: false,
adaptiveHeight: true
});
});
</script>
<script>
$(document).ready(function(){
$('.featured-wrap').on('afterChange', function(event, slick, currentSlide){
$('.slick-active .display').removeClass('hidden');
$('.slick-active .display').addClass('animated fadeInDown');
});
$('.featured-wrap').on('beforeChange', function(event, slick, currentSlide, nextSlide){
$('.slick-active .display').removeClass('animated fadeInDown');
$('.slick-active .display').addClass('hidden');
});
});
</script>

html code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.1/slick.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.1/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css"/>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<script src="app2.js"></script>
<style>
body {
background-color: lightblue;
}
#slickslide {
height: 200px;
background: lightgray;
}
#content {
margin: auto;
padding: 20px;
width: 80%;
}
</style>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<div id="demo"></div>
<div id=content>
<div id="slickslide" slick="">
<div><h1>1</h1></div>
<div><h1>2</h1></div>
<div><h1>3</h1></div>
<div><h1>4</h1></div>
<div><h1>5</h1></div>
</div>
</div>
</body>
</html>
JavaScript code
function myFunction() {
$(document).ready(function(){
$('#slickslide').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1
});
});
}

working with multiple javascripts

I have a project with some javascripts. One image viewer, a carrousel, some toggle and now I need to make a pop-up form.
But when I insert the javascript for pop-up... is stop working.
How can I make all work? or any hint to help me create a pop-up form (instead of this I use now).
Thanks in advance
this is the script in header
<script src="js/jquery-2.0.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/fancybox/jquery.fancybox.css">
<link rel="stylesheet" href="css/bootstrap-lightbox.min.css">
<link rel="stylesheet" href="css/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="css/owl-carousel/owl.theme.css">
<script type="text/javascript">
$( document ).ready(function() {
$(".toggleControl").click(function(){
$(this).siblings(".toggleDiv").slideToggle(1000);
$(this).children().children( ".collapse-expand" ).toggleClass( "collapse-ico" );
$(this).children().children( ".collapse-expand" ).toggleClass( "expand-ico" );
});
}); //document.ready end
</script>
<script src="js/popjs.js"></script>
<link rel="stylesheet" href="popupwindow.css">
<script src="popupwindow.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#newsletter').click(function (e) {
e.preventDefault();
$('#modal-content').popUpWindow({
action: "open", // open or close
modal: true, // modal mode
size: "large", // large, medium or large
buttons: [{
text: "x",
click: function () {
this.close();
}
}]
});
});
});
</script>
this is the script in footer
<script src="js/jquery-2.0.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/fancybox/jquery.fancybox.js" type="text/javascript"></script>
<script src="js/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>
<script src="js/fancybox/jquery.mousewheel-3.0.6.pack.js" type="text/javascript"></script>
<script src="js/okzoom.js"></script>
<script src="js/owl.carousel.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$("#owl-example").owlCarousel({
items : 4
})
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#pro-img-carousel').carousel({
interval: 10000
})
$('#carousel-pro-img').carousel ({
interval:8000
})
});
</script>
<script type="text/javascript">
$(function(){
$('.example').okzoom({
width: 100,
height: 100,
border: "1px solid black",
shadow: "0 0 5px #000"
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox();
$(".fancybox-effects-d").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
helpers : {
overlay : null
}
});
});
</script>
<script>
$(document).ready(function() {
function random(owlSelector){
owlSelector.children().sort(function(){
return Math.round(Math.random()) - 0.5;
}).each(function(){
$(this).appendTo(owlSelector);
});
}
$("#owl-demo").owlCarousel({
navigation: true,
navigationText: [
"<img src='images/left.png' alt='' class=''>",
"<img src='images/right.png' alt='' class=''>"
],
beforeInit : function(elem){
random(elem);
}
});
});
</script>

At first, you included jquery 3 times, bootstrap 2 times.
One time will be enought.

Since you are using Bootstrap, will be good to use this http://getbootstrap.com/javascript/#modals

jQUery Dialog Box when Clicking Navigation Bar Link not Working

I'm trying to set up a jQuery Dialog box from clicking a list element in my navigation bar. I have the code working for a separate project when clicking a canvas element but it wont work for this application. My code is as follows:
Clickable Div in Nav-Bar List:
<nav id="nav_bar">
<ul>
<li><a class="fancypdf" href="img/resume.pdf">Resume</a></li>
<li><a>Youtube</a></li>
<li class="contact" style="cursor:pointer;">Contact</li>
</ul>
</nav>
Div that Should Show up in Dialog Box:
<div class='dialog'>
Hello
</div>
jQuery:
<script>
$(function(){
$(".contact").click(function(event){
$(".dialog").dialog({
width:490,
height:500,
draggable:false,
blur:true,
show:{
effect:"blind",
duration:100
},
hide: {
effect: 'blind',
duration: 100
}
});
});
});
</script>
My "imports":
http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"> </script>
<script type="text/javascript" src="js/libs/fancybox-2.1.4/jquery.fancybox.pack.js"> </script>
<link rel="stylesheet" href="css/fancybox/jquery.fancybox-buttons.css">
<link rel="stylesheet" href="css/fancybox/jquery.fancybox-thumbs.css">
<link rel="stylesheet" href="css/fancybox/jquery.fancybox.css">
Here is all of my main script tags:
<script>
$(".fancypdf").click(function(){
$.fancybox({
type: 'html',
autoSize: false,
content: '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=80,0,0" type="application/pdf" height="99%" width="100%" />',
beforeClose: function() {
$(".fancybox-inner").unwrap();
}
}); //fancybox
return false;
}); //click
</script>
<!-- Grab Google CDN's jQuery, fall back to local if offline -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
<script>window.jQuery || document.write('<script src="js/libs/jquery- 1.7.1.min.js"><\/script>');</script>
<!-- FancyBox -->
<script src="js/fancybox/jquery.fancybox.js"></script>
<script src="js/fancybox/jquery.fancybox-buttons.js"></script>
<script src="js/fancybox/jquery.fancybox-thumbs.js"></script>
<script src="js/fancybox/jquery.easing-1.3.pack.js"></script>
<script src="js/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox({
beforeShow : function(){
this.title = this.title + " - " + $(this.element).data("caption");
}
});
}); // ready
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'elastic',
closeEffect : 'none',
beforeShow : function(){
this.title = $(this.element).data("caption");
}
});
});
</script>
<script>
var jquery = jQuery.noConflict();
jquery(function(){
jquery(".contact").click(function(event){
console.log("clicked");
jquery(".dialog").dialog({
width:490,
height:500,
draggable:false,
blur:true,
show:{
effect:"blind",
duration:100
},
hide: {
effect: 'blind',
duration: 100
}
});
});
});
</script>

It looks like you forgot to include jQuery UI or the order of jQuery and jQuery UI loaded are wrong.
Your code is working fine.
Tested in jsBin
Just make sure all js are included properly:
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

jquery marquee not working in chrome

This a code that uses jquery marquee function.This code for works perfectly well in IE and mozilla firefox but it is not working in chrome.So plz tell me how to fix this problem.
<html>
<head>
<title>scroll</title>
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.marquee.js"></script>
</head>
<body>
<div id="main" style="width:99%;min-height:100px;">
<img src="street cartoon.jpg">
</div>
<div id="scroll" style="width:99%;min-height:100px;overflow:hidden;border:solid black thin;position:absolute;">
<img src="scroll.jpg" style="margin-top: 25px;">
</div>
<script>
$(document).ready(function() {
$('#scroll').marquee({
speed:28000,
gap: 0,
delayBeforeStart:0,
direction: 'left',
duplicated: true
});
});

Try this out:- http://jsfiddle.net/adiioo7/fqg9d/
Working fine at my end.
$(document).ready(function () {
$('#scroll').marquee({
speed: 28000,
gap: 0,
delayBeforeStart: 0,
direction: 'left',
duplicated: true
});
});