Simple image gallery slider

[Black Mamba]

Hi,

I was using Takashi Okamoto’s ImageShiftGallery and it was working beautifully.

Unfortunately it uses prototype.js which is causing several issues… the bottom line being that I can no longer use prototype.js

Can somebody recommend me a simple (as cross-browser compatible as possible) jQuery slider that does not need prototype.js?

Something as simple as this

Thanks!

[Black Mamba]

In theory I guess most of them (at least those who don’t use prototype.js) could work.

The thing is that they’re too fancy for my needs. In other words, I don’t have the expertise to then customize them.

I don’t need those little circles used to navigate the slides, numbered tabs, left and right arrows, and so on…

I’ve googled and 99% of what I’ve found was just like that…

I’m looking for a stripped down version with simple back / forward links, that I can then customize myself.

Thanks anyway.

[Black Mamba]

If I’m not able to customize one of the most fancy ones, how am I gonna be able to write one from scratch? I can’t…

[Black Mamba]

I’ve found this JSFiddle which is pretty much what I was looking for except that the transition is fading in and I need it to slide in right to left.

Does anybody know to change that?

[Black Mamba]

Yes, that’s it!!!

It’s using CSS transitions which only work from IE10 onwards, right?
Am I alienating a lot of people, using that?
Is there some sort of fix people with IE8/9?

Also, I’ve changed the sliders for real images and it’s creating a vertical scroll bar… See here

I’ve played around with the css (width and height are set to the image size, 960x480px), but could not get rid of it… can you have a look?

Thanks a lot for your help!

[Black Mamba]

The 1st fiddle wasn’t working, but I’ve managed to find out what was causing the scroll bar and fixed it. It was ’cause we’re using overflow-x: hidden. I removed the x coordinate and the scroll bar is gone.

The 2nd fiddle unfortunately didn’t solve the IE8/9 issue.
It works fine with updated versions of Safari (Mac), Chrome (Win), Firefox (Win) and IE11, but still doesn’t with IE8. :(

Any other Idea?

[Black Mamba]

Do you think that would make it work with IE8/9?
Why do you say you’re “not sure if that’s an ideal suggestion”?
If that’s not asking to much please do it…

Either way, you’ve been a terrific help!
Thank you so much.

[Black Mamba]

Not sure if I should create a new thread, but since the issue is related to what we where discussing, I decided to post it here.

I’ve used one of your scripts and it is causing an issue… or probably not and I’m just missing something very obvious! Either way, I’ve been banging my head against the wall for a while and just can’t figure it out myself.

Whenever you hover over the image two black bars should fade in, one at the top and another at the bottom with the navigation buttons. Everything’s okay at the bottom and the slider works, at the top however the black bar simply does not appear.

I’ve been messing around with the code for a while and just can’t figure out what wrong! Honestly nothing seems wrong…

Can you give it a look.

The page is more complex (therefore the numbering), but I’ve cleaned it up a bit. The problem still persists so nothing of what I’ve removed matters.

Code

Thanks!

[Black Mamba]

Dear god… did I not say it was probably something very obvious? How did I not see that?
Thank you so much Soronbe!

I was talking about the slider js.

BTW, you said you’d try to make the javascript change frame by frame to work in IE8/9 when you had some spare time… don’t do it, at least not yet!

The issue might not be with the js.
It might be the code (img tags) or the png files I was using.
Let me check that first…

Thanks again!

[Black Mamba]

No, I’m using HTML5.

!DOCTYPE HTML

Yeah, that’s what I was talking about. I’m simply using > not /> to close my img tags.

Thanks for the tip, I’m working primarily in Safari but I guess I can do that there as well. I’ll look into it, thanks!

[Black Mamba]

Changing the image tags and checking the png files did not work.

If you could try to make the javascript change frame by frame to work like you’ve said, I’d really appreciate it. Whenever you can, I’m in no rush.

Thanks a lot!

[Author]

Posts