Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Anything Slider Help, Change Animation to Fade

  • This topic is empty.
Viewing 15 posts - 16 through 30 (of 62 total)
  • Author
    Posts
  • #55638

    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.

    #53037
    stevehess
    Member

    ie9 seems to not rotate slides. any idea?

    #53002
    jamygolden
    Member

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

    #77064
    ChrisMore
    Member

    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.

    #76655
    salty10is
    Member

    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.

    #75974
    Arbiter
    Participant

    Mottie,

    I’m having a hard time getting that code to work.

    Any chance on getting the AnythingFader project back up?

    #75904
    Arbiter
    Participant

    Not only is that killer, but you did it so quickly! Thank you so much. I recommend keeping something similar in the demo stuff for the next release. I have searched for other options, but nothing comes really close to what AnythingSlider has to offer. Nivo is nice, but no full HTML support…

    Thanks again!

    #75902
    Arbiter
    Participant

    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.

#75860
Arbiter
Participant

And then just hack in the fader code from earlier?

#75233
gene
Member

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?

#74248
Jimmy
Member

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
















  • My Weapons 4 Design...





    • Photoshop

    • Dreamweaver

    • Illustrator

    • Flash

    • jQuery

    • WordPress

    • Strong Coffee











    The Expected List...





    • Understanding of design principles

    • Meticulous attention to detail

    • Knowledge of grid systems

    • Project management

    • Able to manage multiple projects

    • Self-Starter & responsible

    • Customer service skills bar none

















  • My Stats...





    • Name: James Knoll (Jimmy)

    • Birth Date: 23rd Janury 1972

    • Background: Caucasian

    • City: St. Louis

    • Country: U.S.A.

    • Occupation: Web Designer

    • Education: The Art Insitute








    My Likes...





    • Movies: Horror & Drama

    • Music: Heavy Metal & Rock

    • Food: Chineese & Italian

    • Hobbies: Fishing, Cooking & Art








     











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; }

#74207
markthema3
Participant

Hey @chriscoyier, any chance of letting us browse the contents of that examples folder? I have no doubt there’s some other cool stuff hidden away in there.

One other thought, any chance of an AnythingGallery that does a random transition/animation?

#73879
ulle
Member

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' ]
});
})

#73641
ulle
Member

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

#73627
ulle
Member

Really nice script however! Well done!

Viewing 15 posts - 16 through 30 (of 62 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.