Develop Reference

bxSlider reloadSlider() is undefined after page load

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 :)

How to change Javascript carousel (slick.js) settings on one page only?

I'm using Slick carousel by Ken Wheeler. I set the global settings (for the whole site) to autoplay slides like this:
autoplay: true,
autoplaySpeed: 5000,
but on one page on the site I don't want it to autoplay.
Is there any way I can override this global setting using an inline script?
Something like this:
<script>
function (iSuckAtJavaScript) {
autoplay: false,
};
</script>
?? Thank you!

There are a number of ways you could approach it depending on how your site is set up and how the plugin gets initialized. But to fill in the iSuckAtJavaScript part of your question, you could match on a specific path/page like this.
if (window.location.pathname === '/no-autoplay-page.html') {
// Initialize the carousel
}

jQuery image slider stops working after page sliding

I'm having a trouble with a jQuery image slider that works only the first time i open its page !
I have one main page, that includes via Ajax three page portions (Home, Presentation and Contact), the home portion contains the image slider !
To move through the pages, i use another jQuery page slider which includes the right portion and plays a sliding animation to show it !
So when i go for example from the home page to the presentation page, and then comeback to home ... the image slider isn't working anymore, and sometimes doesn't even appear !
What does it mean ?
How can i make sure the script is reloaded after the page slider finishes the transition, cause i think the problem comes from it ?
$(document).ready(function() {
$('#slides').slidesjs({
width: 700,
height: 300,
play: {
active: false,
auto: true,
interval: 3000,
swap: true
}
});
$(".menuButton").click(function() {
var page = $(this).attr("id");
var cont = $("#container");
var cont1 = $("#container1");
cont1.load("parts/"+page+".html", function() {
cont.hide("slide", {direction:"right"}, function() {
cont1.show("slide", {direction:"left"});
});
});
});
});
Thank you.

If the script is included in the portions loaded by ajax, it won't run (ajax loaded scripts are not ran by default). So basically, after the success event, just call the functions from the script.

iDangero.us Pagination option after ajax load

I'm using idangero.us swiper as an image slider and I have the option to enable the pagination and keep track of what image I'm on. The page is loaded via ajax. Here's my script,
$('#a1').bind('pageshow', function(e){
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
grabCursor: true,
paginationClickable: true })
});
Now when the page is loaded in the DOM, I get the swiper's effects and the pagination is visible, but it doesn't track my images unless I navigate away then go back. Any idea on why this is?

Ah, well now I feel like an idiot. Nothing wrong with how it was calling the swiper, it was bad html. My structure was messed up and was affecting how the swiper would work.

ColorBox centers in the middle of the page and not in the middle of pageview

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
},
});