I have such code in one .js file:
var ready;
ready = function() {
var galleries = $('.car-gallery').adGallery({
loader_image: '../assets/loader.gif',
slideshow: {
enable: false,
autostart: false,
speed: 5000,
start_label: 'Start',
stop_label: 'Stop',
// Should the slideshow stop if the user scrolls the thumb list?
stop_on_scroll: true,
// Wrap around the countdown
countdown_prefix: '(',
countdown_sufix: ')',
onStart: function() {
// Do something wild when the slideshow starts
},
onStop: function() {
// Do something wild when the slideshow stops
}
}});
};
$(document).ready(ready);
$(document).on('page:load', ready);
but in my rails 4 app i use turbolinks, and sometimes is so,that images are not loaded, but document is ready and i can't start ('.car-gallery').adGallery
maybe there are any ways to don't reload page, and use window.load with turbolinks? and how?
Apart from JQueryTurbolinks, as shown in the comments, it seems your JQuery is not binding to the page load events as it should
I would recommend this code (if you want to keep a native solution):
var galleries = function() {
$('.car-gallery').adGallery({
loader_image: '../assets/loader.gif',
slideshow: {
enable: false,
autostart: false,
speed: 5000,
start_label: 'Start',
stop_label: 'Stop',
// Should the slideshow stop if the user scrolls the thumb list?
stop_on_scroll: true,
// Wrap around the countdown
countdown_prefix: '(',
countdown_sufix: ')',
onStart: function() {
// Do something wild when the slideshow starts
},
onStop: function() {
// Do something wild when the slideshow stops
}
});
};
$(document).on('page:load ready', galleries);
Can you try adding this:
var alert = function(){
alert("loaded");
};
$(document).on("page:load ready", alert);
Update
After a conversation, we found this was the solution which worked best:
#JS
$('.car-gallery').adGallery({
loader_image: '../assets/loader.gif',
slideshow: {
enable: false,
autostart: false,
speed: 5000,
start_label: 'Start',
stop_label: 'Stop',
// Should the slideshow stop if the user scrolls the thumb list?
stop_on_scroll: true,
// Wrap around the countdown
countdown_prefix: '(',
countdown_sufix: ')',
onStart: function() {
// Do something wild when the slideshow starts
},
onStop: function() {
// Do something wild when the slideshow stops
}
});
#view
<%= link_to "link", path, data: { no-turbolink: true } %>
Related
Im using jquery lazyload to load my images
but a part of my website has carouFredSel
when i click on next button the next images are not loaded because require to scroll the page, so is there any way to get images loaded on every slide?
jQuery(".foo4").carouFredSel({
auto: !1,
prev: ".prev4",
next: ".next4",
pagination: ".pager4",
mousewheel: !0,
swipe: {
onMouse: !0,
onTouch: !0
}
}),
above code is the javascript to slide the carousel and below I have my lazyscript
jQuery("img.lazy").lazyload();
Any help is very appreciated!
In carouFredSel, you provide the image url in data-src like
<img data-src="image-url"/>
So to show the image in you need to configure, in OnBefore of carouFredSel like.
scroll: {
onBefore: function( data ) {
var $current = data.items.visible.first(),
visible = data.items.visible,
src = visible.data('src');
visible.attr('src', src);
}
}
Add this lines in your carouFredSel code like
jQuery(".foo4").carouFredSel({
auto: !1,
prev: ".prev4",
next: ".next4",
pagination: ".pager4",
mousewheel: !0,
swipe: {
onMouse: !0,
onTouch: !0
},
scroll: {
onBefore: function( data ) {
var $current = data.items.visible.first(),
visible = data.items.visible,
src = visible.data('src');
visible.attr('src', src);
}
}
});
I believe I solved this issue for lazy loading images with caroufredsel
$('#youtube-playlist').carouFredSel({
width: '100%',
height: "variable",
circular: false,
infinite: false,
responsive: true,
items: {
visible: {
min: 2,
max: 4
}
},
onCreate: function(data) {
// Swap data-src for first 4 items
// console.log(data);
$(this).find("img[data-src]").each(function (i, item) {
$(this).attr('src', $(this).attr('data-src')).removeAttr('data-src');
return i < data.items.length-1;
});
},
scroll: {
onBefore: function(data) {
// Lazyload next visible thumbnails
// console.log(data.items.visible.length);
for ( i = 0; i < data.items.visible.length; i++ ) {
var $img = data.items.visible.eq(i).find('img');
$img.attr('src', $img.attr('data-src') ).removeAttr('data-src');
}
}
},
align: 'center',
auto: false,
prev: '#prev',
next: '#next'
});
onCreate : find first visible images and swap data-src to src attribute.
Scroll onBefore : Iterate through the next visible items and swap attributes.
Inspect the Network [filter img] tab in chrome dev tools and watch as the lazyload happens.
I tried adding a width value to my items to remove the console log notice from caroufredsel but it doesn't like the lazyload onCreate.
Sorry if this is a noob question (I'm a JS noob). Im working on a website in which the homepage consists of a preloader and a slideshow.
I've managed to set up both the preloader and the slideshow. However, I've noticed that both of them are being loaded at the same time. I need to find a way to first load the preloader and once the preloading is done, then start the slideshow.
I'm using (window).load on both functions but I would like to know if there's a way to prioritize how things area loaded.
Here's my working code:
jQuery(window).load(function() {
jQuery('#wptime-plugin-preloader').delay(500).fadeOut("slow");
setTimeout(wptime_plugin_remove_preloader, 3000);
function wptime_plugin_remove_preloader() {
jQuery('#wptime-plugin-preloader').remove();
}
});
jQuery(window).load(function() {
$('#slideshow.royalSlider').royalSlider({
arrowsNav: true,
loop: true,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: false,
numImagesToPreload: 0,
transitionSpeed: 600,
thumbsFitInViewport: false,
navigateByClick: false,
startSlideId: 0,
transitionType:'fade',
globalCaption: false,
});
});
Regards,
Johann
You can combine them both inside a single jQuery(window).load, and choose to run the royalSlider setup function inside the wptime_plugin_remove_preloader function, after removing the preloader:
jQuery(window).load(function() {
//set up the preloader
jQuery('#wptime-plugin-preloader').delay(500).fadeOut("slow");
setTimeout(wptime_plugin_remove_preloader, 3000);
function wptime_plugin_remove_preloader() {
//Remove the preloader
jQuery('#wptime-plugin-preloader').remove();
//Set up the slider after removing the preloader
$('#slideshow.royalSlider').royalSlider({
arrowsNav: true,
loop: true,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: false,
numImagesToPreload: 0,
transitionSpeed: 600,
thumbsFitInViewport: false,
navigateByClick: false,
startSlideId: 0,
transitionType:'fade',
globalCaption: false,
});
}
});
Activate the preloader on window.onload and call the slideshow function from inside the preload function (Note: Untested!):
jQuery(window).load(function() {
jQuery('#wptime-plugin-preloader').delay(500).fadeOut("slow");
setTimeout(wptime_plugin_remove_preloader, 3000);
function wptime_plugin_remove_preloader() {
jQuery('#wptime-plugin-preloader').remove();
}
slideshow();
});
function slideshow() {
$('#slideshow.royalSlider').royalSlider({
arrowsNav: true,
loop: true,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: false,
numImagesToPreload: 0,
transitionSpeed: 600,
thumbsFitInViewport: false,
navigateByClick: false,
startSlideId: 0,
transitionType:'fade',
globalCaption: false,
});
}
Put your the code that loads the slideshow inside
function wptime_plugin_remove_preloader() {
jQuery('#wptime-plugin-preloader').remove();
//slideshow code here
}
$(window).load would wait for the page to load all the elements, which you do need for your javascript to work, because you have to make sure the elements you are referencing in your code already exist in the DOM. To chain functions call each next function from the last block of the one preceeding
Is there a way to set a fancybox to open whenever a separate fancybox closes?
I have tried the following
$('a.linkEditClass').fancybox({
href: "#editClassPanel",
closeClick: false,
autoDimensions: true,
autoScale: false,
afterClose: function() {
$.fancybox({
href: "#classInfoPanel"
});
}
});
But this doesn't seem to be doing anything. Here is my other fancybox code for reference
$('a#linkClassInfo').fancybox({
href: "#classInfoPanel",
// maxHeight: 350,
// maxWidth: 425,
closeClick: false,
autoDimensions: false,
autoScale: false
});
They both target div's.
When you close fancybox, it takes a little while for it to clean up and complete the closing process so, opening another fancybox while the clean up process is running may trigger a js error that voids the second box from opening.
Just give it a little bit of time and it should work so
afterClose: function () {
// wait for this box to close completely before opening the next one
setTimeout(function () {
$.fancybox({
href: "#classInfoPanel"
});
}, 300);
}
See JSFIDDLE
I try to add content on the fly to a CarouFredSel slider. The content is inserted fine but CourFredSel does not recognize the new content. Is there a way to tell the slider that the slide count has changed?
jQuery(document).ready(function() {
jQuery('#carousel').carouFredSel({
items: 4,
direction: "left",
responsive: true,
infinite: false,
circular: false,
scroll: {
items: 2,
duration: 1000
},
next: {
button: "#slider-button-next",
key: "right",
onBefore: function () {
loadAdditionalContent();
}
},
prev: {
button: "#slider-button-prev",
key: "left"
},
auto: {
play: false
}
});
});
function loadAdditionalContent () {
jQuery('#carousel').trigger('insertItem', ['<img src="http://dummyimage.com/200x200" class="added" />']);
}
Here is a fiddle that describes the problem: http://jsfiddle.net/bg0xyj8k/
there is nothing wrong with your code:
fix this in jsfidle: use external reference without https: http://cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.2.1/jquery.carouFredSel.packed.js
I did some changes in your code, did not understanding what are you trying to do there.
jQuery( "#slider-add-items" ).click(function() {
loadAdditionalContent();
});
function loadAdditionalContent () {
id++;
jQuery('#carousel').trigger('insertItem', ['<img src="http://dummyimage.com/200x200" class="added" id="'+ id +'" />']);
}
http://jsfiddle.net/bg0xyj8k/2/
UPDATE
- be more precise when you are asking someting
FIX 1: insert at next click before fist visible element - http://jsfiddle.net/bg0xyj8k/3/
FIX 2: insert on last position of the slider when next clicked - http://jsfiddle.net/bg0xyj8k/4/ - result => infinite next click
I used to work with tinymce, but it causes lot of troubles when I want to put it to fancybox (fails with second start of fancybox window). Cleditor doesn't work too (displays "true" instead of editor). Is there any editor which will work without making any strange tricks?
Edit:
$('.fancybox_with_wysiwyg').fancybox({padding: 1, scrolling: 'no',
beforeShow: function () { tinymce.execCommand('mceToggleEditor', false, 'fbwysiwyg'); },
beforeClose: function () { tinymce.EditorManager.execCommand('mceRemoveControl', true, 'fbwysiwyg'); }
});
Edit2 (fixed callbacks)
$('.fancybox_with_wysiwyg').fancybox({
padding: 1,
scrolling: 'no',
onComplete : function() {
tinyMCE.execCommand('mceToggleEditor', false, 'fbwysiwyg');
},
onCleanup : function() {
tinyMCE.execCommand('mceRemoveControl', false, 'fbwysiwyg' );
}
});
Solution (thanks to Thariama)
$('.fancybox_with_wysiwyg').fancybox({padding: 1, scrolling: 'no',
onComplete: function () { tinymce.execCommand('mceAddControl', false, 'fbwysiwyg'); },
onClosed: function () { tinyMCE.execCommand('mceRemoveControl', false, 'fbwysiwyg' ); }
});
>I used to work with tinymce, but it causes lot of troubles when I want to put
>it to fancybox (fails with second start of fancybox window).
The simple solution for this case is to shut down tinymce correctly before you reinitialize it the second time.
To shut your editor instance down call
tinyMCE.execCommand('mceRemoveControl', false, 'fbwysiwyg' );
Update: You need to use
$('.fancybox_with_wysiwyg').fancybox({padding: 1, scrolling: 'no',
beforeShow: function () { tinymce.execCommand('mceToggleEditor', false, 'fbwysiwyg'); },
beforeClose: function () { tinyMCE.execCommand('mceRemoveControl', false, 'fbwysiwyg' ); }
});
CKEditor definately works as I've been working on putting it inside a Fancybox this afternoon :)
The problem you may encounter is when a modal window plugin removes and recreates the textarea within the modal. In this case you will need to re-bind the WYSIWYG when the textarea is shown.