Link to home
Start Free TrialLog in
Avatar of tlengnick
tlengnickFlag for United States of America

asked on

Slide Show in HTML

I want to present about 5 images on my webpage that:
1) Are automatically replaced by another images sliding in from the right as the existing images slides out to the left.
and
2) Are able to be presented by clicking a little radio button below the image holder.

See the first image at http://quodis.com/ for an example.

Thanks!
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

That site uses jCarousel. What's your question?

http://sorgalla.com/jcarousel/
Avatar of tlengnick

ASKER

My question is how to make "that" happen on my webpage. I have a test folder with the following files in it.

Image01.jpg
Image02.jpg
Image03.jpg
Image04.jpg
Image05.jpg
jcarousel-test.css
jcarousel-test.html
jquery.js

You can view my results here:
http://www.psychtrain.com/test/jcarousel-test.html

You can access any of these files in the test folder to inspect them, e.g.
http://www.psychtrain.com/test/jcarousel-test.css


I've read the instructions and tried to make it work but have been unsuccessful.
jquery.jcarousel.js is also in that folder.
Hi,

I have set up a working example here.

Giannis
Hi Giannis,

This is great! Just a couple of questions:

1) Where do I put the javascript that is in the lower-left-hand quadrant? I put it in the body of my html and that didn't work.

2) Do I need the jquery.js or jquery.jcarousel.js files? I don't see them referenced in any of the code.

Thanks for the example!
Yes, you need to referense these. They are referenced in jsfiddle in the External Resources section on the left.

Giannis
Arggh!

So, I've now referenced the js files (I believe I have--this is my first time doing any of this, if you hadn't noticed)...here is the reference code in the body of my html file:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.jcarousel.min.js">                                                                                                                                 function mycarousel_initCallback(carousel)
{
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });
...etc...

I went to http://code.jquery.com/ and found jquery-1.4.2.min.js...i opened it, copied all and created a new ANSI file and put all that code in it and saved as jquery-1.4.2.min.js.

I am getting only 3 of the images showing now, so something's working...but no automation yet...

Any ideas?
root.jpg
Can you give me the modified HTML file you have?
Yes. I will always upload my latest html to http://www.psychtrain.com/test/jcarousel-test.html

Thanks for your continued help!
I just noticed that after I upload jcarousel-test.html, the code is slightly changed on the server side.

It's automatically adding the following line immediately after the <body> tag:

<script type='text/javascript' language='javascript' src='/B1D671CF-E532-4481-99AA-19F420D90332/netdefender/hui/ndhui.js?0=0&amp;0=0&amp;0=0'></script>

Also...I'm using DotEasy as my domain host...any chance they limit js somehow?
I think i found what is going on....
ASKER CERTIFIED SOLUTION
Avatar of Ioannis Paraskevopoulos
Ioannis Paraskevopoulos
Flag of Greece image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hey! It works!!

Thank you so much!