Home › Forums › JavaScript › Anything Slider Help, Change Animation to Fade
- This topic is empty.
-
AuthorPosts
-
March 14, 2011 at 12:18 pm #55638Historical Forums UserParticipant
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.
March 30, 2011 at 11:28 am #53037stevehessMemberie9 seems to not rotate slides. any idea?
March 30, 2011 at 1:12 pm #53002jamygoldenMemberHave a look at this, perhaps it could be useful.
May 9, 2011 at 12:27 pm #77064ChrisMoreMemberHello,
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.May 11, 2011 at 4:07 pm #76655salty10isMemberGreat 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.
May 16, 2011 at 2:38 pm #75974ArbiterParticipantMottie,
I’m having a hard time getting that code to work.
Any chance on getting the AnythingFader project back up?
May 16, 2011 at 11:22 pm #75904ArbiterParticipantNot 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!
May 17, 2011 at 8:53 pm #75902ArbiterParticipantOne 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.
May 18, 2011 at 10:53 am #75860ArbiterParticipantAnd then just hack in the fader code from earlier?
May 26, 2011 at 4:32 pm #75233geneMemberI 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?
June 4, 2011 at 1:41 pm #74248JimmyMemberChris,
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.
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 Favorite Hangouts...
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; }June 4, 2011 at 5:14 pm #74207markthema3ParticipantHey @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?
June 8, 2011 at 9:59 am #73879ulleMemberHi!
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' ]
});
})June 9, 2011 at 3:59 am #73641ulleMember@Mottie: Yes I did. I also saw on your demo that you posted above. It looks the same for me.
June 9, 2011 at 4:00 am #73627ulleMemberReally nice script however! Well done!
- and using css to put the other image as a bg image. But it will not show the bg image.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.