slideshow with list and array

Question

chichi9 0 Newbie Poster

9 Years Ago

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

javascript jquery

3 Contributors
13 Replies
299 Views
3 Days Discussion Span
Latest Post 9 Years Ago Latest Post by DaveAmour

DaveAmour 160 Mmmmmm beer

9 Years Ago

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.

DaveAmour 160 Mmmmmm beer

9 Years Ago

If you like what I have done, I can get rid of the scrollbar too if you like?

DaveAmour 160 Mmmmmm beer

9 Years Ago

I was bored so took your/my code and made a slideshow on my site - this is without scrollbars so view the source to see how it works.

http://www.paxium.co.uk

DaveAmour 160 Mmmmmm beer

9 Years Ago

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?

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.

chichi9 0 Newbie Poster · Answer 1 · 2015-04-05T20:06:14+00:00

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?

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 2 · 2015-04-06T13:41:53+00:00

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.

chichi9 0 Newbie Poster · Answer 3 · 2015-04-07T01:53:23+00:00

@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!

DaveAmour 160 Mmmmmm beer Featured Poster · Answer 4 · 2015-04-07T05:18:20+00:00

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

chichi9 0 Newbie Poster · Answer 5 · 2015-04-07T14:21:16+00:00

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

let's say something like this?

chichi9 0 Newbie Poster · Answer 6 · 2015-04-08T02:47:38+00:00

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!

DaveAmour 160 Mmmmmm beer Featured Poster · Answer 7 · 2015-04-08T04:11:06+00:00

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

chichi9 0 Newbie Poster · Answer 8 · 2015-04-08T17:06:29+00:00

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.

DaveAmour 160 Mmmmmm beer Featured Poster · Answer 9 · 2015-04-08T18:09:37+00:00

"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!