jQuery Slider Issue

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

2 Days

Discussion Span

9 Months Ago

Last Updated

12

Views

Question
Answered

<M/>

Senior Poster

3,611 posts since Apr 2012

Reputation Points: 64

Solved Threads: 78

Skill Endorsements: 91

9 Months Ago

1

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?

pritaeas

Posting Prodigy

Moderator

9,316 posts since Jul 2006

Reputation Points: 1,178

Solved Threads: 1,467

Skill Endorsements: 86

9 Months Ago

0

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

<M/>

Senior Poster

3,611 posts since Apr 2012

Reputation Points: 64

Solved Threads: 78

Skill Endorsements: 91

9 Months Ago

1

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.

JorgeM

Industrious Poster

4,024 posts since Dec 2011

Reputation Points: 297

Solved Threads: 549

Skill Endorsements: 115

9 Months Ago

0

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

<M/>

Senior Poster

3,611 posts since Apr 2012

Reputation Points: 64

Solved Threads: 78

Skill Endorsements: 91

9 Months Ago

1

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.

andrewaus

Newbie Poster

5 posts since May 2012

Reputation Points: -2

Solved Threads: 2

Skill Endorsements: 1

9 Months Ago

0

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

<M/>

Senior Poster

3,611 posts since Apr 2012

Reputation Points: 64

Solved Threads: 78

Skill Endorsements: 91

9 Months Ago

1

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

JorgeM

Industrious Poster

4,024 posts since Dec 2011

Reputation Points: 297

Solved Threads: 549

Skill Endorsements: 115

9 Months Ago

0

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

<M/>

Senior Poster

3,611 posts since Apr 2012

Reputation Points: 64

Solved Threads: 78

Skill Endorsements: 91

9 Months Ago

1

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?

JorgeM

Industrious Poster

4,024 posts since Dec 2011

Reputation Points: 297

Solved Threads: 549

Skill Endorsements: 115

9 Months Ago

0

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

Thanks you guys!

<M/>

Senior Poster