I have been struggling with this for ever and it's making me pull my hair out!
http://webdesignsalemoregon.com/westernmennoniteschool/
I've got a slider on this home page and I'm trying to figure out how to add a "click to pause" feature to it. (and perhaps a click to resume too, haha)
I believe this is the code generating the slider
var $featured_content = jQuery('#featured #slides'),
et_featured_slider_auto = jQuery("meta[name=et_featured_slider_auto]").attr('content'),
et_featured_auto_speed = jQuery("meta[name=et_featured_auto_speed]").attr('content');
if ($featured_content.length){
var et_featured_options = {
timeout: 2000,
speed: 500,
cleartypeNoBg: true,
prev: '#featured a#featured-left',
next: '#featured a#featured-right',
pager: '#controllers',
}
if ( et_featured_slider_auto == 1 ) et_featured_options.timeout = et_featured_auto_speed;
$featured_content.cycle( et_featured_options );
}
Then I've added a simple button with ID="pauseButton" and put it above the slider. I've also got this code for that button
$('#pauseButton').click(function() {
$featured_content.cycle('pause');
});
But it doesn't actually pause the slideshow? I believe it's using the cycle plugin from http://jquery.malsup.com/cycle/ and I pulled the pause code from http://jquery.malsup.com/cycle/pause.html
Where am I going wrong?!
Your script is using jQuery.noConflict(), that causes the $ variable to be reverted back to what it was before jQuery was included. Try replacing all occurences of $() with jQuery().
jQuery('#pauseButton').click(function() {
$featured_content.cycle('pause');
});
Related
My designer put a bxslider to scroll through 3 divs nicely on my page.
When the page runs, in the html I see it generates 6 divs on the page. It shows div 3, div2, div1, div3, div2, div1.
Just because the duplicated fields on my page now mess up my programing.
Is that neccesary, and is there any way I can touch the code that it shouldn't duplicate my divs?
The page is full of complex code , with an ajax passing the data-serialize to a post form.
Becuase it's all duplicated, now all fields are coming through as 'value,value'. Therefore it's not giving me accurate respones, and well as undefined when it's supposed to be numeric.
My form posts looks like this:
function submitCart () {
$.post(
"scripts/savecart.asp",
$("#form1").serialize()
);}
How could I add that not bx- to it?
As commented in the source code of bxSlider:
if infinite loop, prepare additional slides
So I was able to fix this by adding infiniteLoop: false to the config object:
$(".js-slider").bxSlider({
infiniteLoop: false
});
BxSlider duplicates elements to allow infinite scrolling, etc. For example, say you only have two elements in your slider. Element one might be sliding out on the left, but also sliding in on the right. Therefore, duplicates are required.
If this is a problem, you can usually interact with the duplicates using their bx-clone classes. If you could clarify the actual problem, we could probably give more specific advice.
Update: To eliminate cloned elements from your set, try something like:
$('.bxslider li:not(.bx-clone)')....
I had such problem with bx-clone
I want to use it for an image gallery. So I had a thumbnail image slider and for slider I used bx-slider and on each click on small image , that image in bigger size must show in a div , But on bx-clone clicked nothing happened
I solved that problem with this :
var slider = $('.bxslider').bxSlider({
minSlides: 4,
maxSlides: 4,
slideWidth: 92,
moveSlides: 1,
pager: false,
slideMargin: 10,
onSliderLoad: function(){
$('li.bx-clone').click(function() {
/** your code for bx clone click event **/
});
}
});
Adding to #antongorodezkiy's answer, there is a way to have infiniteLoop: false and still get a non-stopping slide changing: using the onSlideAfter event of the last slide you can, after a few seconds, go back to the first slide and re-start the auto mode:
var pauseTime = 4000; //Time each slide is shown in ms. This is the default value.
var timeoutId;
var slider = $('.bxslider').bxSlider({
auto: true,
infiniteLoop: false,
pause: pauseTime,
onSlideAfter: function ($slideElement, oldIndex, newIndex) {
if (newIndex === slider.getSlideCount() - 1) { //Check if last slide
setTimeout(
function () {
slider.goToSlide(0);
slider.startAuto(); //You need to restart the "auto" mode
},
pauseTime //Use the same amount of time the slider is using
);
}
else { //In case the user changes the slide before the timeout fires
clearTimeout(timeoutId);
slider.startAuto(); //Doesn't affects the slider if it's already on "auto" mode
}
}
});
The difference between this solution and the infiniteLoop: true option is that instead of smoothly transitioning back to the first slide as if it was the next, the slider quickly "rewinds" until reaching the first slide.
for above query: Is it possible to keep having the infinite loop, but remove the clones?
try using below code: if more than 1 item infiniteloop: true else :false
infiniteLoop: ($j("...selector...").length < 2) ? false : true,
Just to answer here, so if some one is struggling and cannot fix the duplication issue. I was facing the same problem that all of my HTML from my page was duplicating inside the first slide under the image tag like bellow:
<img src="public/admin/scr3.png" ><div>..... all of my page HTML...</div></img>
I just found that I was writing the image tag not properly
Meaning my code was something like this for image tag
<img src="public/admin/scr3.png" >
I just replaced my image tag with valid HTML like bellow:
<img src="public/admin/scr3.png" />
and it fixed the content duplication issue.
Hope it will help someone.
Cheers!
I´m not sure if it´s the same issue I was facing, but here´s my case:
My code was using bx slider together with fancybox. And it was duplicating my slides. The solution was to put the secodary code (fancy box), which was generated in my image loop, inside the tag. That did it for me.
My question title may seem confusing, let explain my situation. Any help would be much appreciated.
I have never done this before, hence why I can't pin point a solution in google.
I have a jquery slideshow, which I wrapped inside a function because I have some addition animation to go with it, please see below...
// my slider function
bikeSlider = function () {
var slider = $('#bike-minislider').bxSlider({
displaySlideQty: 5,
infiniteLoop: false,
hideControlOnEnd: true
});
$('#bike-minislider-fade').fadeIn();
};
// this runs the function
bikeSlider();
As you can see, immediately after the bikeSlider function, I run the function using... bikeSlider();
Now later on, I hide some slides within the slideshow using jquery .hide().
Because my jquery slideshow function, calculates the number of visible slides within the #bike-minislider div, it means that the new number of visible slides causes the slideshow to not work. I guess it needs to re-calculate the new number of slides.
In a nutshell, I think this can be resolved by running the bikeSlider(); function again.
So I tried this below, but it did not work.
bikeFilter = function (y) {
$('.bike').fadeOut();
$('.bike[data-group=' + y + ']').fadeIn();
bikeSlider();
return false;
}
As you can see I am trying to re-run the function bikeSlider(); - but it seems to be running this over the top of the old one, so my question is, how do you remove the original slide function before running it again.
Or reloading/refreshing the original function so it re-calculate the new number slides?
Any pointers would be so helpful.
Thank You.
As i understood you dont need re-create slider, but you do exectly this by calling twice
bxSlider()
According doc you need reinit slider by
reloadShow()
//Reinitialize a slide show
For more info take a look here bxslider in section Public functions
You need to call reloadShow() for slider-object
var mySlider;
$(function(){
mySlider= $('#bike-minislider').bxSlider({
auto: true,
controls: true
});
mySlider.reloadShow();
})
Does anyone have any tips on making a pure JS image slider? I am looking to have it pause after each image and restart after going through all the images. All that I can find are jQuery plugins and I am look to do this with only JS.
i'd go for something like this:
var sliderTool = {
_totalItems : 0,
_visibleItems : 6,
_currentOffset : 0,
_timeout : null,
next : function(){
...
},
prev : function(){
...
},
play : function(){
...
},
pause : function(){
...
}
};
as a base.
every time you set timeout, save it into the _timeout field so you can clearTimeout(sliderTool._timeout) whenever you want.
next and prev can contain animations or just a simple image replacement. you can add a separate timeout for animation and for intervals between slides.
you can add an "add()" method to the sliderTool and on window.load or "body onload" add all the images and then run the start() method. you can also dynamically add images after page is loaded
maybe also add init() for autoloading and basic setup.
again, this is a basic draft of a possible solution. once you get running you'll probably run into more specific questions. Overall, as an approach, i recommend trying to come up with some solution first before asking for a general advice ;)
Ok, I'm trying to modify some already written jQuery - as background, I know Javascript decently, but I'm only so-so with jQuery. My understanding of this code is that there's a scrolling bar, which will change every 6 seconds. I am unsure if there's any video specific code in here though - right now the scrollbar has a video embedded on one of the panes, which is clicked on.
What I am trying to do, is set up an image (currently inside <div class=vid>, not shown), which when it is clicked, will stop the paning, UNTIL one of the buttons at the bottom is clicked, and it will also play a flash video.
Here's the code:
<script type="text/javascript">
jQuery(document).ready(function() {
var scroll_item = jQuery("#chained").scrollable({circular: true, mousewheel: false}).navigator().autoscroll({
interval: 6000,
autoplay: false,
autopause: false
});
window.scroll_control = scroll_item.data("scrollable");
scroll_control.play();
var $playBtn = $('#p-p-btn');
$playBtn.click(function(){
if($(this).hasClass('play')){
$(this).addClass('pause');
$(this).removeClass('play');
scroll_control.play();
} else if($(this).hasClass('pause')) {
$(this).addClass('play');
$(this).removeClass('pause');
scroll_control.stop();
};
});
jQuery('#chained').hover(
function() { scroll_control.stop(); },
function() {
if ($playBtn.hasClass('pause')) {
scroll_control.play();
}
}
);
});
</script>
I believe all I have to do is add a condition which will determine if the image has been clicked (it is in <div class=vid>, but I am going to give it an id as well probably), which will turn the paning off (perhaps by "clicking" the play/off button?), and it will also launch the video with an auto play setting.
Does that sound accurate?
How would I turn the paning off?
I don't fully understand the code, because i don't know the whole context.
But try to add this in your document ready:
$("#YOURIMAGEID").bind("click",function(){
scroll_control.stop();
$('#p-p-btn').addClass('play');
$('#p-p-btn').removeClass('pause');
//other logic
});
I have a jCarouselLite plug in on my website. I am loading the li's from a jquery.load function. I cycle through the carousel vertically and have a function that triggers as soon as the first item comes back around to the top.
At this point, I want to refresh the data with another ajax.load. This is where I run into a problem. Once that data is reloaded, the carousel stops rotating (or rather, is running in the background).
One solution I tried is to try re-instating the carousel with another:
$("#tableapp").jCarouselLite({})
line. This seems to cause two carousels to be running at the same time. And then a third, and 4th, and so on.
So basically I am looking for some way to clear the carousel, reload the updated data, then run it again. Any ideas?
$(document).ready(function () {
updateConsole() //Gets new data
scrollWindow() //Starts carousell
});
function updateConsole() {
$('#tableapp').load('AjaxPages/ApplicationMonitor.aspx #application');
}
function scrollwindow() {
$("#tableapp").jCarouselLite({
vertical: true,
hoverPause: true,
visible: 4,
auto: 6000,
speed: 500,
scroll: 4,
circular: true,
afterEnd: function (a) { ScrollEnd(a); }
});
};
function ScrollEnd(a) {
$('#tbDebug').val($('#tbDebug').val() + '\nScroll Ends');
if (**code that determines slide 1 is back on top**) {
updateConsoles();
scrollWindow(); //If this code is commented, the carousel stops cycling.
//If it isn't commented, two carousels start and things
//get buggy and eventually freezes.
}
}
I am pretty new to javascript, jquery, etc. I also tried this on jCarousel (not lite), but I couldn't get it working with vertical scrolling. It seemed buggy.
Here's a not-particulary thought out suggestion:
When you ScrollEnd, .remove that div.
http://api.jquery.com/remove/
Then recreate it and dump load into it.
Creating a div element in jQuery
Does that trick it into working?