jcarousel

Sorry to be so dumb, but I am trying to set up a simple horizontal sliding image display using jcarousel lite. I have downloaded the scripts and linked them to my page and tried to follow the instructions at http://www.gmarwaha.com/jquery/jcarousellite/#install but I don't understand the step 3 instructions about firing a call to the plugin.

Here is a link to what I've got so far:

http://www.katrinahowley.com/test.html

Can anyone help please?

Thank-you
Bob BarnesAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

pritamduttCommented:
Well I figured out after a little tweaking that the problem is with Jquery version mismatch.

Also, i discovered following issues:

- All Lower case name of the function called - jcarousellite whereas it is jCarouselLite
- There was no class defined for the div.

I have done some modifications... and updated the file..

Same is attached...

Regards,
test.html
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bob BarnesAuthor Commented:
Thank-you pritamdutt, I think I've made all of the changes you sugggested and it almost works now. just won't scroll in either direction, as you can see at the latest incarnation. I have tried with Internet Explorer and Firefox:

http://www.katrinahowley.com/test.html

The example you sent me works perfectly, so I'm missing a trick somewhere and would appreciate you having another look.

Thanks
0
pritamduttCommented:
Please remove the following line ... you don't need it...

<script type="text/javascript" src="scripts/jquery-latest.pack.js"></script>

Regards,
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Bob BarnesAuthor Commented:
Thanks again pprtamdutt, I'm not sure what I did but in redesigning the page and resizing the images, they began to scroll correctly. I removed the above line, but that caused the images to line up one below another, so I put it back in and all seems fine. I am using Dreamweaver CS4 and you can see the result at:

http://www.katrinahowley.com/

What has slowed me right down is that the index page says there is a syntax error on line 20 and that code hinting may not work. No matter what I do I can't get rid of the error meesage, yet the page behaves as expected. Should I forget about the error and just carry on with the rest of the site?

Thanks again
0
pritamduttCommented:
Please verify as according to me line 20 is

20: <script type="text/javascript" src="http://www.gmarwaha.com/js/lib/lib.min.js"</script>
-- Read First Line :  JQUERY 1.2.3

I also see that you have following at line 17

17: <script type="text/javascript" src="http://www.katrinahowley.com/scripts/jquery-latest.pack.js"</script>
-- Read First line of this JS File : jQuery v1.6.4 http://jquery.com/ | http://jquery.org/license */


Please note that both of these are different versions of JQuery.

So, there is bound to be conflict! So you need to include only one of them!
-----------------------

Please note: Jquery Base script  needs to be first, and jCarouselLite script needs to come second, followed by jQuery Easing script.

Hope this helps!

Regards,
0
Bob BarnesAuthor Commented:
Hi pritandutt

Thanks for your help and sorry I've been a long time getting back to you but I've been experimenting. I have discovered that of the 24 combinations of the order the four .js files can be in, they only work in 2 orders, the order I have chosen is:

1. jquery-latest.pack.js
2. lib.min.js
3. jCarouselLite_1.0.1.js
4. jquery.easing.1.1.js

It works also if you transpose 2 and 4. It never works with any of the four files missing.

You can see it is working quite well at

http://www.katrinahowley.com/

Unforunately, it only works with Internet Explorer, not with Firefox.

The three working pages are created from a template, the templateinsists there is now a syntax error at line 23, but the individual pages don't reflect this error.

All in all I feel I'm nearly there, just the Firefox issue to solve, which in all fairness wasn't part of my original question. I would like to award all the points to you for your very welcome assistance. Without you I could not have got this far. If you can suggest how to make it work with Firefox I would appreciate it.

Thanks again
0
pritamduttCommented:
No worries!


What issue are you facing with Firefox!!!


I have looked through your website using Firefox 7 and not facing any errors....

Regards,
0
Bob BarnesAuthor Commented:
Hi, that was quick. The images won't scroll left and right. I will try on another machine to make sure it's not my personal browser. Thanks again, it works perfectly on my laptop, must be a local issue with Firefox, I'll reinstal it.

Points on the way.
0
Bob BarnesAuthor Commented:
Very helpfull member, couldn't have done it without their help.
0
pritamduttCommented:
Cheers!!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.