4 Replies - 9156 Views - Last Post: 13 October 2013 - 06:48 PM

#1 alaslipknot  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 28
  • Joined: 08-November 12

[HTML5-CSS3] Scrolling image gallery

Posted 13 October 2013 - 04:22 PM

Hello everyone,
A friend of mine asked me to make him an image gallery where there is a scrolling bar that contain a certain number of images, itís a pretty basic thing but i have no idea where to start making it and what should i use to have such a thing, i spend the last week reading about HTML5 and CSS3 and actually am really amazed about the idea of making a HTML skeleton then make it incredibly beautiful with CSS (itís art !! ) i would appreciate all sort of help and guidance, and here is a reference on how the website should looks like :
Posted Image
thank you very much

i don't know why the image didn't show, here is the link
image

Is This A Good Question/Topic? 0
  • +

Replies To: [HTML5-CSS3] Scrolling image gallery

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4334
  • View blog
  • Posts: 12,128
  • Joined: 18-April 07

Re: [HTML5-CSS3] Scrolling image gallery

Posted 13 October 2013 - 04:52 PM

I describe how to do this on my blog. I have included the link below. I show how these work, provide some images to explain what I am talking about and even have an attached jsFiddle with a demo you can play with.

http://www.coderslex...-and-scrollers/

Enjoy! :)

P.S. You can also achieve this using CSS3 animations and transitions. Nice little example... http://css3.bradshaw...es.com/sliding/

This post has been edited by Martyr2: 13 October 2013 - 04:54 PM

Was This Post Helpful? 0
  • +
  • -

#3 alaslipknot  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 28
  • Joined: 08-November 12

Re: [HTML5-CSS3] Scrolling image gallery

Posted 13 October 2013 - 05:04 PM

View PostMartyr2, on 13 October 2013 - 04:52 PM, said:

I describe how to do this on my blog. I have included the link below. I show how these work, provide some images to explain what I am talking about and even have an attached jsFiddle with a demo you can play with.

http://www.coderslex...-and-scrollers/

Enjoy! :)/>

Thank you for replying, that's a very informative article but i've already managed to do that with HTML5 & CSS3 only by following this tutorial
let me explain more how the website should work :

- a controllable scroll banner that go left or right (there is buttons) and loop when it reach the end
- the images on the banner are also buttons that when you click on one of them, it show the correspondent image in the middle of the page

it's a very easy concept specially if i made it with flash (take a look at the old version of the website to get a better idea)
i hope you can give me more advice on this

thank you very much
Was This Post Helpful? 0
  • +
  • -

#4 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4334
  • View blog
  • Posts: 12,128
  • Joined: 18-April 07

Re: [HTML5-CSS3] Scrolling image gallery

Posted 13 October 2013 - 05:15 PM

Uhhhh ok, then put an image tag for display and when you click an image in the scroller, set the display img tag to the source of the image you clicked. Here is a fiddle...

http://jsfiddle.net/hcErQ/


The scrolling is just a matter of manipulating the slides and when the right side of the banner goes off the left, pull it out of the list and append it to the end.

Again, go back to the source on my blog I showed you. I show you how to pull off the slide that "scrolled off" and how to put it back on the list so it can "scroll on".

This post has been edited by Martyr2: 13 October 2013 - 05:17 PM

Was This Post Helpful? 0
  • +
  • -

#5 alaslipknot  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 28
  • Joined: 08-November 12

Re: [HTML5-CSS3] Scrolling image gallery

Posted 13 October 2013 - 06:48 PM

View PostMartyr2, on 13 October 2013 - 05:15 PM, said:

Uhhhh ok, then put an image tag for display and when you click an image in the scroller, set the display img tag to the source of the image you clicked. Here is a fiddle...

http://jsfiddle.net/hcErQ/


The scrolling is just a matter of manipulating the slides and when the right side of the banner goes off the left, pull it out of the list and append it to the end.

Again, go back to the source on my blog I showed you. I show you how to pull off the slide that "scrolled off" and how to put it back on the list so it can "scroll on".


Thank you so much, i will follow these steps and keep you updated, thanks again
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1