Develop Reference

Bootstrap modal: close current, open new with one html modal template

I cant find solution for this. Use bs modal + slick slider and load content to modal dynamicly. Like this
$(document).ready(function() {
$(".mwrap").on("click", function() {
var img, desc, value, elements;
img = $("img", this).attr("src");
desc = $("p", this).html();
value = $("img", this).data("value");
elements = $.map($('img[data-value="' + value + '"]'), function(img) {
return $("<div/>", { //get list of images for slider in modal
html: $(img).clone()
})
})
$(".wimg").attr("src", img); //add data
$(".wdesc").html(desc);
$(".wslider").html(elements);
});
$("#myModal").on("shown.bs.modal", function() {
$(".wslider").slick({ //run slider
dots: true,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true
});
$('html').removeClass('.hide-slider');
});
$("#myModal").on("hide.bs.modal", function() {
$(".wslider").slick('destroy').html(""); //destroy slider
})
});
How i can open another modal and close current by click on slider element?

bxSlider: How to prevent bxSlider from going to next slide?

I am using a bxSlider plugin to create a JS web application. On one slide there is a form which needs to be validated before I can get to a next slide. For validation I use jQuery Validate plugin which returns true / false when the form is valid.
How to make bxSlider not to go to next slide when form is not valid? I would prefer to use default bxSlider next/prev controls.
Function that initialize bxSlider:
bxSliderInit: function() {
var $slider = $(dom.slider);
$(dom.body).on('click', dom.pageLink, function(e) {
e.preventDefault();
_this = $(this);
slideFinished = true;
//newSlide = _this.data('slide-index');
app.slidePaging();
});
slider = $slider.bxSlider({
mode: 'horizontal',
easing: 'ease-out',
infiniteLoop: false,
touchEnabled: false,
preventDefaultSwipeY: true,
preventDefaultSwipeX: true,
responsive: false,
slideWidth: 1024,
pager: false,
prevText: '<i class="icon icon-arrow-left"></i>',
nextText: '<i class="icon icon-arrow-right"></i>',
onSlideBefore: function($slideElement, oldIndex, newIndex) {
app.slideValidation($slideElement, oldIndex, newIndex);
}
});
},
BxSlider callback onSlideBefore to validate the form
slideValidation: function($slideElement, oldIndex, newIndex) {
var $thisSlidevalidationForm = $(dom.slider).children().eq(oldIndex).find(dom.formValidationClass),
validationFromExist = $thisSlidevalidationForm.length > 0 ? true : false;
if (oldIndex < newIndex) {
if (validationFromExist) {
if (!$thisSlidevalidationForm.valid()) {
//slider.dontDoTransition
}
}
}
},
Everything seems to work fine, I just can't force the bxSlider to stay on the current slide when the form is not valid...
Thank u for ur help!

After some experiments and ideas, here is the solution:
onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
return currentSlideNumber--;
}

How to restart liquidslider on tab click?

I have a page with multiple sliders - each within its own tab. I'd like for the sliders to start over if a user leaves a tab and then returns.
Dev link: http://dev.triciafrancis.com/mbrstudios/case-studies/
Here is the code I'm using for liquidslider and tabs:
//Use liquid slider to setup slides within tabbed content
$('#tabs .tab .liquid-slider').liquidSlider({
preloader: true,
autoHeight: false,
dynamicTabs: true,
dynamicTabsHtml: true,
dynamicTabsAlign: 'center',
dynamicTabsPosition: 'bottom',
panelTitleSelector: '.slide-nav',
dynamicArrows: true,
dynamicArrowsGraphical: true,
hideSideArrows: true,
hoverArrows: false,
hoverArrowDuration: 250,
autoSlide: true,
continuous: true,
autoSlideInterval: 5000,
autoSlideDirection: 'right',
slideEaseFunction: 'easeOutCirc',
heightEaseFunction: 'easeOutCirc'
});
//Set transitions for tab changes and activate first tab
$('.sub-menu a:visible').on('click', function(e) {
e.preventDefault();
$('.sub-menu a.active').removeClass('active');
$('.tab:visible').hide();
window.scrollTo(0, 0);
$(this.hash).fadeIn('slow');
if($('.ls-nav:visible a').length < 2) {
$('.ls-wrapper:visible').addClass('single-slide');
};
$(this).addClass('active');
}).filter(':first').click();
}

I emailed the plugin author and got the following feedback:
I would use the API to control the sliders inside. There are a few
things you could do...
var api = $.data( $('#slider')[0], 'liquidSlider');
This will store the slider as an object and give you access to its
functions.
api.setNextPanel(1)
This will set the panel to the first one. So you would have to set up
an event that sets all the sliders to the first panel based on the
action you desire. I'm assuming you would want to use the
pretransition function in the parent slider.
Here is some more information:
https://kevinbatdorf.github.io/liquidslider/examples/page1.html#advanced-controls
I applied this method and initially could only get it to work on the slideshow within the first tab. So I had to restructure the selector for liquidslider and apply the the technique to each tab. There's probably a more efficient way, but this is what I got to work:
//Use liquid slider to setup slides within tabbed content
$('#tab1-images, #tab2-images, #tab3-images, #tab4-images').liquidSlider({
preloader: true,
autoHeight: false,
dynamicTabs: true,
dynamicTabsHtml: true,
dynamicTabsAlign: 'center',
dynamicTabsPosition: 'bottom',
panelTitleSelector: '.slide-nav',
dynamicArrows: true,
dynamicArrowsGraphical: true,
hideSideArrows: true,
hoverArrows: false,
hoverArrowDuration: 250,
autoSlide: true,
continuous: true,
autoSlideInterval: 5000,
autoSlideDirection: 'right',
slideEaseFunction: 'easeOutCirc',
heightEaseFunction: 'easeOutCirc'
});
//Reset slideshows to first image on tab click
$('.sub-menu li:nth-child(1n) a').on('click', function() {
var tabImages = '#tab1-images';
if($(tabImages).length) {
var api = $.data( $(tabImages)[0], 'liquidSlider');
api.setNextPanel(0);
}
})
$('.sub-menu li:nth-child(2n) a').on('click', function() {
var tabImages = '#tab2-images';
if($(tabImages).length) {
var api = $.data( $(tabImages)[0], 'liquidSlider');
api.setNextPanel(0);
}
})
$('.sub-menu li:nth-child(3n) a').on('click', function() {
var tabImages = '#tab3-images';
if($(tabImages).length) {
var api = $.data( $(tabImages)[0], 'liquidSlider');
api.setNextPanel(0);
}
})
$('.sub-menu li:nth-child(4n) a').on('click', function() {
var tabImages = '#tab4-images';
if($(tabImages).length) {
var api = $.data( $(tabImages)[0], 'liquidSlider');
api.setNextPanel(0);
}
})
//Set transitions for tab changes and activate first tab
$('.sub-menu a:visible').on('click', function(e) {
e.preventDefault();
$('.sub-menu a.active').removeClass('active');
$('.tab:visible').hide();
window.scrollTo(0, 0);
$(this.hash).fadeIn('slow');
//Add class to single-image slides, so navigation elements can be hidden with css
if($('.ls-nav:visible a').length < 2) {
$('.ls-wrapper:visible').addClass('single-slide');
};
$(this).addClass('active');
}).filter(':first').click();

Disable mouseover until animation complete

I use jquery caroufredsel to create a slider, and then attach mouseover event to the items so that when mouse over the item it will center the selected one. here is the script
$(document).ready(function(){
$('#carousel-popular').carouFredSel({
width: '100%',
items: 5,
scroll: 1,
auto: false,
prev: '#prev-popular',
next: '#next-popular',
pagination: '#pager'
});
$('#carousel-popular img').off('mouseover').on('mouseover', function(){
var self = this;
$(this).attr('data-url', '<?php echo site_url('video/video_display'); ?>/'+$(this).data('vid'));
$('#carousel-popular').trigger('slideTo', [$(this), -2]);
$('#home-sidebar').load('<?php echo site_url('home/get_imdb');?>/'+$(this).data('vid'), function(){
$('#carousel-popular img').removeClass('selected');
$(self).addClass('selected');
});
// $('.caroufredsel_wrapper').css({
// "background" : "url(<?php echo base_url(); ?>images/shadow.png) center 95% no-repeat"
// });
});
$('#carousel-popular img').on('click', function(){
if($(this).hasClass('selected')){
window.location = $(this).data('url');
}
})
var sbHeight = $('body').height() - $('#header').height();
$('#home-sidebar').css({
"height": sbHeight+'px'
});
setTimeout(function(){
$('#carousel-popular img').eq(0).trigger('mouseover');
}, 500);
});
The problem is when an item is sliding to center another images catch the mouseover because the mouse pointer is still on the track. How to disable this mouseover event untill the selected image is centered?
fiddle

I'm not entirely sure of the issue, but you could try this:
$('#carousel a').on('mouseenter', function(){
$('#carousel').trigger('slideTo', [$(this), -2]);
});
That triggers the animation when the mouse moves over the element

pretty unclear question to me, is this what you want: http://jsfiddle.net/8W25g/2/
$('#carousel').carouFredSel({
items: 4,
scroll: 1,
auto: false,
prev: '#prev-popular',
next: '#next-popular',
pagination: '#pager'
});
var mouseoverFunc=function(){
$('#carousel a').unbind('mouseover');
$('#carousel').trigger('slideTo', [$(this), -2]);
};
var mouseoutFunc=function(){
setTimeout(function(){
$('#carousel a').bind('mouseover',mouseoverFunc);
},400);
};
$('#carousel a').bind('mouseover', mouseoverFunc);
$('#carousel a').bind('mouseout', mouseoutFunc);

How to start/stop ResponsiveSlides.js?

I am testing some new stuff on responsive sliders, and I got stranded on something while using this plugin: http://responsiveslides.com/
Can anyone help me on how to create a start/stop function for the slider? 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.
The only option available in the slider yet is to start/stop on hover. I need it to start/stop when I click a custom element in the DOM.

you will need to add some code to the plugin.
First, create a variable named forcePause:
fadeTime = parseFloat(settings.speed),
waitTime = parseFloat(settings.timeout),
maxw = parseFloat(settings.maxwidth),
forcePause = false, // <---- here!
In the restartCycle method you need to check if the paused is forced or not:
restartCycle = function () {
if (settings.auto) {
// Stop
clearInterval(rotate);
if ( !forcePause ) // new line
// Restart
startCycle();
}
};
After that, you can add something like that in the line 300:
$( '.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();
});
You will need two HTML elements with each class to do his work. The forcePause avoid to restart de slider after hovering it.
I know it's not the best solution ever, but it does the trick.
You can see it working here:
http://jsbin.com/eHaHEVuN/1/
Also you will find the code. :) I hope this works for you.

Control start/stop with pause parameter:
$(".rslides").responsiveSlides({
auto: true, // Boolean: Animate automatically, true or false
speed: 500, // Integer: Speed of the transition, in milliseconds
timeout: 4000, // Integer: Time between slide transitions, in milliseconds
pager: false, // Boolean: Show pager, true or false
nav: false, // Boolean: Show navigation, true or false
random: false, // Boolean: Randomize the order of the slides, true or false
pause: true, // Boolean: Pause on hover, true or false
pauseControls: true, // Boolean: Pause when hovering controls, true or false
prevText: "Previous", // String: Text for the "previous" button
nextText: "Next", // String: Text for the "next" button
maxwidth: "", // Integer: Max-width of the slideshow, in pixels
navContainer: "", // Selector: Where controls should be appended to, default is after the 'ul'
manualControls: "", // Selector: Declare custom pager navigation
namespace: "rslides", // String: Change the default namespace used
before: function(){}, // Function: Before callback
after: function(){} // Function: After callback
});

There's another simple solution - enable pause on hover, then emulate hover:
JS:
$(".rslides").responsiveSlides({
pause: true
});
$('.carousel-pause .pause').click(function(e){
$(this).hide();
$('.play').show();
$('.rslides').trigger('mouseenter');
});
$('.carousel-pause .play').click(function(e){
$(this).hide();
$('.pause').show();
$('.rslides').trigger('mouseleave');
});
HTML:
<div class="carousel-pause">
<span class="pause">Pause</span>
<span class="play">Play</span>
</div>

Built off of answer from #miduga to get solution tailored to allow external events to pause slide show.
I ended up creating a global variable of window.responsiveSlidesForcePause that is used in the rotate interval to determine if rotate should occur. Ideally, there should be a public method that pauses the individual slideshow, but this is a quick hack that will pause any slideshow on the page. My situation only needed a single slideshow on a page that will have a short lifespan.
http://jsfiddle.net/egeis/wt6ycgL0/
Initialize global variable:
return this.each(function () {
// Index for namespacing
i++;
window.responsiveSlidesForcePause = false; // new global variable
var $this = $(this),
Use global variable:
startCycle = function () {
rotate = setInterval(function () {
if (!window.responsiveSlidesForcePause) { // new if statement
// Clear the event queue
$slide.stop(true, true);
var idx = index + 1 < length ? index + 1 : 0;
// Remove active state and set new if pager is set
if (settings.pager || settings.manualControls) {
selectTab(idx);
}
slideTo(idx);
}
}, waitTime);
};
Which allows the events that pause the slideshow to be outside the actual plugin.
$(document).ready(function() {
$( "#slider" ).responsiveSlides({ nav: true, prevText: '', nextText: '' });
$( ".pause_slider" ).on("click", function (e) {
e.preventDefault();
$(this).hide();
$( '.play_slider' ).show();
window.responsiveSlidesForcePause = true;
});
$( '.play_slider' ).click( function(e) {
e.preventDefault();
$( this ).hide();
$( '.pause_slider' ).show();
window.responsiveSlidesForcePause = false;
});
});