0

--Create an array to contain the path to the image’s source. Don’t hardcode the path into the array. Use a
loop to retrieve the name of the file from the source of the image (ie. <img src="img/house.jpg"/>.--

this is my jQuery

$(function(){
  var slideShowContainer = $('.slideShow'),
      slideShowItem = '.slides li',
        transitionTime = 1000,
      pauseTime = 3000,
        curSlide = 0,
      int = setInterval(function(){
        if(curSlide === parseInt($(slideShowItem).length - 1)){
        curSlide = 0;
        } else {
        curSlide++;
        }

      slideShowContainer.animate({ scrollLeft: $(slideShowItem).width() * curSlide }, transitionTime);
  }, pauseTime);
})

and this is whats in my body

<body>

<div class="slideShow">
  <ul class="slides">
    <li><img src="dessert1.png"></li>
    <li><img src="dessert2.png"></li>
    <li><img src="yummy.jpg"></li>
  </ul>
</div>

</body>
</html>

my question is how do you put an array with my JQ code as the teacher said it?

thank you

3
Contributors
13
Replies
55
Views
2 Years
Discussion Span
Last Post by DaveAmour
0

I think if you change slideShowItem = '.slides li' to slideShowItem = $('.slides li') then you will get a collection of items.

I had a play with your code and changed a few things just for a bit of fun. Its far from perfect but if it gives you any ideas that would be good.

http://www.paxium.co.uk/content/daniweb/slideshow.html

Just view the souce to see the code.

I would be interested to see your CSS which you did not originally post.

0

the slideshow is great but how about putting a loop?. I read so much articles about it saying its useless but i really need a loop in it somewhere.

"Create an array to contain the path to the image's source. Don't hardcode the path into the array. Use a
loop to retrieve the name of the file from the source of the image (ie. <img src="img/house.jpg"/>."

it works fine with my code as well as yours too! but the loop?

0

A loop is nothing more than an automatic repetition of code eg:

While (i < 10)
{
    Print i

    i = i + 1
}
End

By the way the above is just pseudo code - ie a made up language to show an idea rather than being a specific language.

In your code you already have a loop.

This is setInterval

setInterval will repeat or loop the same bit of code over and over again at a predefined interval which you have supplied as 3 seconds via pauseTime.

Does that make sense?

0

It sounds like while the instructor's focus here is on placing the values of the image source in an array and then access them via a loop of some sort. There are a variety of options here. Do you need to use plain JS or are you able to use jQuery?

For me, what comes to mind is something like this if I'm using jQuery.

<img src="dessert1.png" class="slideImg">
<img src="dessert2.png" class="slideImg">
<img src="yummy.jpg" class="slideImg">

<script>
  $( ".slideImg" ).each(function() {
    console.log($(this).attr("src") );
  });
</script>

You should go back and get clarification regarding the expectation. If i was teaching the class, i think i'd ask for JS if the focus here is arrays and loops. I dont see the challange if you are using jQuery.

0

@JorgeM i got approve to use JS in it

@DaveAmour is it possible to have a for loop?

i know, my instructor doesn't know how to explain at all! the whole class is failing!

0

Sure you can have a for loop. Which particular kind of for loop though and for which part of the logic?

0
var[] image;
for(int i=0;i<20;i++){
  image[i] = "images/names" + i + ".jpg";
}

let's say something like this?

0

so apparently this is the right code according to my instructor.

$('document').ready(function(){

var slides = $('li img');
var i = 0;
var max = slides.length;
var slideHolder = [];

for (i = 0; i < max; i++){

    slideHolder[i] = slides.eq(i).attr('src');

}

i = 0;

function slideShow(){

    $("#pic").attr("src", slideHolder[i]).fadeIn(1000).delay(2000);
        (i < max -1) ? i++; i = 0;

        slideShow();

    })

}

slideshow();

});

thank you for helping me! we tried!

0

That won't work I'm afraid. There are various syntax errors. On line 27 for example you call slideshow(). JavaScript is case sensitive so this won't work as your actual function name is slideShow().

Also on line 19 you have i++; but this should be i++: - ie with a colon not a semi-colon.

Also once you get this actually working, this doesn't slide the images, it fades them in an out. You wanted a slideshow, the clues in the name!

There is also a lot of unnecesary code - placing the images into a container is not needed as they are already in a jquery collection.

And finally once you do get this running you will get a stack overflow!

On line 21 you call slideShow - ie it calls itself, thats how it keeps looping. However you need to do this with a callback eg:

$("#pic").attr("src", slideHolder[i]).fadeIn(1000, function() { slideShow(); }).delay(2000);

And finally you never had an html element with an id of pic in the html you showed me at the start.

So anyway mine is working perfectly and is good code.

You can see it here:

http://www.paxium.co.uk

And the code is as follows:

$(function ()
{
    var slideShowContainer = $('#slideshow');
    var slideShowItem = $('#slideshow img');
    var transitionTime = 1000;
    var pauseTime = 4000;
    var curSlide = 0;

    var init = function ()
    {
        setInterval(function ()
        {
            if (curSlide === parseInt($(slideShowItem).length - 1))
            {
                curSlide = 0;
            }
            else
            {
                curSlide++;
            }

            slideShowContainer.animate({ scrollLeft: 400 * curSlide }, transitionTime);
        }, pauseTime);
    };

    init();
});
0

im sorry, i should've been a bit clear the code i posted with fadeIn was the teacher's original code not my own so that means my instructor is wrong and can't teach properly.

Also im in my second semester of my first year in computer science so im kinda new to coding.

0

"my instructor is wrong and can't teach properly." - Excellent!

Well keep up the coding, it takes many years and just when you think you have mastered it, something new comes along!

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.