This is NOT really ready for mass public consumption yet, but if you need to get going right away, I've been tinkering with just that idea here:

http://css-tricks.com/examples/AnythingFader/

The problem is the fader will be much simpler, and currently this is just a quick hack to get it done. For example, it still lines all the slides up in a row and clones the first and last and all that, which will not be necessary in the final version.

Hey Chris, Sorry for the delayed reply, apparently I got the flu the day after I wrote that post and I am just getting back in the loop. Anything Fade was EXACTLY what I was looking for! Can't thank you enough for your help.

Sorted this out... here is my updated CSS ...



It's great to be able to shrink down those huge previous / next arrows - and have standard play, pause, forward back buttons! Yay!

Looking forward to seeing your final version of AnythingFader :-)

However it would be great if the slides faded from one to the other without a fade to white in between - as does the Jquery Fader Plugin by Philip Floetotto http://philipf.alphacomplex.org/plugins/fader/demo.html (that one unlike yours doesn't have a pause while hovering function or a start/stop button both of which are extremely useful - plus isn't being developed any more).

Yea, seems to have worked fine now.
Double check that you dont have any previously nested styles that may be positioning an ul or li element relative /absolute.

For instance i had previously used something like:



So if you are still not seeing the animation make sure u havn't got styles like that forcing the child ul lis to position themselves relative!

Please?

Can anyone help me with controlling AnythingFader externally? I want to put some interactive content within my slides but I want anythingfader to stop playing on user interaction.

I notice that when you click on "Stop" and changes to "Go" button background should change to red, but it remains green, I'm adapting this new anythingfade to my proyect and normally I erase the start-stop texts and change for backgrounds images (play and pause shapes) but when I preview it the pause button appears and work, but never change to play.

Hope there's a way to fix it. Thank you so much Chris for this Plug-in, in my opinion is one of the best sliding plugins.

Have a look at this, perhaps it could be useful.

Hello,
I would like to change the stop/start button to a Play/Pause image. Seems to be something that would have to be set in the CSS, any idea how to accomplish this?
Thank you.

Great work Chris and Mottie,

Mottie, I believe I've implemented the changes you mentioned above correctly...but the slider now shows the slide moving to the left as it is fading out. The new slide fades in perfectly though. Does anyone have any ideas?

Solved...I had the animationtime still set in the other javascript file under the default settings. I changed that to 0 and took the champaign out of the cooler.

Hi Arbiter!

AnythingFader does essentially the same thing as the FX extension. I made a demo for you to maybe better help you find the problem you are having.

One more thing:

Any reason that I wouldn't be able to use bg images on the slides?

What I'm trying to pull off is have a somewhat transparent png overlay on top of another image. I am currently trying to achieve this by putting the png in the and using css to put the other image as a bg image. But it will not show the bg image.

Perhaps there is a better way to do this?

I want this: http://arbiter-design.com/fader/overlay.png

To go over this (or any image that a user could define): http://arbiter-design.com/fader/testslide.jpg

To make this in the slide: http://arbiter-design.com/fader/BannerSlide.jpg

With the intention of putting text in top right corner eventually, but I won't worry about that yet.

And then just hack in the fader code from earlier?

I have used the Anythingfader slider on a site but I have one error that I can't fix. When you select the second group of images the last slide is displayed first.

Any fixes for this bug?

Chris,

I'm working with the anything fader vs. anything slider. These are f'in awesome works! No other slider out there even compares. I've been experimenting with all of them and seriously? Nice work!

Here's my dilemma? Somewhere in the code my list image rule is getting broken. I believe? What I'm doing is basically creating three columns inside of each slide. Each one of these columns has a list inside of it. The list type image should have a particular image as declared in the (index) style sheet.

When I use the anything slider everything works perfectly, but using the same implementation with the fader the list type images do not show. I assume this rule is being broken somewhere? I know I am calling upon the list correctly because of the border around the list, as you can see in the link I will provide.

jimmykdezign.net/index2



Ive been up for days and don't norm ask for help but I really cant get past why my list images are not showing up within the fader? Please help? :(

MY HTML-----------------------------------------------------------------------




<div class="anythingFader">
        
          <div class="wrapper">
             <ul>
               <li><!--START OF FIRST SLIDE-->

             <div id="textSlide">


<div id="col_c1">

<p><span class="style-2">My Weapons 4 Design...</span></p>

<ul>

<li class="star">Photoshop</li>
<li>Dreamweaver</li>
<li>Illustrator</li>
<li>Flash</li>
<li>jQuery</li>
<li>WordPress</li>
<li>Strong Coffee</li>


</ul>


</div><!-- end of col_c -->


<div id="col_d1">

<p><span class="style-2">The Expected List...</span></p>

<ul>

<li>Understanding of design principles</li>
<li>Meticulous attention to detail</li>
<li>Knowledge of grid systems</li>
<li>Project management</li>
<li>Able to manage multiple projects</li>
<li>Self-Starter &amp; responsible</li>
<li>Customer service skills bar none</li>

</ul>

</div><!--end of col_d-->

<div id="col_e1">

<p><span class="style-2">My Favorite Hangouts...</span></p>

<ul id="visit">

<li><a href="http://css-tricks.com/&quot; target="_blank">CSS - TRICKS</a></li>
<li><a href="http://www.cssplay.co.uk/&quot; target="_blank">CSS Play</a></li>
<li><a href="http://www.smashingmagazine.com/&quot; target="_blank">Smashing Magazine</a></li>
<li><a href="http://www.alistapart.com/&quot; target="_blank">A List Apart</a></li>
<li><a href="http://www.thefwa.com/&quot; target="_blank">the FWA</a></li>
<li><a href="http://www.cssdesignawards.com/&quot; target="_blank">CSS Design Awards</a></li>
<li><a href="http://www.cssmania.com/&quot; target="_blank">CSS Mania</a></li>


</ul>

</div><!-- end of col_e -->
                                 
</div><!--end of text slide-->
</li><!--END OF FIRST SLIDE-->

<li><!--START OF SECOND SLIDE-->                             

<div id="textSlide"><!--start of text slide-->
                                     
<div id="col_c2">

<p><span class="style-2">My Stats...</span></p>

<ul>

<li><strong>Name:</strong> James Knoll (Jimmy)</li>
<li><strong>Birth Date:</strong> 23rd Janury 1972</li>
<li><strong>Background:</strong> Caucasian</li>
<li><strong>City:</strong> St. Louis</li>
<li><strong>Country:</strong> U.S.A.</li>
<li><strong>Occupation:</strong> Web Designer</li>
<li><strong>Education:</strong> The Art Insitute</li>

</ul>

</div><!--end of col_c-->

<div id="col_d2">

<p><span class="style-2">My Likes...</span></p>

<ul class="no">

<li><strong>Movies:</strong> Horror &amp; Drama</li>
<li><strong>Music:</strong> Heavy Metal &amp; Rock</li>
<li><strong>Food:</strong> Chineese &amp; Italian</li>
<li><strong>Hobbies:</strong> Fishing, Cooking &amp; Art</li>

</ul>

</div><!--end of col_d-->

<div id="col_e2">

&nbsp;

</div><!--end of col_e-->
                                   
</div><!--end of text slide-->
</li><!--END OF SECOND SLIDE-->
</ul>
</div><!-- end of wrapper-->
</div><!-- end of anything fader-->



MY index CSS-----------------------------------------------------

/*slide 1*/

#col_c1{
	height:220px;
	width:266px;
	padding-left:20px;
	float:left;
	/*border:solid 1px #f00;*/
	}
	
#col_d1{
	height:220px;
	width:276px;
	padding-left:10px;
	float:left;
	/*border:solid 1px #f00;*/
	}
	
#col_e1{
	background: url(images/notes2.png)no-repeat 90% 90%;
	height:220px;
	width:262px;
	padding-left:20px;
	float:right;
	/*border:solid 1px #f00;*/
	}

#col_c1 ul, #col_d1 ul, #col_e1 ul{
    list-style-type: none;
	list-style-image: url(images/star1.png);
	list-style-position: inside;
	margin-top:10px;
	border: solid 1px #f00;
	}

#visit li a:link, #visit li a:active, #visit li a:visited{color:#000;}
#visit li a:hover{color:#900; font-weight:bold;}

/*slide 2*/

#col_c2{
	height:220px;
	width:266px;
	padding-left:20px;
	float:left;
	/*border:solid 1px #f00;*/
	}
	
#col_d2{
	height:220px;
	width:276px;
	padding-left:10px;
	float:left;
	/*border:solid 1px #f00;*/
	}
	
#col_e2{
	height:220px;
	width:262px;
	padding-left:20px;
	float:right;
	/*border:solid 1px #f00;*/
	}

#col_c2 ul, #col_d2 ul, #col_e2 ul{
    list-style-type: none;
	margin-top:10px;
	/*border: solid 1px #000;*/
	}
	

(MODIFIED) ANYTHING FADER CSS-----------------------------------


.anythingFader                { 
 width:860px;
 height:225px;
  position: relative; 
  margin: 0 auto 15px; 
  border: solid 0px red;
  clear:both;
}


  
.anythingFader .wrapper                { 
    width:860px;
 height:225px;
  overflow: auto; 
  margin: 0 auto; 
  position: absolute; 
  top: 0; 
  left: 0; 
  border: solid 0px lime;
  }

.anythingFader .wrapper ul             { 
  width: 99999px; 
  list-style: none; 
  margin: 0; 
  }

.anythingFader ul li                   { 
  display: block; 
  float: left; 
  padding: 0; 
  margin: 0; }
  
.anythingFader .arrow                  { display: none; }
#start-stop                             { display:none;}


#thumbNav {  position: relative; top: 225px; margin-left: 750px; }
#thumbNav  { display: inline; }
#thumbNav a {
	color:#000;
	background-color: #ddd;
	font-family:'Oswald', serif;
	font-size:12px;
	display:inline-block;
	text-decoration: none;
	padding: 3px 15px 3px 15px;
    border:1px solid #cccccc;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-right-radius: 10px;
    -moz-box-shadow: inset 1px 1px 3px #717171;
	box-shadow: inset 1px 1px 3px #000;
	margin: 0 5px 0 0;
	}
	

#thumbNav a:hover {
	color:#900;
	background:#f5f5f5;
	-webkit-box-shadow: 1px 1px 3px #717171;
	-moz-box-shadow: 1px 1px 3px #717171;
	box-shadow: 1px 1px 3px #909090;
	}


#thumbNav a.cur  {
	color:#900;
	background-color: #ddd;-webkit-box-shadow: 1px 1px 3px #717171;
	-moz-box-shadow: 1px 1px 3px #717171;
	box-shadow: 1px 1px 3px #909090;}
/*
  Prevents
*/
.anythingFader .wrapper ul ul          { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
.anythingFader .wrapper ul ul li       { float: none; height: auto; width: auto; background: none; }

Hi!

I just started using Anything Slider with fx extension. I want my images to fade out/in. I got them to fade in, but when they should fade out they just disappear, no fading effect there. Any ideas on what I might be doing wrong?

Code looks like this:

$(function () {
			
	$('#slider1')
	.anythingSlider({
		autoPlay: true,
		width: 730,      
		height: 490,
		buildArrows: true,
		delay: 5000, 
		animationTime : 0, // zero time between slide transitions
    })

	.anythingSliderFx({
        // target the entire panel and fade will take 500ms
        '.panel' : [ 'fade', 1000, 'easeInOutCirc' ]
	});
})

@Mottie: Yes I did. I also saw on your demo that you posted above. It looks the same for me.

Hi Ulle!

Oh so you want the images to cross-fade. Sadly because of the way AnythingSlider is set up the images are floating side-by-side, so having images cross fade would not be possible. If you really need to have a cross fade, I'm afraid I'll have to recommend another slider. And because you're only using images, I'd recommend using Nivo Slider because of all of the cool slide transitions.

Oh, maybe try jQuery Cycle or our very own Jamy's PlusSlider.

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:

<script type="text/javascript">

	jQuery(document).ready(function() {
        function formatText(index, panel) {
		  return index + "";
	    }
		
        jQuery(function () {
            jQuery('.anythingSlider').anythingSlider({
                easing: "easeInOutExpo",        // Anything other than "linear" or "swing" requires the easing plugin
                autoPlay: <?php echo $play; ?>,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not.
                delay: 4000,                    // How long between slide transitions in AutoPlay mode
                startStopped: false,            // If autoPlay is on, this can force it to start stopped
                animationTime: 600,             // How long the slide transition takes
                hashTags: true,                 // Should links change the hashtag in the URL?
                buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
        		pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
        		startText: "Go",             // Start text
		        stopText: "Stop",               // Stop text
		        navigationFormatter: formatText       // Details at the top of the file on this use (advanced use)
            });
            jQuery("#slide-jump").click(function(){
                jQuery('.anythingSlider').anythingSlider(6);
            });
        });
	});

	jQuery(document).ready(function() {
		jQuery("div.toggle_entry").hide();
		jQuery("div.toggle_buttons *").click(function() {
			jQuery(this).parent().parent().parent().parent().parent().parent().parent().parent().find(".toggle_entry").slideToggle(500);
			jQuery(this).parent().find("*").toggleClass("active");
		});
	});

</script>

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

<style>
.anythingSlider                         { width: 1000px; height: 320px; position: relative; padding-bottom: 0px; margin: 0 auto 0px; }
.anythingSlider .wrapper                { width: 1000px; overflow: hidden; height: 320px; margin: 0px; position: absolute; top: 0; left: 0; }

                                       /* Width below is max for Opera */

.anythingSlider .wrapper ul             { width: 32700px; list-style: none; position: absolute; top: 0; left: 0; background: #eee; margin-top:0px; left: -40px; }
.anythingSlider ul li                   { display: block; float: left; padding: 0; height: 320px; width: 1000px; position: relative;  }
</style>

Thank you so much for your response.

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

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.

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".