'EasySlider' call for help

JavaScript
1

Hi,

Am having problems getting Easyslider going in my mock site. I’m pretty much a total newbie to JQuery (just started this week) and can’t figure where I’m going wrong. The Tut I’m following is here: http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider .

EDIT: I’m attempting to install the latest version 1.7, the link is at the top. But the only clear instructions are on this page.

The page it’s going on: http://www.cusodesign.com/work.html

So far I have connected up the two files to my html. Put in the Div with lists + 3 dummy images. Added the CSS files.

One thing I’m stuck on in the tut is where i put the following code :

$(document).ready(function(){
$(“#slider”).easySlider();
});

I think i’ve tried placing it just about everywhere but no joy. Where exactly does it need to go in the JScript?

Thanks for any help.:slight_smile:

2 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cuso Design</title>
<link href="cusostyles.css" rel="stylesheet" type="text/css" />


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="easySlider1.7.js"></script>

<script type="text/javascript">
   $(document).ready(function) {
      $('#slider').easySlider();
   });
</script>
</head>

You need to enclose the Javascript function into the script tag. :slight_smile:
You can place that pretty much anywhere you like. More information here.

3

Hey thanks kohoutek,

I’ve done like you said, but it’s showing up an error on line 15:

14 <script type=“text/javascript”>
15 $(document) .ready(function) {
16 $(‘#slider’).easySlider();
17 });
18 </script>

One other thing i’ve noticed is i have not added the JQuery libary to the head. Is this basic stuff i should do? I’ve just added it my side but hasn’t helped.

And thanks for the link also, I’m reading through that now:)

4

I forgot a parenthesis, sorry.


<script type="text/javascript">
   $(document).ready(function() {
      $('#slider').easySlider();
   });
</script>

You have the jQuery library in your head?


[COLOR=Red][B]<script type="text/javascript" src="jquery.js"></script>[/B][/COLOR]
<script type="text/javascript" src="easySlider1.7.js"></script>

At least I saw it there when I first looked at your page. If you don’t have it, it must come first, before any plugins, just like you have there now.

5

Hi kohoutek,

Thanks, that fixed the error:)

And yes, sorry your right. I put in the library that came with the tut. Not sure if thats the latest version and if i need to change it?

If not, guess i must have gone wrong somewhere else. I just uploaded the script onto the server but no sliding yet. Hmm. I’m double checking things through to see if i have followed the Tut right. Maybe the <span id= part is misplaced?

6

Hmmm…can’t see an error in your script. Perhaps it’s a version issue (guessing). Try uploading the latest jQuery: http://code.jquery.com/jquery-1.4.2.min.js

Edit: I see you don’t have any controls on your page just the slide container?

Edit 2: Also, your you’re not having the anchor in your list items (I’m trying to pin down the error)

Try this:


<li><a href="#"><img src="myimage.png" alt=""></a></li>

Instead of this:


<li><img src="myimage.png"  alt=""></li>
7

west end lane,

after testing it turns out that you have correctly implemented the code. So forget my test recommendations.

This is not a Javascript issue but a CSS issue. You have absolutely positioned your header. This is why the controls don’t show up because they’re hidden behind your header. When you absolutely position an element you take it out of the normal flow and subsequent static positioned elements will take up that space instead.

The solution is to code your design differently. For the layout you have you don’t need to absolutely position your elements. As it’s closely approaching 3am, I need to get to bed but just a quick test (see below) will show you that, by changing your Header1’s position from absolute to relative, will make your controls appear and your slider working.


#Header1 {position:relative;}
8

Yes i think your right. I’ve just looked through things and found a separate CSS folder, along with some images. This is what comes with version 1.7 (the latest version).
So i guess i just paste the CSS into my external style sheet. But what would be the best way to add these images for the slider?

Shame the Tut doesn’t go into any of this. Bit more involved than i thought it would be for this noob:D

Thanks for your help, I’ll have a bash at what you said.

9

West end lane,

you don’t need to make any of the tests. The jQuery version you’re using is fine and works with the plugin. Please see my last post (we cross-posted!): Change #Header1 from position:absolute to position:relative and you will see the problem.

10

Yeah it’s getting late - although only 2am here! Thanks so much. Good to know i have put the Script together right at least. I will crack on with it tomorrow and hopefully have it all up and running.

Cheers again.

11

Ha! Ok, i’m still here. Did what you said and yes, now i can see the next/previous text showing. Like you say, it’s now a CSS issue. Will have a quick play with it…

Edit: OK, got it sliding! Not styled yet but will save that for tomorrow. Thanks very much for your help kohoutek, its been a big help.:award: