anything slider 1.7.25

[oddzy]

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

[Mottie]

Hi Oddzy!

Here is a basic demo for you to look at. I used this HTML:

And this javascript

$('#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");

}

});

[oddzy]

hi mottie thanks for your reply..

So do i add that javascript to one of the js files in the folders? Or do I make a separate js file and get the html to “link” it? This is the part I am confused about..

[Mottie]

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:

$(function(){

// add all of the above code here

});

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.

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.

[oddzy]

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

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”

 

')

 

























 

















 

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 :)

[Mottie]

Ahhh I think it might just be because you’re loading jQuery 1.3. The minimum jQuery version for AnythingSlider is ideally version 1.5+.

[oddzy]

Hi Mottie

Ok so I added this line of code into the head of my html file.

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

[oddzy]

okie i got the metallic theme to work.. forgot to add

lol just the fading to go!

[oddzy]

Still working away at it.. here is the contents of my header

 

')

















 

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

[Mottie]

Hi Oddzy!

I’ve been so busy that I haven’t had a chance to look at this… is it working now? It would make my life easier if you shared a link to a demo instead of posting lots of code.

Oh, and here is a demo of how to make the slider fade without using the FX extension.

[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 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?

[Mottie]

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:

$(function(){

// initialize slider here

});

This code can really go anywhere on the page, but ideally it should be placed in the document head.

[oddzy]

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.

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!

[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

[oddzy]

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 :)

[Author]

Posts