Anything Slider Help, Change Animation to Fade

[ulle]

Ok, then I see. Thanks for your help. I already tried Nivo Slider but that doesn’t work with image maps which I will have to use. Otherwise that seems really good.

[markthema3]

By Anything Gallery I meant it would have a random effect when it transitioned.

[starsunflowerstdio]

Ok I’m trying to upgrade anythingslider from v1.2 to v1.5.2.0. When I replace the current files with the fx addition, it breaks the slider completely. I wanted to upgrade so I could try the fade part. There is a portion of code in the header.php of this wordpress theme that may likely need to be updated but I’m not sure how. I’m not positive that it’s the culprit, but have only a hunch. I’ve searched and searched the web trying to find a way to resolve this, but unfortunately I haven’t found a solution and I’m not so savvy with jquery. Here’s the code:

[starsunflowerstdio]

It’s on my local machine in xampp, a backup of a wordpress blog with a theme called tofu33 by tofurious.

Theme Page: http://www.tofurious.com/2010/09/one-column-photographer-blog-theme/
Demo: http://tofurious.com/blogs/tofu33/

If need be, I can create a test environment on the web so you can take a look, but it is pretty much the same as the theme above with the exception of the navigational menu moved underneath the slider with an absolute position.

I just noticed it says he’s using anythingslider version 3.1.3 in his demo when I view the source code and look at the scripts, but if I click on the script and look at the javascript it says v1.2 in the comments. My install does the same thing. Everything in between the title and URI is the same except for the contact form.

Here’s what the style area looks like in the header.php

Thank you so much for your response.

[starsunflowerstdio]

Thanks so much for the response! I just got back from a very very long drive to pick up my son from the airport. You rock!! ::bows her head in gratitude:: <3 <3 <3

[unata]

I have some funky fading going on here… http://www.stephanbircher.com/new/sculptures/japanese.php

I got flickering (double fade or popping up and then fading in again) when bottom navigation is used. Navigating by arrows works ok in Firefox. IE8 just has the flickering effect – the element is visible to begin with and then fades in, no matter if using arrows or buttons on the bottom. I think it has something to do with what element on the page the fade effect is being applied to. I have

#slider li img{ opacity: 0; }

#slider li img.activePage { opacity: 1; }

I’ve tried applying these styles to .panel class, no difference.
http://www.stephanbircher.com/new/sculptures/japanese_test.php

[Mottie]

Hi Unata!

Try adding a “delayBeforeAnimation” time to see if that fixes it… here is an updated demo – change jQuery from (edge) to 1.6.3, because apparently there is a bug in the jQuery edge version.

[unata]

yep, adding “delayBeforeAnimation” had worked… I still had a blink – image load, disappear, then fade in again on the very first slide in IE 8.

http://www.stephanbircher.com/new/sculptures/japanese_test.php

I believe because setting opacity to 0 with CSS does not work for IE. http://stackoverflow.com/questions/1948176/opacity-css-not-working-in-ie8

[Mottie]

Hi Unata!

It seems to be working fine for me in IE8… I don’t see the blink. Hmm, either way, sorry I guess I forgot to include the css for IE opacity:

filter: alpha(opacity=0);

and

filter: alpha(opacity=100);

IE needs the opacity set by percentage, so use “0” and “100” instead of “0” and “1”.

[jkcardiff]

Hello,

Excellent work, I love this.

However, I would be very greatful if you could amend the JS to allow the tabs to have wording instead of numbering.

There is a solution for the anything slider but this doesn’t work with the fader version?

Many Thanks,

John

[Mottie]

Hi John!

You can use the “navigationFormatter” option to make the navigation tabs contain anything you want. Please check out the examples in the documentation (near the bottom).

[netdiva]

Hello! I seem to have the same trouble that others have had with regard to the FX extension breaking the code. I’ve been over and over my code but haven’t seen the error of my ways. Can you help?

Without the FX extension, this works great.

But when I add the FX extension, the thing dies.

Any help would be greatly appreciated! TIA.

[Mottie]

Hi Netdiva!

There are a couple of errors in the code. One which isn’t effecting the slider is this one “stLight is not defined” Line 17 “stLight.options({“

The Fx is breaking because there is a semi-colon that needs to be removed before the “.anythingSliderFx” function. Also, the comma after “animationTime : 0,” needs to be removed or IE won’t work.

So the code should end up looking like this:

$('#slider')

.anythingSlider({

buildArrows:false,

width: 505,

height: 412,

animationTime : 0

})

.anythingSliderFx({

// target the entire panel and fade will take 500ms

'.panel' : [ 'fade', 1000, 'easeInCirc' ]

});

Edit: Actually, there is another option that makes the fade transition look better called “delayBeforeAnimate” which is how long the slider pauses before changing slides. Here is a demo of it. And the code after adding this option:

$('#slider')

.anythingSlider({

buildArrows:false,

width: 505,

height: 412,

animationTime : 0,

delayBeforeAnimate : 500

})

.anythingSliderFx({

// target the entire panel and fade will take 500ms

'.panel' : [ 'fade', 1000, 'easeInCirc' ]

});

[idextrus]

Hi Mottie,

Very impressive support for this. Counting on this, I’m tasked with migrating from v1.2 to the new version so that I can use the FX plugin as the client wants a fade transition.

I have gone through all the posts looking for help, and I’ve modified the code and also understand that some changes to my XHTML are in order. However, everything that I have done has led me nowhere.

Here is my page: http://www.tienda.com/temp/home-test.html

I even checked out this page http://dl.dropbox.com/u/1510510/temp/Tofu-Blog-Theme-3.3.htm, but the initial image fades out and then nothing…

All that I want is exactly what I have here: http://www.tienda.com/temp/home-test.html (controls and everything), but utilizing the FX fade. Can you help?

P.S. I reverted all of my changes so that you can see how it actually works with the slide transition.

Thanks in advance!!

Chris

[Mottie]

Hi Chris!

I recently removed that Tofu Blog theme example from my drop box… hmm, I don’t think I have a backup of it anywhere. But I do have this example of a fade transition you could work from.

I haven’t had a chance to look at the code on your site, as I have to run here in a minute. But if you are still having trouble, I’ll look at it again later.

Rob

Edit: Updated the demo, since it appears that the jQuery (edge) version is causing some errors and preventing the demo from working.

[Author]

Posts