Very limited script experience.
I am attempting to get a preloader to cover my images loading in a bootstrap carousel before a second script cycles through them.
This script is as far as I can get.
<!-- Preloader -->
<script type="text/javascript">
//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(50).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(50).css({'overflow':'visible'});
})
//]]>
</script>
and
<!-- Script to Activate the Carousel -->
<script type="text/javascript">
$('#preloader').delay(50).fadeOut('slow', function(){
$('.carousel').carousel({
pause: "none",
interval: 500
});
});
</script>
The sequence I need is loading animation div covering images loading in "#myCarousel" > images have loaded > covering div fades out > fade out calls:
$('.carousel').carousel({
interval: 500, //changes the speed
pause: "none",
})
Images flick through and stops on final slide.
In the example above, it seems to work – the preloader works, the carousel works too but not at the expected speed; "500" is meant to be half a second. It also seems to break the pause function to, the fact pause is set to "none" seems to be ignored.
After some help from #Shikkediel the script now reads:
<script type="text/javascript">
$(window).on('load', function() {
$('#status').fadeOut()
.queue(function() {
$('#preloader').delay(50).fadeOut('slow', function() {
$('#myCarousel').attr('data-ride', 'carousel');
$('.item').first().addClass( 'active' );
$('body').delay(50).css({'overflow':'visible'});
$('.carousel').carousel({
});
});
$(this).dequeue();
});
});
</script>
– the speed and pause are now set in the data attributes, which is great to have them set in there out of the way.
However, the preloader still does not pre load the images!
This is the test I have running: http://maxsendak.com/test/pu_v2/max_page.html
This was the first draft, a bit of optimised script :
$(window).on('load', function() {
$('#status').fadeOut()
.queue(function() {
$('#preloader').delay(50).fadeOut('slow', function() {
$('#myCarousel').attr('data-ride', 'carousel');
$('.item').first().addClass('active');
$('body').delay(50).css({'overflow':'visible'});
$('.carousel').carousel({
interval: 500,
pause: 'none'
});
});
$(this).dequeue();
});
});
But it didn't quite have the expected result - the images are set as background and not detected by the onload event. I would propose preloading, appending to the document and hiding. This should cache them for the slider. Doing an Ajax call doesn't seem to fit well here :
$(document).ready(function() {
var path = 'http://www.maxsendak.com/test/pu_v2/img/people/max/';
for (var i = 1; i <= 5; i++) {
$('<img class="preload" src="' + path + i + '.jpg" alt=""/>').appendTo('body');
}
$('.preload').each(function() {
$(this).one('load', function() {
$(this).hide();
});
});
$(window).on('load', function() {
$('#status').fadeOut()
.queue(function() {
$('#preloader').delay(50).fadeOut('slow', function() {
$('#myCarousel').attr('data-ride', 'carousel');
$('.item').first().addClass('active');
$('body').delay(2500).css({'overflow':'visible'}); // after slider finishes
$('.carousel').carousel();
});
$(this).dequeue();
});
});
});
That bit of script could be left out of course if the images weren't background, the onload event should then be enough and prevent the flashing in between slides.
Minor update - according to this article Firefox can have some issues (version 37 on Windows 7 desktop at least) with the style of the preloaded images not matching that of the targeted background images. So I've added the relevant style I can see on the slider here which should be enough (also made appending the images a bit more readable) :
for (var i = 1; i <= 5; i++) {
$('<img class="preload" alt=""/>')
.attr('src', path + i + '.jpg')
.css({'height': '100%', 'position': 'relative', 'left': 0})
.appendTo('body');
}
Hope that's the final detail for a smooth cross browser functionality.
Related
I don't know how much people have used this plugin, demo but what I want is to change the default behavior of the plugin to something like animated. Currently, when you click on next or previous button, the images will be just appended without any visual animation. I just want to animate the images while appending! Can anybody suggest any good solution!! Below is the code where appending on the image takes place:
if (href.match(/\.(jpeg|jpg|gif|png)$/i) !== null) {
var img = $('<img>', { src: href });
img.one('load', function () {
var wrap = $('<div class="nivo-lightbox-image" />');
wrap.append(img); //gets appended here
content.html(wrap).removeClass('nivo-lightbox-loading');
// Vertically center images
wrap.css({
'line-height': $('.nivo-lightbox-content').height() + 'px',
'height': $('.nivo-lightbox-content').height() + 'px' // For Firefox
});
}).each(function () {
if (this.complete) $(this).load();
});
}
OK with any sort of animation
Well I just added a fadeIn after appending which seems to do some sort of animation although which is what I was accepting. Here is what I did:
wrap.append(img).fadeIn('4000');
I'm using this plugin for slideshow: http://jquerytools.org/demos/tabs/slideshow.html
I want to change slideshow effect on window resize. My code: http://jsfiddle.net/genesiss/5L2CN/5/
var initSlideshow = function() {
var effect = 'fade';
if ($(window).width() < 300) {
effect = 'default';
}
$(".slidetabs").tabs(".images > div", {
effect: effect,
fadeOutSpeed: "slow",
rotate: true
}).slideshow({interval: 100});
};
$(function() {
initSlideshow();
$(".slidetabs").data('slideshow').play();
$(window).resize(function () {
$(".slidetabs").data('slideshow').stop();
$(".slidetabs").tabs('destroy');
initSlideshow();
$(".slidetabs").data('slideshow').play();
});
});
It seems that slideshow effect is always the same - one that is set at first initialization. You can see that by resizing 'Result' window in jsfiddle and noticing that it still has 'fade' efect (two slides on the screen at the same time, one fading away).
How could I change slideshow effect after first initialization?
Some of my webpages contain several text elements that expand and collapse with a jQuery "accordion" effect:
function show_panel(num) {
jQuery('div.panel').hide();
jQuery('#a' + num).slideToggle("slow");
}
function hide_panel(num) {
jQuery('div.panel').show();
jQuery('#a' + num).slideToggle("slow");
}
This causes the window size to change so jScrollPane has to be reinitialized, which will also change the length of the scrollbar. To achieve a smooth length adjustment of the scrollbar, I set the "autoReinitialise" option to "true" and the "autoReinitialiseDelay" to "40" ms:
$(document).ready(function () {
var win = $(window);
// Full body scroll
var isResizing = false;
win.bind(
'resize',
function () {
if (!isResizing) {
isResizing = true;
var container = $('#content');
// Temporarily make the container tiny so it doesn't influence the
// calculation of the size of the document
container.css({
'width': 1,
'height': 1
});
// Now make it the size of the window...
container.css({
'width': win.width(),
'height': win.height()
});
isResizing = false;
container.jScrollPane({
showArrows: false,
autoReinitialise: true,
autoReinitialiseDelay: 40
});
}
}).trigger('resize');
// Workaround for known Opera issue which breaks demo (see
// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
$('body').css('overflow', 'hidden');
// IE calculates the width incorrectly first time round (it
// doesn't count the space used by the native scrollbar) so
// we re-trigger if necessary.
if ($('#content').width() != win.width()) {
win.trigger('resize');
}
});
The effect is ok, but on the cost of a very high CPU usage which makes my fan go wild.
This is a jsfiddle which shows the settings and the effect: http://jsfiddle.net/VVxVz/
Here's an example page (in fact it's an iframe within the webpage shown): http://www.sicily-cottage.net/zagaraenausfluege.htm
Is there a possibility to achieve the same "smooth" transition of the scrollbar length without using the "autoReinitialise" option, maybe with an additional script, some modification of the jscrollpane.js, or simply a css animation of the scrollbar and then calling the reinitialise manually?
I'm absolutely useless at javascript so any help would be greatly appreciated.
There is no need to initialise jScrollPane on your content everytime window is resized. You should do it only once - on $(document).ready(). Also, there is no need in using autoReinitialize if your content is staic. You should reinitialise jScrollPane to update scrollbar size only when you slideUp/slideDown one of your container or on window.resize. So, code become less and more beautiful :)
function togglePanel(num) {
var jsp = $('#content').data('jsp');
jQuery('#a' + num).slideToggle({
"duration": "slow",
"step": function(){
jsp.reinitialise();
}
});
return false;
}
$(document).ready(function () {
var container = $('#content').jScrollPane({
showArrows: false,
autoReinitialise: false
});
var jsp = container.data('jsp');
$(window).on('resize', function(){
jsp.reinitialise();
});
// Workaround for known Opera issue which breaks demo (see
// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
$('body').css('overflow', 'hidden');
// IE calculates the width incorrectly first time round (it
// doesn't count the space used by the native scrollbar) so
// we re-trigger if necessary.
if (container.width() != $(window).width()) {
jsp.reinitialise();
}
});
The header to my tumblr page seems a bit jumpy when I attempted to animate its growth and shrinkage when it is no longer on the top of the page.
The webpage is Tobacco Endeavors and is a tumblr blog.
<script type="text/javascript">
$(window).scroll(function(){
if ($(this).scrollTop() > 1) {
$("#abracadabra").fadeOut(500, function(){
$("#header").animate({padding:"1.5em 0"}, 500);
});
} else {
$("#abracadabra").fadeIn(500, function(){
$("#header").animate({padding:"1em 0"}, 500);
});
}
});
</script>
Thanks a bunch guys.
The scroll event could fire many times, you need to control concurrency with a flag, like so:
<script type="text/javascript">
window.flag = true;
$(window).scroll(function(){
if ($(this).scrollTop() > 1) {
if (window.flag) {
window.flag = false;
$("#abracadabra").fadeOut(500, function(){
$("#header").animate({padding:"1.5em 0"}, 500, function() {window.flag = true;});
});
}
} else {
if (window.flag) {
window.flag = false;
$("#abracadabra").fadeIn(500, function(){
$("#header").animate({padding:"1em 0"}, 500, function(){window.flag = true;});
});
}
}
});
</script>
UPDATE:
Updated a typo in code. Try new version above.
stop() and fadeTo() can fix some strange issues sometimes :)
jsBin demo
$(window).scroll(function(){
if ($(this).scrollTop() > 1) {
$("#abracadabra").stop().fadeTo(500,0, function(){
$("#header").stop().animate({padding:"1.5em 0"}, 500);
});
} else {
$("#abracadabra").stop().fadeTo(500,1, function(){
$("#header").stop().animate({padding:"1em 0"}, 500);
});
}
});
about your issue:
from the DOCS:
The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page.
causing jumpy result. On the other hand fadeTo() method
With duration set to 0, this method just changes the opacity CSS property, so .fadeTo(0, opacity) is the same as .css('opacity', opacity).
and as you can see affecting nicely the layout of the page.
See jQuery animate, not smooth
..Just set the easing parameter of the animation to linear.
There are also plugins people have made as alternatives if you feel inclined.
jQuery/JavaScript animations can be jumpy at times, and can also depend on an individuals personal hardware setup. What I like to do for animations is make a css class that has a transition, and the add the class. Additionally, make another css class that has the opposite transition, and add that one to animate out. This works pretty well, and if i'm not mistaken, provides increased browser compatibility.
Bit of a newb but just having a small problem using jquery cycle all plugin. I am trying to create an image gallery, with two buttons next and previous which work fine, and with a counter like (1/10) etc. I've got it to work but for some reason the slideshow never counts the first image so therefore is always one image behind.
Somebody pointed out to me it is probably that the array starts at 0 and something else at 1, but I'm not sure where to find this really so just wondered if somebody could help me. Here is the code in the head of my document.
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx:'none',
speed:'fast',
timeout: 0,
next:'#next',
prev:'#prev',
after: onAfter
});
});
function onAfter(curr,next,opts) {
var caption1 = (opts.currSlide +1) + '/' + opts.slideCount;
$('#caption1').html(caption1);
}
</script>
in use with cycle all plugin.
thanks for any help!
so I've changed to this as instructed.
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx:'none',
speed:'fast',
timeout: 0,
next:'#next',
pager: '#caption1',
prev:'#prev',
after: onAfter1
});
});
currentSlide = $("#caption1 a.activeSlide").html()
function onAfter1(curr,next,opts) {
var caption1 = (opts.currSlide +1) + '/' + opts.slideCount;
$('#caption1').html(caption1);
}
</script>
which works fine after the first slide but the first slide randomly says this:
Prev Next (1/111234567891011)
Then when I press next it dissapears, probably my fault but is it something to do with the pre-existing function I have?
if I change to this:
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx:'none',
speed:'fast',
timeout: 0,
next:'#next',
pager: '#caption1',
prev:'#prev',
});
currentSlide = $("#caption1 a.activeSlide").html()
});
</script>
It just says 12345678910 instead of 1 of etc.
Edit:
I have changed code as instructed, see here, http://www.amythornley.co.uk/tests/codeplay.html and:
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx:'fade',
speed:1,
timeout: 0,
pager: '.thepager',
next:'#next',
prev:'#prev',
after: onAfter1
});
});
function onAfter1(curr, next, opts) {
currentSlide = $(".thePager a.activeSlide").html();
if (!currentSlide) currentSlide = "1";
$('.slideCaption').html(currentSlide + '/' + opts.slideCount);
}
</script>
but it still doesn't work even though it works perfectly in your example, getting so annoyed at it! grrr. stupid thing :(
and i know about broken images i havnt uploaded them yet, just a test to see the next/prev problem.
EDIT!
I used my original code simply changing the problem with the 'none' and speed and it appeaars to work fine, maybe this was the problem all along, thanks so much for pointing it out and for all your help even if some of it turned out to be pointless haha
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx:'fade',
speed:1,
timeout: 0,
next:'#next',
prev:'#prev',
after: onAfter1
});
});
function onAfter1(curr,next,opts) {
var caption1 = (opts.currSlide +1) + '/' + opts.slideCount;
$('#caption1').html(caption1);
}
</script>
you could "fiddle" with its native navigation and get the current picture number, for example:
$('.selector').cycle({
fx: 'scrollLeft',
pager: '.selctorOfPagination',
timeout: 15000,
pause: 1,
next: '.selectorOfNext',
prev: '. selectorOfPrevious'
});
check the pager example here: http://jquery.malsup.com/cycle/int2.html
EDIT: check my example here:
http://jsfiddle.net/jackJoe/7DRSv/
You can check which is the current image by obtaining the html of the pager:
currentSlide = $(".thePager a.activeSlide").html()
And then you can use that variable which is correct and you don't need to "guess" which image is current.
EDIT 2:
Check my new example:
http://jsfiddle.net/jackJoe/7DRSv/2/
P.S. the first time the slide animates, the caption doesn't get the active one, so we need to set that variable, check my example.
EDIT 3:
New example with a stopped animation, triggered by the next and previous buttons:
http://jsfiddle.net/jackJoe/7DRSv/3/
One thing I found out is that at your site (BTW the images are broken), when not using anykind of animation (fx: "none") the first active slide is one number behind! which takes us back to your original problem!
You need to use somekind of animation (you can specify the speed in miliseconds);
for an alternative to the "none", use the fx = 'fade' and speed: 1...