I wrote the code for a jquery slider... it doesn't seem to work... can someone tell me why it doesn't work??? Could it be because jquery is installed wrong or it can't find it?

Here is my code (I did this all in 1 file)

<title>Slider</title>
</head>

<script src="jquery-1.7.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {
                setInterval ("rotateImages()", 2000);
            });
            function rotateImages() {
                var oCurPhoto = $("#photoShow div.current");
                var oNxtPhoto = oCurPhoto.next ();
                if (oNxtPhoto.length == 0)
                    oNxtPhoto = $("#photoShow div: first");
                oCurPhoto.removeClass('current').addClass('previous');
                oNxtPhoto.css({ opacity: 0.0}).addClass('current').animate({ opacity: 1.0 }, 1000, );
                function () {
                    oCurPhoto.removeClass('previous');  
                });
        }       

<style type="text/css">
#photoShow { 
    width: 1200px; 
    height: 488px; 
}

#photoShow > div { 
    position: absolute; 
    z-index: 0;
}

#photoShow div.previous {
    z-index: 1;
    }
#photoShow div.current {
    z-index: 2;
    }
</style>

<body>

<div id="photoShow">
<div class="current">
   <div>
     <img src="img1.png" alt="Photo Gallery" width="1200" height="488" class="gallery"/>
   </div>
   <div>
     <img src="img2.png" alt="Photo Gallery" width="1200" height="488" class="gallery"/>
   </div>
   <div>
     <img src="img3.png" alt="Photo Gallery" width="1200" height="488" class="gallery"/>
</div>
</div>

</body>
</html>

it doesn't seem to work

What doesn't work?

can someone tell me why it doesn't work

Try to write valid HTML first. Style belongs in the head. Script in the head or body, not in between. Did you download the jquery file?

well the slider doesn't show on the browser, so i'm also guessing that it doesn't slide also....

I'm honestly not sure if I installed jquery properly though... can you help me edit this?

btw... thanks for the quick response :)

What pritaeas is referring to with regard to your page structure, is that you first need to fix your code to follow the following structure:

<!DOCTYPE html>
<html>
<head>
 <title>Page Title!</title>
 <!-- Link to CSS files Here or if you are using inline CSS, next line-->
 <style type="text/css">
 /* Your inline styles */
 </style>
 <!-- Link to your local Jquery Here, or better to use CDN version, next line -->
 <script type="text/javascript" src="jQuery CDN source"></script>
 <script type="javascript">
 <!-- your javascript functions -->
 </script>
 </head>
<body>

<!-- HTML Content -->

</body>
</html>

You can refer to http://docs.jquery.com/Downloading_jQuery, if you want to point to a central source for you jQuery file. it is usually recommended as it is going to be most likely cached in your visitors browser so when they access your site, they dont have to download it again.

Thanks for telling me that, when I get frustrated in figuring something out... things get sloppy :/

But I updated the code and I got a problem.... The problem is that when I wrote the jquery code the logo image gets affected with the slider... Can you guys tell me what to do...
Is there a way in get elments without gathering their tags but rather using the div tag they are placed in?

Here is my jquery code:

Look on the third line... is there a way in just get elements by their divs not by their tags?

<script>
var interval = 4 * 20; // Seconds between change
var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current = 0;

var randomize = function(){
return (Math.round(Math.random() * 3 - 1.5));
}
for(var i = 0; i < imageCount; i++){
images[i].className = 'fade-out';
imageArray[i] = images[i];
}

var fade = function(){

imageArray[current++].className = 'fade-out';
if(current == imageCount){
current = 0;
}
imageArray[current].className = 'fade-in';

setTimeout(fade, interval * 100);
};
fade();
</script>

Thanks guys :)

Its an invalid HTML format that you wrote. Style belongs in the head. Script in the head or body, and not in between. First solve this issue.

OK, solved that issue now what about gathering images by their div rather than their tag?

Assign each div its own ID. For example,

<div id="div1"><img /></div>

Then in your JavaScript, you can access the div as..

document.getElementById("div1");

Thanks JorgeM, I still get other images merging with the slider...

is my jquery code right?

var interval = 4 * 20; 
var images = document.getElementsById("slider");
var imageArray = [];
var imageCount = images.length;
var current = 0;

var randomize = function(){
return (Math.round(Math.random() * 3 - 1.5));
}
for(var i = 0; i < imageCount; i++){
images[i].className = 'fade-out';
imageArray[i] = images[i];
}

var fade = function(){

imageArray[current++].className = 'fade-out';
if(current == imageCount){
current = 0;
}
imageArray[current].className = 'fade-in';

setTimeout(fade, interval * 100);
};
fade();

When you want to grab a specific element, its, document.getElementById, not getElements. So if you are only working with one element, your code logic doesnt seem to apply in this case?

Ooooh that makes so much sense! thanks... and the slider works now :)

Thanks you guys!

Feel free to share the final working piece as it may help others with a similar issue. Glad you resolved your issue!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.