Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript I need a completely agnostic photo slider.

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #175569
    nixnerd
    Participant

    What I mean by ‘completely agnostic’ is that the photo slider should not care how many photos it holds. By that I mean, it should not be built around a specific number of photos. Maybe there will be 3… or 30. Who knows?

    What I need is a photo slider that shows me the next photo in a list/array… no matter how many there are.

    The logic of it is what I’m having trouble with. I assume I’ll need to use .nextSibling or something like that to cycle through the photos.

    Do you guys know of a slider out there that does what I need? OR, do you have any ideas on how this might be done?

    I’ll post a Codepen shortly to show you what I have.

    Any help from “The Jungle” is greatly appreciated.

    https://soundcloud.com/mike-barbiero/guns-n-roses-welcome-to-the

    #175571
    Senff
    Participant

    I thought that most photo sliders were like that. They don’t really care if you have 3 or 300 photos, they just cycle through it all. I’ve never really seen a slider where you had to use an X amount of photos.

    #175573
    nixnerd
    Participant

    All the ones I’ve seen would require me to edit the JS if I wanted to add more photos. That wouldn’t be a big deal AT ALL if it were for my site. This is for a theme. So, basically, I need a slider that just works with whatever markup its given. I have not seen one yet but I could be mistaken.

    Do you know of one?

    Thanks @Senff!

    #175575
    Senff
    Participant

    Well, “whatever markup is given” is a bit of a stretch cause usually, you’re bound to some rules. Most of the time they just require you to create a list (ULs and LIs), or at the very least a container div, and then attach the JS to it. Then that would be made into a slideshow, no matter how many elements.

    So, the plugin would not make a difference between this:

    <div>
        <img src="//malsup.github.com/images/beach1.jpg" width="200" height="200" />
        <img src="//malsup.github.com/images/beach2.jpg" width="200" height="200" />
    </div>
    

    Or this:

    <div>
        <img src="//malsup.github.com/images/beach1.jpg" width="200" height="200" />
        <img src="//malsup.github.com/images/beach2.jpg" width="200" height="200" />
        <img src="//malsup.github.com/images/beach3.jpg" width="200" height="200" />
        <img src="//malsup.github.com/images/beach4.jpg" width="200" height="200" />
        <img src="//malsup.github.com/images/beach5.jpg" width="200" height="200" />
    </div>
    

    But again, you’re bound by markup rules (in the example above, the rule is that the images have to be contained in a container DIV.

    It doesn’t get any simpler than this really: http://jquery.malsup.com/cycle/
    It may not be the type of slider you’re looking for, but it shows that the number of elements is irrelevant.

    #175577
    nixnerd
    Participant

    Well, “whatever markup is given” is a bit of a stretch cause usually, you’re bound to some rules.

    Sorry dude, that’s a tad confusing. So, the way I’ve got it now is not a <ul>, but rather a <figure>. That’s the container. Then, I have a bunch of <img> tags inside that. That will never change. That is the structure. However, images will be injected via PHP, based on what the user uploads. So, that’s the unknown.

    Here is what I’ve got so far:

    http://codepen.io/Joe_Temp/pen/peJiK

    I’m busy writing the JS now.

    #175582
    nixnerd
    Participant

    Forked it and put in some quick and dirty jQuery. Works for the most part:

    http://codepen.io/Joe_Temp/pen/ALxob

    #175584
    nixnerd
    Participant

    The only thing I don’t like is the fact that if the slider is on the first or last image, things get sketchy. If it’s on the first photo and you hit the previous button (left side of the photo), it goes to the black red screen. If it’s on the last photo and you hit next (right side of the photo), it goes nowhere but performs i++, so now it takes two clicks of previous to get to photo #2.

    I need a way to handle those little bugs but I don’t have an array to compare i to. Is there a way to construct an array from divs of the same type?

    #175591
    nixnerd
    Participant

    Solved. Thanks for your help @Senff.

    #175592
    Senff
    Participant

    Ok but now I’m the one who’s confused. Are you looking for a slider that you can integrate into your existing page, or are you trying to create one yourself?

    With the slider that I just linked above, that one can work with your markup, but like I said, I’m not sure if that’s the type of slider you’re looking).

    #175608
    nixnerd
    Participant

    Ok but now I’m the one who’s confused. Are you looking for a slider that you can integrate into your existing page, or are you trying to create one yourself?

    My first goal is always to find the perfect tool floating around somewhere in the wild. Since I couldn’t find that, I deferred to plan B: build it.

    I want a really simple slider that has good, intuitive and mobile friendly UI. I.e. LARGE tap targets and really fast and elegant. It also needs to be completely responsive and semantic. The last Codepen I posted isn’t perfect… but it’s CLOSE.

    #175626
    nixnerd
    Participant

    You are the man!

    Sometimes I feel like I need to flesh out an idea with jQuery before I can build it in vanilla JS. Quite frankly, I’m not that awesome at vanilla JS… I don’t “think in it” yet.

    Anyway, thanks! This will give me a head start should I decide to ditch jQuery. HOWEVER… I may need it for another portion of this project… so I may as well keep it.

    I can’t seem to get the embed working, haha. The link is there though.

    It’s a little touchy. You don’t actually embed it the proper way. Just grab the link and past it in. Works for me. Also, it is the same for YouTube, SoundCloud (see above), and Vimeo.

    #175685
    nixnerd
    Participant

    Ohhh, I see. You created a variable for the current image and handle it that way. But what is the nextImg.length business? What is going on there?

    While, this is actually a few more lines of code, I think it’s more CONCEPTUALLY concise. Please explain. Thanks!

    Edit: Clarity.

    #175694
    nixnerd
    Participant

    So, you’re basically saying… if nextImg has any length at all… it’s not null. Therefore, give us that image. Right?

    Seems a little counterintuitive and verbose though. I feel like it should be:

    if (nextImg) {
        // Do something here...
    }
    

    instead of:

    if (nextImg.length) {
        // Do something here...
    }
    

    What I mean is, if nextImg exists… it’s obviously true. But, alas, how does one check that without a practical tool like length? The simpler way would just involve more abstraction.

    Will you leave this pen up for a bit?

    #175696
    nixnerd
    Participant

    Hey BTW @JacobPeters, is that an MP5 you’re shooting?

    #175707
    nixnerd
    Participant

    No, that’s Alison Mosshart in a music video for The Dead Weather . I haven’t gotten around to changing my gravatar from a while back, haha. It is an MP5 though. Good eye.

    Ha ha. My bad. The photo is so dark it just looks like a person with long hair going nuts with that gun in a desert.

    Also, I updated the vanilla javascript fork to be almost the same as the jQuery fork. It’s just missing the progress bar.

    It feels a hair faster. Is that my imagination?

Viewing 15 posts - 1 through 15 (of 18 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.