I'm working on an intime upload+refresh gallery (AJAX and jQuery based)
application.
I can upload multiple images with drag & drop and after uploading. I have to see how will look like the new gallery with the uploaded elements, which is in a bxslider based carousel (without page reload). I've done this successfully with the upload-refresh part. However when refreshing the slides the bxslider attributes from configuration are being lost.
When I want to use the reloadSlider() function I see the following error in Chrome console:
Cannot read property 'reloadSlider' of undefined
$(document).ready(function() {
$('.gallery_output').bxSlider({
slideWidth: 222,
minSlides: 1,
maxSlides: 5,
pager: false,
slideMargin: 0
});
});
function refresh_slider() {
var sliderToRefresh = $('.gallery_output').bxSlider({
auto: true,
controls: true
});
sliderToRefresh.reloadSlider();
}
UPDATE:
I added a button to trigger the event, but got the same error.
$('#refresh').click(function(){
var sliderToRefresh;
sliderToRefresh = $('.gallery_output').bxSlider({
auto: true,
controls: true
});
sliderToRefresh.reloadSlider();
});
Overall I just want to reload the bxSlider with a triggered function, without page reload. Any ideas why the reloadSlider() doesn't work?
You're defining the bxSlider in .gallery_output then trying to access it on #gallery_output :)
bxSlider is not working on IE10, it is working fine in IE8 and IE9,
it is working on IE10 on mode:'fade' but not working on 'horizontal' all mode of bxSlider are working on Mozilla and Chrome.
Where is Problem
My Code for use bxSlider is
$('#slidesfMovieShowcase').bxSlider({
mode: 'horizontal',
controls: false,
pager: true,
autoHover: true,
auto: true
});
I know that this question is outdated a bit but very similar code is working for me in ie10 but inside jQuery ready function:
$(document).ready(function() {
$('#slidesfMovieShowcase').bxSlider({
mode: 'horizontal',
controls: false,
pager: true,
autoHover: true,
auto: true
});
});
IE10 is very picky on HTML errors.
as the first answer says, it should run inside a
$(document).ready(function() {
Some people experience the first image not loaded with a IE10 which freaks me out.
My experience is different:
I work with IE8/9/10 and also the
$(document).ready(...)
wasn't good; it doesn't work fine 5 times over 10! :(
At now, I've tried to put the bxslider code inside a
$(window).bind('load', function(){})
snippet and it works well 9 times over ten ...
You could try this approach ...
I had the same problem and fixed just removing the defer attribute.
Also you want to make sure to include the library first and then put your script
Before - this did not work in IE and Edge
<script src="//cdn.jsdelivr.net/bxslider/4.1/jquery.bxslider.min.js" defer="defer"></script>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
slideWidth: 850,
auto:true,
pause:3500,
useCSS:true
});
});
</script>
After - this works in IE and Edge
<script src="//cdn.jsdelivr.net/bxslider/4.1/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
slideWidth: 850,
auto:true,
pause:3500,
useCSS:true
});
});
</script>
I solve my issue by downgrade the bxslider from v4.2.12 to v4.1
I know only CSS and little to no Javascript so I need some help here. I have 2 pikachoose sliders:
$(document).ready(
function (){
$("#pikame").PikaChoose();
$("#pikame2").PikaChoose();
});
Both are autosliding as is set in javascript:
(function ($) {
var defaults = {
autoPlay: true,
speed: 5000,
How can I set #pikame2 to stop autoslide? I guess I have to set autoplay false or speed to 100k, but I don't know how to specifiy that it would only do that to the 2nd slider. Thanks!
You can pass the options in each call of the plugin, like this:
$("#pikame").PikaChoose({autoPlay:true});
$("#pikame2").PikaChoose({autoPlay:false});
$("#pikame2").PikaChoose ({autoplay: false})
You can pass options into each init call.
I am using colorbox for quite a while and its working perfectly in all kind of websites.
I have encountered a website that is really really long, and when i open the colorbox, it will open in the middle of it and not in the middle of my page view.
What can affect this???
thank you!!!!
It is most likely conflicting css on the site - not the length of the page.
Problem solved. This site didn't have any DOCTYPE.
you can also try this.
$.colorbox({
width: "600px", height: "500px", inline: false, overlayClose: false, escKey: true, iframe: true,
onComplete: function () {
$('#colorbox').removeAttr('top');//test
$('#colorbox').css('top', '100px');//test
$('#colorbox').removeAttr('display');//test
$('#colorbox').css('display', 'block');//test
},
onLoad: function () {
$('#colorbox').removeAttr('display');//test
$('#colorbox').css('display', 'none');//test
},
});
I'm using the Fancybox plugin for my modal windows. It seems like no matter what options I use I can't prevent the fancybox modal window from closing when the user clicks outside of the fancybox modal window (grayed out area).
Is there a way to force the user to click the X or a button that I trigger the close event? This seems like it should be simple so I'm hoping I'm just reading the examples wrong.
I've tried hideOnContentClick: false but that doesn't seem to be working for me. Any ideas?
jQuery(".lightbox").fancybox({
helpers : {
overlay : {
speedIn : 0,
speedOut : 300,
opacity : 0.8,
css : {
cursor : 'default'
},
closeClick: false
}
},
});
<script type="text/javascript">
$(document).ready(function() {
$("#your_link").fancybox({
'hideOnOverlayClick':false,
'hideOnContentClick':false
});
});
</script>
I'm using fancybox 1.3.1, if you wanna force the user to close the modal box ONLY by clicking on the button, you can specify in the configuration:
<script type="text/javascript">
$(document).ready(function() {
$("#your_link").fancybox({
'hideOnOverlayClick':false,
'hideOnContentClick':false
});
});
</script>
For this issue, please try this way
$("YourElement").fancybox({
helpers: {
overlay: { closeClick: false } //Disable click outside event
}
Hope this helps.
If you are using Fancybox 1.2.6 (like I am on a project), I found out the option hideOnOverlayClick. You can set it to false (e.g. hideOnOverlayClick: false).
I found this option while exploring to modify the code based on the suggestion givn by Scott Dowding.
There is no option for that. You will have to change the source code.
In jquery.fancybox-1.2.1.js you need to comment out (or delete) line 341 in the _finish method:
//$("#fancy_overlay, #fancy_close").bind("click", $.fn.fancybox.close);
I ran into the same "issue". This worked for me:
$("#fancybox-overlay").unbind();
none of the above worked for me, so i just wrote a simple bit for latest version of fancybox.
function load(parameters) {
$('.fancybox-outer').after('');
}
$(document).ready(function () {
$(".various").fancybox({
modal: true,
afterLoad: load
});
});
Hope this helps :)
The $("#fancybox-overlay").unbind() solution given for this question by #Gabriel works except I needed to bind it to the fancybox after it loads its content, and I couldn't unbind immediately. For anyone who runs into this issue, the following code solved the problem for me:
$('.fancybox').fancybox({'afterLoad' : function() {
setTimeout(function() { $("#fancybox-overlay").unbind(); }, 400);}
});
The 400ms delay got it working for me. It worked with 300ms but I didn't want to take chances.
Set the closeClick parameter to false inside your function:
$(".video").click(function() {
$.fancybox({
width: 640,
height: 385,
helpers: {
overlay: {
closeClick: false
}
}
});
return false;
});
Just add following line to your function, you do not have to change anything in jquery.fancybox-1.2.6.js
callbackOnStart : function() {$("#fancy_overlay").bind("click","null");},
you can prevent the fancy box to close by applying these setting
'showCloseButton'=>false, // hide close button from fancybox
'hideOnOverlayClick'=>false, // outside of fancybox click disabled
'enableEscapeButton'=>false, // disable close on escape key press
get the fancybox setting from following link
http://www.fancybox.net/api
I had to use a combination of all of the above answers, as all of them include errors. Certainly, no editing of the source code is necessary.
In my case, I wanted to disable overlay clicks closing the box as I had a progression of questions that would be displayed sequentially inside the fancybox, so I didn't want users to lose their progress by accidentally clicking on the overlay, but wanted to keep that functionality elsewhere on the page.
Use this to disable it:
$(".fancybox-overlay").unbind();
Use this to re-enable it:
$(".fancybox-overlay").bind("click", $.fancybox.close);
Just use the following code:
$(document).ready(function() {
$("a#Mypopup").fancybox({
"hideOnOverlayClick" : false, // prevents closing clicking OUTSIE fancybox
"hideOnContentClick" : false, // prevents closing clicking INSIDE fancybox
"enableEscapeButton" : false // prevents closing pressing ESCAPE key
});
$("a#Mypopup").trigger('click');
});
<a id="Mypopup" href="images/popup.png"><img alt="Mypopup" src="images/popup.png" /></a>
You can set the default closeClick on the overlay to false. Has worked for me in version 2.1.5.
$.fancybox.helpers.overlay.defaults.closeClick=false;