Home › Forums › JavaScript › I need a completely agnostic photo slider.
- This topic is empty.
-
AuthorPosts
-
July 16, 2014 at 8:40 am #175569nixnerdParticipant
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
July 16, 2014 at 9:07 am #175571SenffParticipantI 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.
July 16, 2014 at 9:22 am #175573nixnerdParticipantAll 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!
July 16, 2014 at 9:39 am #175575SenffParticipantWell, “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.July 16, 2014 at 9:54 am #175577nixnerdParticipantWell, “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.
July 16, 2014 at 10:38 am #175582nixnerdParticipantForked it and put in some quick and dirty jQuery. Works for the most part:
July 16, 2014 at 10:43 am #175584nixnerdParticipantThe 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?July 16, 2014 at 11:07 am #175591July 16, 2014 at 11:18 am #175592SenffParticipantOk 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).
July 16, 2014 at 2:06 pm #175608nixnerdParticipantOk 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.
July 16, 2014 at 10:18 pm #175626nixnerdParticipantYou 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.
July 17, 2014 at 9:10 am #175685nixnerdParticipantOhhh, 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.
July 17, 2014 at 10:14 am #175694nixnerdParticipantSo, 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 obviouslytrue
. 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?
July 17, 2014 at 10:21 am #175696nixnerdParticipantHey BTW @JacobPeters, is that an MP5 you’re shooting?
July 17, 2014 at 11:42 am #175707nixnerdParticipantNo, 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?
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.