How to add pause and play function on responsive slide - javascript

I have to add a slide to my project with pause and play functions.I cannot find any code for pause and play functionality. Why it is not working.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="../responsiveslides.min.js"></script>
<script>
var forcePause = false;
// You can also use "$(window).load(function() {"
$(function () {
restartCycle = function () {
if (settings.auto) {
// Stop
clearInterval(rotate);
if (!forcePause) // new line
// Restart
startCycle();
}
};
$('.pause_slider').click(function (e) {
e.preventDefault();
forcePause = true;
$(this).hide()
$('.play_slider').show();
clearInterval(rotate);
});
$('.play_slider').click(function (e) {
e.preventDefault();
forcePause = false;
$(this).hide();
$('.pause_slider').show();
restartCycle();
});
// Slideshow 4
$("#slider4").responsiveSlides({
auto: true,
pager: false,
pauseControls:true,
nav: true,
pause: false,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<a class="pause_slider" href="#">Pause Slider</a>
<a class="play_slider" href="#">Play Slider</a>
<div class="callbacks_container">
<ul class="rslides" id="slider4">
<li>
<img src="images/1.jpg" alt="">
<p class="caption">This is a caption</p>
</li>
<li>
<img src="images/2.jpg" alt="">
<p class="caption">This is another caption</p>
</li>
<li>
<img src="images/3.jpg" alt="">
<p class="caption">The third caption</p>
</li>
</ul>
</div>
I want to have a start/stop option, to control if the slider is automatically switching between slides or paused, giving the user a bit more control.
Thanks,

Related

Tabs with multiple slideshow does not load sliders sometimes

I have created tabs. There are 3 tab items and tabs content is sliders.When i use these slideshows without tabs it works fine. But when used tabs, the slider of tab2 or tab3 sometimes does not load. It only occurs sometimes. What I have learnt that it loads perfectly on page load when using no tabs, But with tabs I have to hide the other 2 tabs on page load. So when click on these tabs, the slideshow does not appear /load sometimes.It also works fine sometimes. Tabs working fine the text content also.
I have been working on shopify, so using slideshow of theme.
Here is the code for html code for tabs:
<ul class="tabs">
<li>
<a data-toggle="tab" href="#menu1">Tab 1</a>
</li>
<li>
<a data-toggle="tab" href="#menu2">Tab 2</a>
</li>
<li>
<a data-toggle="tab" href="#menu3">Tab 3</a>
</li>
</ul>
<!-- Code for tabs Contnet -->
<div id="menu1">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image1.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image2.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image3.jpg"/>
</div>
</div>
</section>
</div>
<div id="menu2">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image21.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image22.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image23.jpg"/>
</div>
</div>
</section>
</div>
<div id="menu3">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image31.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image32.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image33.jpg"/>
</div>
</div>
</section>
</div>
Javascript for tabs
<script type="text/javascript">
$(document).ready(function() {
$('ul.tabs').each(function(){
var active, content, links = $(this).find('a');
active = links.first().addClass('active');
content = $(active.attr('href'));
links.not(':first').each(function () {
$($(this).attr('href')).hide();
});
$(this).find('a').click(function(e){
active.removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.addClass('active');
content.show();
return false;
});
});
});
</script>
I am working in shopify and the using the slider of theme, here is the code for slideshow from theme.
var slideshow = {
init: function(){
$('.js-homepage-slideshow').each(function (index, value){
var $homepageSlider = $(this);
var settings = {
slideshowSpeed: $homepageSlider.data('slideshow-speed')*1000,
slideshowTextAnimation: $homepageSlider.data('slideshow-text-animation'),
adaptiveHeight: $homepageSlider.data('adaptive-height')
}
//initiate the slideshow
if (!$homepageSlider.hasClass('flickity-enabled')){
var arrowShow = $homepageSlider.find('.gallery-cell').length === 1 ? false : true;
$homepageSlider.flickity({
adaptiveHeight: settings.adaptiveHeight,
wrapAround: true,
cellAlign: 'left',
imagesLoaded: true,
prevNextButtons: arrowShow,
draggable: arrowShow,
pageDots: usePageDots,
autoPlay: settings.slideshowSpeed,
arrowShape: arrowSize
});
if (settings.slideshowTextAnimation != ''){
var flkty = $homepageSlider.data('flickity');
setTimeout(function() {
$homepageSlider.find('.gallery-cell:nth-child(1) .caption-content').addClass('animated ' + settings.slideshowTextAnimation);
}, 400);
$homepageSlider.on( 'select.flickity', function() {
if($homepageSlider.is(':visible')) {
var currentSlide = flkty.selectedIndex + 1;
setTimeout(function() {
$homepageSlider.find('.caption-content').removeClass('animated ' + settings.slideshowTextAnimation);
$homepageSlider.find('.gallery-cell:nth-child(' + currentSlide + ') .caption-content').addClass('animated ' + settings.slideshowTextAnimation);
}, 400);
}
});
}
}
if ($homepageSlider.find('.gallery-cell').length > 1) {
$homepageSlider.addClass('multi-image');
} else {
$homepageSlider.addClass('single-image');
}
$homepageSlider.find('.gallery-cell').each(function(){
var buttonWidth = 0;
$(this).find('.action_button').each(function(){
$button = $(this);
if($(this).width() > buttonWidth){
buttonWidth = $(this).width();
}
});
$(this).find('.action_button').width(buttonWidth);
});
});
},
unload: function($target){
var $slider = $target.find('.js-homepage-slideshow');
$slider.flickity('destroy');
}
}

Thumbnail slider not working

I got a Thumbnail slider but that does not work right, When i click a particular thumb image, the main images is repeated is the same image appears.
Anyone can help me to solve this
Relevant URL: http://jsfiddle.net/danoftheman/C3Sr3/1/
$(document).ready(function() {
$(function() {
// If there are gallery thumbs on the page
if ($('#gallery-thumbs').length > 0) {
// Cache the thumb selector for speed
var thumb = $('#gallery-thumbs').find('.thumb');
// How many thumbs do you want to show & scroll by
var visibleThumbs = 4;
// Put slider into variable to use public functions
var gallerySlider = $('#gallery').bxSlider({
controls: false,
pager: false,
easing: 'easeInOutQuint',
infiniteLoop: true,
speed: 500,
onAfterSlide: function(currentSlideNumber) {
thumb.removeClass('pager-active');
thumb.eq(currentSlideNumber).addClass('pager-active');
},
onNextSlide: function(currentSlideNumber) {
slideThumbs(currentSlideNumber, visibleThumbs);
},
onPrevSlide: function(currentSlideNumber) {
slideThumbs(currentSlideNumber, visibleThumbs);
}
});
// When clicking a thumb
thumb.click(function(e) {
// -6 as BX slider clones a bunch of elements
gallerySlider.goToSlide($(this).closest('.thumb-item').index() - 6);
// Prevent default click behaviour
e.preventDefault();
});
// Function to calculate which slide to move the thumbs to
function slideThumbs(currentSlideNumber, visibleThumbs) {
// Calculate the first number and ignore the remainder
var m = Math.floor(currentSlideNumber / visibleThumbs);
// Multiply by the number of visible slides to calculate the exact slide we need to move to
var slideTo = m * visibleThumbs;
// Tell the slider to move
thumbsSlider.goToSlide(slideTo);
}
// When you click on a thumb
$('#gallery-thumbs').find('.thumb').click(function() {
// Remove the active class from all thumbs
$('#gallery-thumbs').find('.thumb').removeClass('pager-active');
// Add the active class to the clicked thumb
$(this).addClass('pager-active');
});
// Thumbnail slider
var thumbsSlider = $('#gallery-thumbs').gbxSlider({
controls: true,
pager: false,
easing: 'easeInOutQuint',
displaySlideQty: visibleThumbs,
moveSlideQty: visibleThumbs,
infiniteLoop: false,
slideWidth: 200,
minSlides: 4,
maxSlides: 4,
slideMargin: 10
});
}
});
});
.gallery-container {
width: 350px;
height: 300px;
}
.gallery-thumbs-container {
width: 350px;
height: 300px;
}
<link href="http://www.danmanning.co.uk/dev/bxslider/gallery/css/jquery.bxslider.css" rel="stylesheet" />
<link href="http://www.danmanning.co.uk/dev/bxslider/gallery/css/gallery.bxslider.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.danmanning.co.uk/dev/bxslider/gallery/js/gallery.bxslider.js" type="text/javascript"></script>
<script src="http://www.danmanning.co.uk/dev/bxslider/gallery/js/jquery.bxslider.js" type="text/javascript"></script>
<div class="gallery-container">
<div id="gallery" class="gallery-images">
<img src="http://almonard.co.in/images/products/domestic/ceiling/metalic-silver-blue.jpg" alt="" />
<img src="http://almonard.co.in/images/products/domestic/ceiling/metalic-cherry-red.jpg" alt="" />
<img src="http://almonard.co.in/images/products/domestic/ceiling/metalic-ivory.jpg" alt="" />
<img src="http://almonard.co.in/images/products/domestic/ceiling/new-super-delux-white.jpg" alt="" />
<img src="http://almonard.co.in/images/products/domestic/ceiling/new-super-delux-brown.jpg" alt="" />
</div>
<div class="gallery-thumbs-container">
<ul id="gallery-thumbs" class="gallery-thumbs-list">
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/metalic-silver-blue.jpg" alt="" />
</a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/metalic-cherry-red.jpg" alt="" />
</a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/metalic-ivory.jpg" alt="" />
</a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/new-super-delux-white.jpg" alt="" />
</a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/new-super-delux-white.jpg" alt="" />
</a>
</div>
</li>
</ul>
</div>
</div>
Update this line
gallerySlider.goToSlide($(this).closest('.thumb-item').index() -6);
to
gallerySlider.goToSlide($(this).closest('.thumb-item').index() );
http://jsfiddle.net/C3Sr3/23/

Mixed content type in magnific popup

I'm trying to make a mixed content type lightbox gallery using magnific popup like this.
here is my code
$(".mixed-type").on("click", function() {
var data_type = $(this).attr("data-type");
$(".mixed-type").magnificPopup({
disableOn: 700,
type: data_type,
mainClass: "mfp-fade",
removalDelay: 160,
preloader: false,
fixedContentPos: true,
callbacks: {
beforeOpen: function() {
this.st.mainClass = this.st.el.attr("data-class")
}
}
});
});
<div class="book-inner">
<img src="img/thumb/pic1.jpg" alt="">
<div class="book-hover">
<ul class="preview-link blue">
<li>
<a title="First image title" href="img/pic1.jpg" class="mixed-type" data-effect="mfp-zoom-in" data-type="image">+</a>
</li>
</ul>
</div>
</div>
<div class="book-inner">
<img src="img/thumb/pic2.jpg" alt="">
<div class="book-hover">
<ul class="preview-link blue">
<li>
<a title="Second image title" href="//w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/79509752&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true" class="popup-iframe audio" data-effect="mfp-zoom-in" data-class="audio" data-type="irfame"><i class="fa fa-headphones"></i></a>
</li>
</ul>
</div>
</div>
but it's not working :(
is there any suggestion.
Thanks.
You missed document.ready function in above code snippet. wrap your code inside
$(document).ready(
function() {
//put your code here
});
and use this href="" data-mfp-src="img/pic1.jpg" in your anchor tag

Content from one div to the other on click - delay

I wrote a simple function that takes content from one div and put it to the other when specified element is clicked. I did it for the image caption in my slider. So, when you click arrow which is an anchor, then content from div 'orbit-caption' assigned to the 'active' slide is put to the other one 'image-caption'.
<ul class="projects-slider" data-orbit>
<li>
<img src="img/projects/1.jpg" alt="slide 1" />
<div class="orbit-caption">
Text 1
</div>
</li>
<li>
<img src="img/projects/2.jpg" alt="slide 2" />
<div class="orbit-caption">
Text 2
</div>
</li>
<li>
<img src="img/projects/3.jpg" alt="slide 3" />
<div class="orbit-caption">
Text 3
</div>
</li>
<li>
<img src="img/projects/4.jpg" alt="slide 4" />
<div class="orbit-caption">
Text 4
</div>
</li>
<li>
<img src="img/projects/5.jpg" alt="slide 5" />
<div class="orbit-caption">
Text 5
</div>
</li>
</ul>
<span></span>
<span></span>
<footer><div class="img-caption"></div></footer>
<script>
$(document).ready(function() {
var caption = $('li.active .orbit-caption').html();
$('.img-caption').text(caption);
$('.orbit-container a').click(function() {
var caption = $('li.active .orbit-caption').html();
$('.img-caption').text(caption);
});
});
</script>
The problem is that click is delayed, I mean that when I click once, my image got description of previous one. Could someone help me with this problem and show how to simplify my function?
Is it what you want ?
http://jsfiddle.net/OxyDesign/5o3aa225/
JS
$(document).ready(function() {
$('.img-caption').text($('li.active .orbit-caption').html());
$('.orbit-next,.orbit-prev').click(function() {
var currentLi = $('li.active'),
newLi = $(this).hasClass('orbit-next') ? currentLi.next() : currentLi.prev();
if(newLi.length){
currentLi.removeClass('active');
newLi.addClass('active');
$('.img-caption').text(newLi.find('.orbit-caption').html());
}
});
});
You also can use the settings of the orbit slider (Orbit Doc) and add your function as a callback (after_slide_change) :
$(document).foundation({
orbit: {
animation: 'slide',
timer_speed: 1000,
pause_on_hover: false,
animation_speed: 500,
navigation_arrows: true,
timer: false,
bullets: false,
slide_number: false,
slide_number_text: 'of',
swipe: true,
variable_height: 'auto',
after_slide_change : function(){
$('.img-caption').text($('li.active').find('.orbit-caption').html());
}
}
});
Or you can use the event after-slide-change.fndtn.orbit (Orbit Doc)
$('[data-orbit]').on("after-slide-change.fndtn.orbit", function(event, orbit) {
$('.img-caption').text($('li.active').find('.orbit-caption').html());
});
Or
$('[data-orbit]').on("after-slide-change.fndtn.orbit", function(event, orbit) {
$('.img-caption').text($('.orbit-caption').eq(orbit.slide_number).html());
});

issue with multiple instances of jPlayer in FF and IE

i have a page that calls for multiple instances of jplayer. everything works fine in Chrome/Safari, but in FF and IE, the first instance of the player loads the 'play' button and progress bar, but the audio doesn't work.
for the 2nd and 3rd instance, the 'play' button is there, but there's no progress bar, and no audio. i'm 90% sure this is an issue with my js file, which looks like this:
$(document).ready(function() {
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "media/demo.mp3"
});
},
ended: function (event) {
$(this);
},
supplied: "mp3"
}).bind($.jPlayer.event.play, function() { // Using a jPlayer event to avoid both jPlayers playing together.
$(this).jPlayer("pauseOthers");
});
$("#jquery_jplayer_2").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "media/English_Commercial Demo.mp3"
});
},
ended: function (event) {
$(this);
},
cssSelectorAncestor:"#jp_interface_2",
supplied: "mp3"
}).bind($.jPlayer.event.play, function() {
$(this).jPlayer("pauseOthers");
});
$("#jquery_jplayer_3").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "media/English_Narration_Demo.mp3"
});
},
ended: function (event) {
$(this);
},
cssSelectorAncestor:"#jp_interface_3",
supplied: "mp3"
}).bind($.jPlayer.event.play, function() {
$(this).jPlayer("pauseOthers");
});
and heres the html:
<div class="players">
<div class="jp-audio">
<div class="jp-type-single">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_interface_1" class="jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
</div>
</div>
</div>
<div class="players">
<div class="jp-audio">
<div class="jp-type-single">
<div id="jquery_jplayer_2" class="jp-jplayer">
</div>
<div id="jp_interface_2" class="jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
</ul>
<div class="jp-progress2">
<div class="jp-seek-bar">
<div class="jp-play-bar">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="jp-audio">
<div class="jp-type-single">
<div id="jquery_jplayer_3" class="jp-jplayer"></div>
<div id="jp_interface_3" class="jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
</ul>
<div class="jp-progress2">
<div class="jp-seek-bar">
<div class="jp-play-bar">
</div>
</div>
</div>
</div>
</div>
</div>
i've removed some of the inline styling and other extraneous things like Download buttons, but can add the full code if this is too confusing/ugly (i'm sure theres an extra in there somewhere).
Neither Firefox nor IE will play an MP3 file unless you supply a valid swfPath.
You are supplying a .jp-interface element as the CSS Ancestor but this is incorrect - you need to supply "the cssSelector of an ancestor of all cssSelectors" (see the docs)
try the changes to your code i made in this Fiddle - see if it works for you.
the new HTML markup looks like this
<div class="players">
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_interface_1" class="jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="players">
<div id="jp_container_2" class="jp-audio">
<div class="jp-type-single">
<div id="jquery_jplayer_2" class="jp-jplayer"></div>
<div id="jp_interface_2" class="jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="players">
<div id="jp_container_3" class="jp-audio">
<div class="jp-type-single">
<div id="jquery_jplayer_3" class="jp-jplayer"></div>
<div id="jp_interface_3" class="jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
and the new Javascript:
$("#jquery_jplayer_1").jPlayer({
swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
ready: function () {
$(this).jPlayer("setMedia", { mp3: "http://www.freesfx.co.uk/rx2/mp3s/3/2665_1315685839.mp3" });
},
play: function () { $(this).jPlayer("pauseOthers"); },
supplied: "mp3"
});
$("#jquery_jplayer_2").jPlayer({
swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
ready: function () {
$(this).jPlayer("setMedia", { mp3: "http://www.freesfx.co.uk/rx2/mp3s/3/2664_1315685834.mp3" });
},
play: function () { $(this).jPlayer("pauseOthers"); },
cssSelectorAncestor:"#jp_interface_2",
supplied: "mp3"
});
$("#jquery_jplayer_3").jPlayer({
swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
ready: function () {
$(this).jPlayer("setMedia", { mp3: "http://www.freesfx.co.uk/rx2/mp3s/3/2660_1315685820.mp3" });
},
play: function () { $(this).jPlayer("pauseOthers"); },
cssSelectorAncestor:"#jp_interface_3",
supplied: "mp3"
});
FF doesn't actually play MP3 files but instead plays OGG files. If the demo songs in the above corrected example code from Lloyd works but when you change the MP3 path to an MP3 file on your server and it doesn't work then make sure your server has the MIME type "application/ogg" (without quotes). The server will see the MP3 file in the code and play it as if it were an OGG application file. I'm not sure why this works on my server. This is not my discovery but rather a tip I found on the Internet. Hope it works for you.
Also make sure the HTML head has Lloyd's new Javascript and is wrapped like this:
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
<script type='text/javascript' src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(function(){
Lloyd's javascript code goes here
});
//]]>
</script>
</head>
Tip: Click on Lloyd's "fiddle" link - the "Play" links work.
i don't know why it dosn't work in ie... but opera and ff don't play mp3 file
swfPath: "js",
supplied: "mp3",
wmode: "window"
In order to play them, there is Jplayer.swf file in js folder. You should write swfPath: "write the track of Jplayer.swf"...

Categories