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 :)
Related
I am a newbie to web development and I am trying to create a portfolio project for practice. My problem is that every time i reload the page it's like the js code load slow and the page shows some elements from the second page and then upload the js script.
$('#slides').superslides({
animation: 'fade',
play: 5000,
pagination: false
});
var typed = new Typed(".typed", {
strings: ["Computer Engineer.", "Data Scientist."],
typeSpeed: 90,
loop: false,
startDelay: 1000,
showCursor: false
});
I upload the code on http://jsfiddle.net/L34re768/5/ also i copy paste the superslides library that i use because the jsfiddle doesn't recognize it. I like to mention that this is not my first project that happen something like that, it happen again with other library of js. Any help please.
I want to call rollerblade.js plugin each time a picture is clicked, but it works just once, & didn't work when I changed my HTML code...
I tried to call it in a function and set onclick to my picture, but that didn't work.
$("#show").rollerblade({
imageArray: arrayOfImages,
sensitivity: 5,
drag: true,
auto: false,
edgeStop: false
});
owl.carousel.js plugin used for jquery slideshow, at the first time this slide show work correctly but when I open a new tab in firefox or chrome, I see that auto play slideshow not working.
Demo : http://minimoviez.info/
Demo : https://owlcarousel2.github.io/OwlCarousel2/demos/autoplay.html
$(document).ready(function () {
var owl = $('.owl-carousel');
owl.owlCarousel({
items: 5,
loop:true,
margin: 10,
autoplay: true,
stopOnHover : false,
autoplayTimeout: 1000,
responsive:false,
dots: false
});
$('.play').on('click', function () {
owl.trigger('play.owl.autoplay', [1000])
});
$('.stop').on('click', function () {
owl.trigger('stop.owl.autoplay')
});
});
This bug has been reported and has been fixed in the new version. bug reported link
Just update the script to the latest version.
This link:
Owl Carousel v2.3.0
I think you just need to remove the trigger by clicking "play" and "stop" buttons that you don't have.
Maybe you'll need to keep owl.trigger('play.owl.autoplay', [1000]); in your document ready function.
Try it. Right now i cannot download the plugin to try.
my problem was solved by this code
setInterval(function(){ owl.trigger('stop.owl.autoplay');
owl.trigger('play.owl.autoplay', [1000]); }, 24000);
i don't know that why this problem accord , but by this code was resolved
I am working on getting SlideJS running, and have some aspects of presentation and behavior in order.
One thing I haven't yet managed is to get it to automatically slide, or transition, from one slide to the next.
The code that is getting the reported error is line 67 in SlideJS's main plugin file, at the last line besides the closing brace below; my copy is at https://cjshayward.com/wp-content/Slides-SlidesJS-3/source/jquery.slides.js:
if (typeof TouchEvent !== "undefined") {
$.data(this, "touch", true);
this.options.effect.slide.speed = this.options.effect.slide.speed / 2;
}
Commenting out the assignment, with my invocation, suppresses the reported error, but I think the code may want more information than this line which appears to merely halve an existing setting. I can assign, without immediate reported error,
this.options.effect['qwerty'] = 'qwerty';
But I get a similar error (i.e. setting a property of undefined), if I have as much as:
this.options.effect.slide['qwerty'] = 'qwerty';
I've tried a number of configuration options, and I can see the manual circles to click to move between slides, but have not yet managed to get an automatic transition (the plugin supports slide or fade options; I want the 'slide' effect). My present options target is:
<script>// <![CDATA[
jQuery(function(){
jQuery('#slides').slidesjs({
slide:
{
speed: 200
},
interval: 2000,
active: true,
auto: true,
effect: 'slide',
height: 528,
interval: 5000,
pauseOnHover: true,
restartDelay: 2500,
swap: false,
width: 940
});
});
// ]]></script>
In view-source:http://www.slidesjs.com/, there are multiple sample invocatiosn, but the only invocation I see after slidejs.min.js's inclusion (the last script loaded from a URL) is:
<script>
$(function() {
$('#slides').slidesjs({
width: 940,
height: 350,
navigation: false
});
});
</script>
Thanks,
Have look at:-
https://jsfiddle.net/5x2tqdsv/
You need to fix your html and also remove the following line:-
effect: 'slide',
There were two issues.
One was that the HTML needed fixing.
The other was that the options were being presented, flat, where the source to http://www.slidesjs.com/examples/playing/ has:
$(function() {
$('#slides').slidesjs({
width: 940,
height: 528,
play: {
active: true,
auto: true,
interval: 4000,
swap: true,
pauseOnHover: true,
restartDelay: 2500
}
});
});
I presently have everything I want, besides the data initially displayed all at once before being Hijaxed (I should be able to address that several ways, and it's not my concern). Besides the HTML issue, there was another issue I had in that I was trying to use a flat dictionary to specify options when I needed to have one option/key (play) have its own dictionary as the value instead of e.g. a number or boolean as its value the way most other options appear to.
The updated JSfiddle I'm working from now is https://jsfiddle.net/ydvtynjL/
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.