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>

BxSlider with Thumbnails - Thumbnails dont slide along with the slider

I'm trying to fix a thumbnail BxSlider to work properly. I'm struggling with those:
1) When clicking on a thumbnail image the thumbnail slider has to slide along with the main slider.
2) And also making the main slider dragable. In order to change slides with the mouse.
3) The thumbnail arrows dont move the slides.
I've made an JSFIDDLE for you to see
And this is my my js code:
$(function() {
var initThumbnailsSlider = function(object) {
var $bxSlider = $(object);
if ($bxSlider.length < 1) {
return;
}
$bxSlider.bxSlider({
controls: false,
pagerCustom: '#bx-pager',
easing: 'easeInOutQuint',
infiniteLoop: true,
speed: 500
});
$('.bx-custom-pager').bxSlider({
mode: 'horizontal',
maxSlides: 4,
minSlides: 2,
slideWidth: 156,
slideMargin: 25,
easing: 'easeInOutQuint',
controls: true,
nextText: "<i class='icm icm-Arrow_right'></i>",
prevText: "<i class='icm icm-Arrow_left'></i>",
pager: false,
moveSlides: 1,
infiniteLoop: false,
speed: 500,
onSlideBefore: bxMove
});
function bxMove($ele, from, to) {
var idx = parseInt(to, 10) - 1;
bx.goToSlide(idx);
}
};
// execute the function
initThumbnailsSlider('[data-bx-slider]');
});
Thanks a lot.
============================================
I've made a little search and i updated my JSFIDDLE
And I changed that part of my js code:
But sometimes it freezes :/
$bxPager.bxSlider({
mode: 'horizontal',
maxSlides: 4,
minSlides: 2,
slideWidth: 156,
slideMargin: 25,
easing: 'easeInOutQuint',
controls: true,
pager: false,
moveSlides: 1,
speed: 500,
onSlideBefore: bxMove
});
function bxMove($ele, from, to) {
var idx = parseInt(to, 10) - 1;
$bxSlider.goToSlide(idx);
}

I've used BxSlider before and haven't tried the slider you want to achieve. However, If you won't mind, I suggest that you try Slick. Below is a sample code that perfectly achieve what you want for your slide with lesser blocks of codes.
$('.product-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.custom-pager'
});
$('.custom-pager').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.product-slider',
dots: false,
centerMode: true,
focusOnSelect: true
});
.custom-pager .img-container {
width: 167px;
height: 165px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
overflow: hidden;
}
.product-slider .img-container {
height: 525px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
overflow: hidden;
}
.slide a{
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<ul class="bxslider product-slider">
<!-- li.item -->
<li class="slide">
<div class="img-container" style="background-color: #f3f3f3; background-image: url('http://vignette4.wikia.nocookie.net/devilmaou/images/9/92/Giratina.png/revision/latest?cb=20140413190250')">
</div>
</li>
<!-- li : end -->
<!-- li.item -->
<li class="slide">
<div class="img-container" style="background-color: #f8f8f8; background-image: url('http://2.bp.blogspot.com/--gORRn5tL04/UDhREh-LLAI/AAAAAAAASA8/RN4gNJDMUm4/s1600/245Suicune+pokemon+gold+and+silver+artwork.png')">
</div>
</li>
<!-- li : end -->
<!-- li.item -->
<li class="slide">
<div class="img-container" style="background-color: #f3f3f3; background-image: url('http://vignette3.wikia.nocookie.net/pokemon/images/5/5c/486Regigigas_Pokemon_Ranger_Guardian_Signs.png/revision/latest?cb=20150114033117')">
</div>
</li>
<!-- li :end -->
<!-- li.item -->
<li class="slide">
<div class="img-container" style="background-color: #f3f3f3; background-image: url('http://www.legendarypokemon.net/images/xy/megavenusaur.jpg')">
</div>
</li>
<!-- li :end -->
</ul>
<ul id="bx-pager" class="custom-pager">
<!-- li.item -->
<li class="slide">
<a class="block" data-slide-index="0">
<div class="img-container" style="background-color: #f3f3f3; background-image: url('http://vignette4.wikia.nocookie.net/devilmaou/images/9/92/Giratina.png/revision/latest?cb=20140413190250')">
</div>
</a>
</li>
<!-- li : end -->
<!-- li.item -->
<li class="slide">
<a class="block" data-slide-index="1">
<div class="img-container" style="background-color: #f8f8f8; background-image: url('http://2.bp.blogspot.com/--gORRn5tL04/UDhREh-LLAI/AAAAAAAASA8/RN4gNJDMUm4/s1600/245Suicune+pokemon+gold+and+silver+artwork.png')">
</div>
</a>
</li>
<!-- li : end -->
<!-- li.item -->
<li class="slide">
<a class="block" data-slide-index="2">
<div class="img-container" style="background-color: #f3f3f3; background-image: url('http://vignette3.wikia.nocookie.net/pokemon/images/5/5c/486Regigigas_Pokemon_Ranger_Guardian_Signs.png/revision/latest?cb=20150114033117')">
</div>
</a>
</li>
<!-- li : end -->
<!-- li.item -->
<li class="slide">
<a class="block" data-slide-index="3">
<div class="img-container" style="background-color: #f3f3f3; background-image: url('http://www.legendarypokemon.net/images/xy/megavenusaur.jpg')">
</div>
</a>
</li>
<!-- li : end -->
</ul>

UPDATE
Since the original code is closer to what you wanted, but IMO not as good as the newer version, I figured I'll add it here:
Every click on an arrow advances both sliders in the same direction.
Every 6 clicks in one direction will cause the top slider to return to the same slide as the second slider's middle slide.
A click on one of the second slider's slide will make the first slider jump to the corresponding slide.
For some reason, the stack snippet is having DNS issues, so take a look at the
PLUNKER
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SO35203571-38778710</title>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css" />
<style>
#bx-pager {
left: 25px;
}
.bx-wrapper a.active {
border: 2px solid red;
}
.bx-controls-direction a {
top: -100% !important;
}
}
</style>
</head>
<body>
<ul class="bxslider">
<li>
<img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/me_trees.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/houses.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/tree_root.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/hill_fence.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/trees.jpg" />
</li>
</ul>
<div id="bx-pager">
<a data-slide-index="0" href="">
<img src="http://bxslider.com/images/730_200/hill_trees.jpg" width="100" />
</a>
<a data-slide-index="1" href="">
<img src="http://bxslider.com/images/730_200/me_trees.jpg" width="100" />
</a>
<a data-slide-index="2" href="">
<img src="http://bxslider.com/images/730_200/houses.jpg" width="100" />
</a>
<a data-slide-index="3" href="">
<img src="http://bxslider.com/images/730_200/tree_root.jpg" width="100" />
</a>
<a data-slide-index="4" href="">
<img src="http://bxslider.com/images/730_200/hill_fence.jpg" width="100" />
</a>
<a data-slide-index="5" href="">
<img src="http://bxslider.com/images/730_200/trees.jpg" width="100" />
</a>
</div>
<script src="http://cdn.jsdelivr.net/jquery/2.2.0/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<script>
$(function() {
var bx = $('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
controls: false
});
var cx = $('#bx-pager').bxSlider({
mode: 'horizontal',
maxSlides: 3,
minSlides: 3,
moveSlides: 1,
slideWidth: 275,
slideMargin: 40,
pager: false,
onSlideBefore: bxMove
});
function bxMove($ele, from, to) {
var idx = parseInt(to, 10) - 1;
bx.goToSlide(idx);
}
});
</script>
</body>
</html>
When I wrote that, my intentions was to sync both sliders, but what I didn't know back then is that when using a carousel and using a variable range on min/maxSlides option gets really messy. bxSlider will clone slides in order to cover any inconsistencies like having an odd number of slides on an infiniteLoop while a resize occurs. That's a ton of calculations and memory, hence bxSlider freezing up, or ending up with slides only clearing halfway past the edge are common occurrences.
I've refactored it then added your Pokemon theme and Bootstrap to my original Fiddle. There are a number of changes but I'll try to keep it brief:
Using the advanced easing options like: easing:'ease-in-out' requires:
useCSS: true (default)
jQuery Easing script loaded. So this should be added after the jquery.bxslider.min.js <script> tag:
<script src="https://cdn.jsdelivr.net/jquery.easing/1.3/jquery.easing.1.3.min.js"></script>
Btw 'easeInOutQuint' isn't a value available with easing option, it's now `easing:'ease-in-out'. I have no idea why I added it in the first place.
The thumbnail slider .bx-pager is now immobilized for 2 good reasons:
The design of thumbnail navigation (or any navigation for that matter), should be presented in it's full capacity.
The extra coordination involved in syncing a slider that presents one slide (i.e. .bxslider) and a slider that presents 4 slides (i.e. .bx-pager) becomes problematic.
instantiate bxSlider in an expression:
var bx = $('.bxslider').bxSlider();
This makes using methods easier:
bx.goToSlide()
Removed all controls since .bx-pager is more than sufficient.
Tricked out thumbnails:
Used PNGs with a transparent background.
Added a simple function that toggles a class .on to the active thumbnail (i.e. .imgThumb.on}
This .on class employs transform, position, z-index, and transition CSS properties to animate.
If you resize the width smaller, you'll see the thumbnails layer on top of each other. That's a nice effect possible by using transparent background and avoiding cropping. So the background-size: cover which crops images is changed to background-size: contain which proportionally stretches the image to an element's edges without cropping.
Here's the demo. Good luck, sir.
FIDDLE

jQuery Owl Carousel animation for items value 2

When I am trying to use owl carousel's animate In and out feature and am showing 2 items, the transition animation is not working.
This is the configuration I am trying: (items:2)
$('[shoppable-image-container]').owlCarousel({
loop:true,
nav: true,
navText: ["<a><span></span></a>","<a><span></span></a>"],
lazyLoad : true,
dots: true,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
items:2,
margin:10 ,
autoplay:true,
// autoplayTimeout:4000,
smartSpeed:2000
});
with the following configuration animation it is working fine:(items:1)
$('[shoppable-image-container]').owlCarousel({
loop:true,
nav: true,
navText: ["<a><span></span></a>","<a><span></span></a>"],
lazyLoad : true,
dots: true,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
items:1,
margin:10 ,
autoplay:true,
// autoplayTimeout:4000,
smartSpeed:2000
});
How can I achieve multiple items (specifically 2 items) animation together using owl Carousel? Is this possible with owl carousel?

Try this:
$('.loop-test').owlCarousel({
loop: true,
items: 2,
nav: true
});
$('.loop-test').on('translate.owl.carousel', function(event) {
$(this).find(".item").hide();
});
$('.loop-test').on('translated.owl.carousel', function(event) {
$(this).find(".item").fadeIn(800);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.green.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>
<div class="owl-carousel owl-theme loop-test">
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
</div>

slides.js not working

I have HTML which includes scripts in following order
<script src="../static/js/jquery.js" type="text/javascript">
<script src="../static/js/bootstrap.js" type="text/javascript">
<script src="../static/js/slides.js" type="text/javascript">
<script src="../static/js/app.js" type="text/javascript">
and images are tied to div as
<div id="slideshow">
<div id="slides">
<img src="../static/img/slideshow/01.JPG">
<img src="../static/img/slideshow/02.JPG">
<img src="../static/img/slideshow/03.JPG">
<img src="../static/img/slideshow/04.JPG">
<img src="../static/img/slideshow/05.JPG">
<img src="../static/img/slideshow/06.JPG">
</div>
</div>
where jquery.js is JQuery v1.7.2 and slide.js is latest slide.js downloaded.
To me it seems correct order as well. What my app.js does is
$(function(){
$('#slides').slides({
width: 600,
height: 120,
pagination: false,
previous: false
});
$('#slides').slides("play");
});
I tried on both Firefox and Chrome, it doesn't seem to work, all my images are displayed one after the another
What is that I am not doing right here??

You forget some div classes.
You can find a jsfiddle example I put in place here : http://jsfiddle.net/rNF8G/
EDIT 1:
You can add the play: 2000 property to the first block instead of calling it like this : $('#slides').slides("play");
See my edit here : http://jsfiddle.net/rNF8G/1/
EDIT 2:
To remove pagination, all you have to do is to add the following property :
generatePagination: false
You can see it in the following update : http://jsfiddle.net/rNF8G/117/

Instead of this...
$(function(){
$('#slides').slides({
width: 600,
height: 120,
pagination: false,
previous: false
});
$('#slides').slides("play");
});
try this...
$(document).ready(function(){
$('#slides').slides({
width: 600,
height: 120,
pagination: false,
previous: false
});
$('#slides').slides("play");
});
You don't seem to be attaching the handler correctly to the document ready event
If that doesn't work, can you provide a jsfiddle?

Try with JQuery Cycle: http://jquery.malsup.com/cycle/
HTML
<div id="slides">
<img src="../static/img/slideshow/01.JPG">
<img src="../static/img/slideshow/02.JPG">
<img src="../static/img/slideshow/03.JPG">
<img src="../static/img/slideshow/04.JPG">
<img src="../static/img/slideshow/05.JPG">
<img src="../static/img/slideshow/06.JPG">
</div>
JQuery
$('#slides').cycle({
fx: 'scrollRight',
speed: 'slow',
timeout: 5000
});

How to run a function defined on a jQuery plugin?

I have searched for 3 days the web to find a solution to my simple problem.
I try to run the pause function in a external <a> tag from this script: http://www.twospy.com/galleriffic/js/jquery.galleriffic.js
pause: function() {
this.isSlideshowRunning = false;
if (this.slideshowTimeout) {
clearTimeout(this.slideshowTimeout);
this.slideshowTimeout = undefined;
}
I tried something like this: pause
edit: whole script:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/galleriffic-2.css" type="text/css" />
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
<!-- We only want the thunbnails to display when javascript is disabled -->
<script type="text/javascript">
document.write('<style>.noscript { display: none; }</style>');
</script>
</head>
<body>
<!-- Start Advanced Gallery Html Containers -->
<div id="gallery" class="content">
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<a id="sstop" href="#">pause</a> <!--here the link-->
<div id="caption" class="caption-container"></div>
</div>
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li>
...
</ul>
</div>
<div style="clear: both;"></div>
<script type="text/javascript">
var galleryswtch=0;
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
//$('div.content').css('display', 'none');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 3,
preloadAhead: 10,
enableBottomPager: true,
maxPagesToShow: 11,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.animate({opacity: '0'}, 500, 'linear', callback);
},
onPageTransitionIn: function() {
this.animate({opacity: '1'}, 500, 'linear');
}
});
$('#sstop').click(function() {$('#gallery').galleriffic('pause');}); //here the js
});
</script>
</body>

As Galleriffic is a jQuery extension that acts on DOM elements it should be:
$(myselector).galleriffic("pause");
where myselector is a reference to whichever element has had the gallery attached to it [e.g. '#thumbs' if you're using the same element IDs as in the Galleriffic examples.]
Ideally, make this association in your JS files rather than doing it inline in the HTML by first giving your link and ID:
Pause
and then:
$(document).ready(function() {
// do all of the rest of your galleriffic setup
$('#thumbs').galleriffic(
// initial options
);
// and then link the pause link with the gallery
$('#pause_link').click(function() {
$('#thumbs').galleriffic('pause');
});
});
[rationale - in modern HTML putting your Javascript inline is considered "olde worlde"]

To invoke a function with no parameters (such as this one), you should call it like pause().

try this
yourobjectname.pause();

Any reason why
$('#myElement').delay(2000)
wont work?
or is it pausing for undefined time?
if so just make a new function and call it on your a.click event :)