Combining a jquery slider with a jquery timed fade in - javascript

I have two scripts that work great independently, and now I want to combine them.
The first one is a slider that can load any content.
<script>
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 10000,
pause: 100000,
hoverPause: true,
effect: 'fade',
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});
</script>
The second one is a script that can display a couple of div's with a smooth timed fade in.
<script type='text/javascript'>
$(window).load(function(){
$('.square').fadeTo(0,0).each(function(index) {
var dif = index % 5;
var lambda = parseInt(index / 8);
$(this).delay(250 * (dif + lambda)).css('visibility','visible').fadeTo(500,1)
});
});
</script>
When the page loads, different images in div's are fading in one by one. (second script). All this is in a slider div that is activated by the first script. When the slider goes to the next slide, the second script is already activated because the document was ready. I would like it to be "reset" when the second slide is activated. Then the second slide will show the second batch of images smoothly fading in, one-by-one.

Related

How to make appearance of jssor slide a triggerable event?

Using a basic JSSOR Slideshow, with n div image placeholders, where the divs are read in descending or top-down order, just like any other normal HTML page, I can add javascript into a div, or add javascript somewhere else on the page to make something happen within a slide div (animation, fade, etc.).
The problem is it will trigger once, as when the document is loaded. How do I make a javascript function "re-triggerable", so that it is called when that one slide (let's say slide #2) appears in the display loop?
Feel free to ask more questions if this is not clear enough.
Here's an example: Slide Show On the first slide appearance, a gold medal scrolls to the middle of the slide, using jQuery animate(). It will only do this once, not each time the slide appears. The reason is that the gold medal animate script only loads once, when the html page is loaded. I want that gold medal animate script to reload again and again, each time slide #1 makes its appearance.
Please do this job when slideshow plays over at slide 0.
var jssor_slider1 = new $JssorSlider$(...;
function SlideshowEndEventHandler(slideIndex, progressBegin, slideshowBegin, slideshowEnd, progressEnd) {
if (slideIndex == 0) {
//runs the animation when slideshow plays over at slide 0
$("#goldmedal").animate({
opacity: 0.99,
left: "+=490",
height: "toggle"
}, 2500, function () {
// Animation complete.
$("#goldmedal").animate({ opacity: 0.0 }, 4000, function () {
$("#goldmedal").css("left", "0px");
});
});
}
}
jssor_slider1.$On($JssorSlider$.$EVT_SLIDESHOW_END, SlideshowEndEventHandler);
//As it would not play slideshow at the beginning for slide 0, make a manual trigger at the beginning then.
SlideshowEndEventHandler(0);

How to use embedded functions(One Scroll Page by Pete - peachananr)

recently I am working on a page using this awesome plugin:
https://github.com/peachananr/onepage-scroll
However I am not familiar with JavaScript so I will be obliged if someone could explain to me few things:
I'd like to combine one-scroll-page behaviour with anchor scrolling, simple example:
function scrollContent(id) {
$('html, body').animate({ scrollTop: $('#' + id).offset().top }, 1000 );
}
as far as I know there is an embedded function called "$.fn.moveTo(page_index)"(see plugin link) but I wasn't able to use it successfully.
I'd like to turn a slider when leaving page #1 to save resources, slider launches with function:
$('#da-slider').cslider({
autoplay : true,
interval : 8000,
});
tried to simply turn off autoplay by messing with callbacks but it turned out to be bad solution:
$(".main").onepage_scroll({
sectionContainer: "section", // sectionContainer accepts any kind of selector in case you don't want to use section
easing: "ease", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in",
// "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
animationTime: 1000, // AnimationTime let you define how long each section takes to animate
pagination: true, // You can either show or hide the pagination. Toggle true for show, false for hide.
updateURL: true, // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
beforeMove: function(index) {}, // This option accepts a callback function. The function will be called before the page moves.
afterMove: function(#1) {
$('#da-slider').cslider({
autoplay : off,
interval : 8000,
});
}, // This option accepts a callback function. The function will be called after the page moves.
loop: true, // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
keyboard: true, // You can activate the keyboard controls
responsiveFallback: 600, // You can fallback to normal page scroll by defining the width of the browser in which
// you want the responsive fallback to be triggered. For example, set this to 600 and whenever
// the browser's width is less than 600, the fallback will kick in.
direction: "horizontal" // You can now define the direction of the One Page Scroll animation. Options available are "vertical" and "horizontal". The default value is "vertical".
});
Every tip, even link to jquery tutorial will be very helpfull. Thanks in advance!
Solution found:
$("#your-div-id").on("click", function(){$(".main").moveTo(2);});

flexslider and flexcarousel on one page

When I try to use "basic flexlisder" (http://flexslider.woothemes.com/index.html) and "basic carousel" (http://flexslider.woothemes.com/basic-carousel.html) on one page, carousel does not display properly. I guessed it's fault of clashing class names (since both are in <div class="flexslider">). However, after analyzing source code on flexslider page, I found they put the carousel in <div class="flexslider carousel"> , unlike what is written in the example, but it still did not help. Carousel still behaves like slider.
I also tried copying styles for new class, which I called flexcarousel, but it didn't work (even after making changes in jquery call as well). Anyone has simple example of slider and carousel working on a simple page?
My javascript:
<script type="text/javascript">
//slideshow
$(window).load(function() {
$('.flexslider').flexslider({
animation : "slide",
start : function(slider) {
$('body').removeClass('loading');
}
});
});
//carousel
$(window).load(function() {
$('.flexcarousel').flexslider({
animation : "slide",
animationLoop : false,
itemWidth : 210,
itemMargin : 5,
minItems : 2,
maxItems : 4
});
});
</script>
The carousel class does not actually make it a carousel, you have to assign the items a width using itemWidth, within the options:
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210, // Must have a size set for it to switch to carousel view.
});
});
Make sure to use different IDs to target each individual flexslider (if you have more than one):
<div id="main-slider" class="flexslider">
<div id="secondary-slider" class="flexslider">

Crossfade not working very well in slides.js

I am using some javascript to randomly swap out the background image of a slideshow on page load. It works except that i want to use crossfading along with fade.
//slideshow script
<script>
$(document).ready(function(){
$('#slides').slides({
preload: true,
preloadImage: '/img/loading.gif',
play: 8000,
pause: 2500,
hoverPause: true,
crossfade:true,
effect:'fade',
});
});
When I set crossfade to "true", the transparent .pngs in the slide div stop fading nicely; the next one in line fades in ok, but the previous one persists and then disappears (doesn't fade out). If I delete crossfade, it works ok but the client wants then to fade in and out of each other.
Here's my jsfiddle
And here the location of my site home page where you can see the slider; (you need a user and password to see it, both are mig)

Fade in the next element of a specific class after animation on the Orbit slider

I'm using the Orbit slider, and after each slide animation, you can run a function.
I have four classes that contain content, and want to hide all of them bit the first div, and then fade in/out to show the second one after the first animation, so on and so forth until the end of the slides, where it loops back to the beginning, so the content stays in sync with the slider.
The HTML markup:
<div class="contentSlider">Content for slider 1</div>
<div class="contentSlider">Content for slider 2</div>
<div class="contentSlider">Content for slider 3</div>
<div class="contentSlider">Content for slider 4</div>
The Orbit plugin script is:
<script type="text/javascript">
$(window).load(function() {
$('#featured').orbit({
animation: 'horizontal-push', // fade, horizontal-slide, vertical-slide, horizontal-push
animationSpeed: 800, // how fast animtions are
timer: true, // true or false to have the timer
advanceSpeed: 10000, // if timer is enabled, time between transitions
pauseOnHover: false, // if you hover pauses the slider
directionalNav: true, // manual advancing directional navs
captions: false, // do you want captions?
captionAnimation: 'fade', // fade, slideOpen, none
captionAnimationSpeed: 800, // if so how quickly should they animate in
bullets: true, // true or false to activate the bullet navigation
bulletThumbLocation: '', // location from this file where thumbs will be
afterSlideChange: function(){
// function to keep the content below the slider in sync with the slider.
}
});
});
</script>
//set to correct bullet
setActiveBullet();
Before this line in jquery.orbit.js in shift function(line 332 in jquery-orbit-1.2.3.js)
alert(activeSlide);
it gives the current slide value;
based on the current slide value you can hide or show the
eq(activeSlide)
of the caption class and play with it.(fadeIn or fadeOut)
Why can't you enable the in built captions:true ,and put your caption html content in it

Categories

Resources