jQuery Slider Issue

Question

<M/> 170 Why so serious?

11 Years Ago

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>

javascript

4 Contributors
11 Replies
161 Views
2 Days Discussion Span
Latest Post 11 Years Ago Latest Post by JorgeM

All 11 Replies

pritaeas 2,194 ¯\_(ツ)_/¯

11 Years Ago

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?

JorgeM 958 Problem Solver

11 Years Ago

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 958 Problem Solver

11 Years Ago

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

Reply to this topic

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.

<M/> 170 Why so serious? Featured Poster · Answer 1 · 2012-08-09T22:19:38+00:00

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/> 170 Why so serious? Featured Poster · Answer 2 · 2012-08-10T04:36:35+00:00

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

andrewaus -2 Newbie Poster · Answer 3 · 2012-08-10T04:56:43+00:00

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.

<M/> 170 Why so serious? Featured Poster · Answer 4 · 2012-08-10T15:28:49+00:00

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

<M/> 170 Why so serious? Featured Poster · Answer 5 · 2012-08-10T16:29:19+00:00

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

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 6 · 2012-08-11T18:14:00+00:00

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?

<M/> 170 Why so serious? Featured Poster · Answer 7 · 2012-08-12T00:47:18+00:00

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

Thanks you guys!

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 8 · 2012-08-12T17:07:48+00:00

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

jQuery Slider Issue

Recommended Answers Collapse Answers

All 11 Replies

Recommended Answers