Forums Get help. Give help.
[Solved] anything slider 1.7.25
-
Hi everyone..
Firstly loving this slider.. been trying to update my webpage lately.. started off with a real simple slider.. learnt a little bit about coding required.. decided to go with this slider as it has lots of features i seek..
Anyways.. got jquery sorted and the slider is currently working fine... have done most tweaks to it and am pretty happy as far.. I am just trying to do the last bits n pieces..
I wish to have a fade in and out effect between each image..
I would like to get rid of the numbers on the tabs of the slider and just use a coloured square or something..
If i can have each image to link to another page in my website..
Please remember that I am very new to jquery/html/css coding.. I am eager to learn and keen to finish this part of my website. Since I am so new it may cause me to ask stupid sounding questions. I apologize in advance for this and I dont mean to offend/annoy people..
I look forward to anyones reply :)
Thanks in advance
Oddzy from NZ -
Hi Oddzy!
Here is a basic demo for you to look at. I used this HTML:
And this javascript<ul id="slider">
<li><a href="other-page1.html"><img src="http://placekitten.com/300/200" alt="" /></a></li>
<li><a href="other-page2.html"><img src="http://placehold.it/300x200" alt="" /></a></li>
<li><a href="other-page3.html"><img src="http://placebear.com/300/200" alt="" /></a></li>
<li><a href="other-page4.html"><img src="http://dummyimage.com/300x200/000/fff.jpg" alt="" /></a></li>
</ul>$('#slider')
.anythingSlider({
// try out this theme... you might like it better than empty tabs
// theme: 'metallic',
// remove numbers from navigation, but uncomment out the theme above
// it might be what you really want.
navigationFormatter: function(){
return '';
},
// *** Make slides Fade in/out ***
// zero time between slide transitions
animationTime : 0,
// set this delay to fade out the current slide before animating
// set here to match the fade time
delayBeforeAnimate : 500,
onSlideBegin: function (e, slider) {
slider.$items.fadeOut(500);
},
onSlideComplete: function (slider) {
slider.$items.fadeIn(500, "swing");
}
});
-
Well, it is usually preferred to keep the HTML nice and clean. So all you'll need to do is copy the javascript above, but wrap it all inside of a document ready function:
Save it on your site into a separate file with a ".js" ending. Grouping multiple scripts together is also more efficient, but may make it difficult for you if you are still learning how to troubleshoot code.$(function(){
// add all of the above code here
});
Add a script tag in the HTML pointing to that file and you should be set. The demo I shared automatically adds the document ready function wrapper so I forgot to mention it. -
Hi Mottie :)
Ok so i made a new file called fadefx.js. Pasted in the document ready function and then copied the above javascript to where you kindly put //add all of the above code here. Saved it and put it in my "js" folder.. I then placed this<script src="js/faderfx.js"></script>
in the "head" of my html file to run the fade effects.. and saved everything. Then previewed in browser and still no go.
I think I may have missed something small somewhere lol.. Here is some of my code..
"Head"<!--Jquery required-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <!--loads jquery from google CDN-->
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script> <!--loads jq easing-->
<!--tester script to make sure jquery is working-->
<script type="text/javascript">
$(document).ready(function(){
alert("jquery is working sucka!!!");
});
</script>
<!-- Anything Slider -->
<link rel="stylesheet" href="css/anythingslider.css"/>
<script src="js/jquery.anythingslider.js"></script>
<!-- AnythingSlider optional extensions -->
<script src="js/jquery.anythingslider.fx.min.js"></script>
<!-- <script src="js/jquery.anythingslider.video.js"></script> -->
<script src="js/faderfx.js"></script> <!-- my fader javascript file -->
<!-- Define slider dimensions here -->
<style>
#slider {
width: 850px;
height: 300px;
}
</style>
<!-- AnythingSlider initialization -->
<script>
// DOM Ready
$(function(){
$('#slider').anythingSlider();
});
</script>
<link rel="stylesheet" href="css/main.css"/> <!--link main stylesheet to html-->
And this is my Fadefx.js file$(function(){
$('#slider')
.anythingSlider({
// try out this theme... you might like it better than empty tabs
theme: 'metallic',
// remove numbers from navigation, but uncomment out the theme above
// it might be what you really want.
navigationFormatter: function(){
return '';
},
// *** Make slides Fade in/out ***
// zero time between slide transitions
animationTime : 0,
// set this delay to fade out the current slide before animating
// set here to match the fade time
delayBeforeAnimate : 3000,
onSlideBegin: function (e, slider) {
slider.$items.fadeOut(500);
},
onSlideComplete: function (slider) {
slider.$items.fadeIn(500, "swing");
}
});
});
I also really like the metallic theme.. I uncommented the above code like you suggested but the slider buttons never changed? I also changed the theme name in the file...
I am really sorry to be such a bother.. The first slider I installed which was an ul type took me a lil while but I finally got it lol. Once I had it running I thought why not give the anythingslider a go since it was "feature rich" haha.. looks like I bit off more than I can chew :) -
Hi Mottie
Ok so I added this line of code into the head of my html file.<script>src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"</script>
But fading still does not seem to work. I still have not got the metallic theme to work.. Any more ideas on how to get this to achieve this?
On a good note my page is really coming together now :)
Thanks in advance
Oddzy -
Still working away at it.. here is the contents of my header
<!--loads jquery from google CDN-->
<script type="text/javascript" src="jsapi"></script>
<script>src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"</script> <!-- Load Jquery -->
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<!-- Anything Slider -->
<link rel="stylesheet" href="css/anythingslider.css"/>
<script src="js/jquery.anythingslider.js"></script>
<!-- AnythingSlider optional extensions -->
<!--<script src="js/jquery.anythingslider.fx.js"></script>-->
<!-- <script src="js/jquery.anythingslider.video.js"></script> -->
<script>type="text/javascript" src="js/jquery.easing.1.2.js"</script> <!--loads jq easing-->
<!--<script>type="text/javascript" src="js/fade.js"</script>
<!--<link rel="stylesheet" href="css/anythingslider.css"/>-->
<!--<link rel="stylesheet" href="css/animate.css"/>-->
<script src="js/fade.js"></script>
<link rel="stylesheet" href="css/theme-metallic.css"/>
<link rel="stylesheet" href="css/fadefx.css"/>
<!-- Define slider dimensions here -->
<style>
a:visited {
color: #C0C0C0;
}
a:hover {
color: #FFFF00;
}
.style1 {
border-width: 0px;
}
</style>
<!-- AnythingSlider initialization -->
<script>
// DOM Ready
$(function(){
$('#slider').anythingSlider();
});
</script>
See any issues in there? Do i need to have anythingslider.fx.js in order to do the fade? As you can see I have plenty of uncommented code in there.. not sure weather I need it or not so will remove any stuff that isnt required..
This is my fade.js file. Is there a specific order I should list js files in my header? It have figured out that the order greatly effects css files so was wondering if it is the same thing?$('#slider').anythingSlider({
// try out this theme... you might like it better than empty tabs
theme: 'metallic',
// remove numbers from navigation, but uncomment out the theme above
// it might be what you really want.
navigationFormatter: function() {
return '';
},
// *** Make slides Fade in/out ***
// zero time between slide transitions
animationTime: 0,
// set this delay to fade out the current slide before animating
// set here to match the fade time
delayBeforeAnimate: 500,
onSlideBegin: function(e, slider) {
slider.$items.fadeOut(500);
},
onSlideComplete: function(slider) {
slider.$items.fadeIn(500, "swing");
}
});
Look forward to a reply :)
Oddzy -
Hiya Mottie
Thats fine I understand you are probably a very busy person so the lease I can do is be patient :)
Not working yet.. still trying to figure out how to do fading.. Anyways I put http://jsfiddle.net/Oddzy/GrMNs/5/">demo together.
The strange thing is that the fade works here but not on my end lol.. I think that the issue is how and when I am getting the "fadefx" file to activate. To tell you the truth I have no idea where to put the script entry for my fadefx.js file and if I am using the right code to activate at all lol..
I currently use the code
to activate my fadefx.js file. is this correct? can you also tell me where in my html am I supposed to place it?<script src="js/fadefx.js"></script> -
The demo you shared looks like it's working to me. Maybe you're missing the extra CSS that is in css panel, but not in the HTML section?
I don't know what is in your fadefx.js file... is it just the demo code? How ever you are activating the slider, just make sure that the code is surrounded by a document ready event:
This code can really go anywhere on the page, but ideally it should be placed in the document head.$(function(){
// initialize slider here
}); -
Yes the code works on jsfiddle but not on the software (expression web) I am using at home..
Yes the contents of my "fadefx.js" file contains code the that what was in the JAVA section of the demo.
The slider works on my end and is sliding thru pictures. Metallic theme is working.
Yes I am using the following code to "initialize" the slider and this is placed in the document head.<script>
// DOM Ready
$(function(){
$('#slider').anythingSlider();
});
</script>
I think the issue I am having is that I am not linking my external files correctly so this leaves me with 2 questions.
What command should I use to link my external CCS file to my html and where should I place this?
What command should I use to link my external JAVA file to my html and where should I place this?
Thanks for your guidance Mottie!
-
Maybe I didn't understand your questions, but I read back through this thread and I can see you know how to use both the link and script tags.
I guess you're asking how are they different when pointing to local files versus remote files? No difference, you just need to have the URL pointing to the right place.
As to where to place these tags, as before, the link and script tags ideally go into the head of your document, but really will work anywhere. But, if you look at the source of HTML5 Boilerplate index page, you'll see that they actually put most of the script tags at the bottom of the page. I guess to ensure that all of the HTML has loaded before the script loads, or something like that.
Lastly, we're working with javascript here, not java. They are totally different languages :P -
lol as you may have noticed I am fairly new to this.. not even using the correct terminology yet haha *facepalm*.
Thank you for the link to that page.. helps me clarify where things should go.
I will work more on my webby later on.. still confused as to why the slider does not fade yet but will continue to work on it..
Thanks for your help so far Mottie. I really appreciate it :)
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Categories
- All Discussions15,493
- CSS Combat7,193
- Other Discussions3,820
- JavaScript Jungle2,455
- PHP Problems2,025
Tips
Just some helpful hints to get the most out of the forums.