Member Avatar for <M/>

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>
  • 4 Contributors
  • 11 Replies
  • 162 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by JorgeM
Member Avatar for pritaeas

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?

Member Avatar for <M/>

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

Member Avatar for JorgeM

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.

Member Avatar for <M/>

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

Member Avatar for andrewaus

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.

Member Avatar for <M/>

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

Member Avatar for JorgeM

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");

Member Avatar for <M/>

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();
Member Avatar for JorgeM

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?

Member Avatar for <M/>

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

Thanks you guys!

Member Avatar for JorgeM

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.