• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 678
  • Last Modified:

jquery css masked slideshow

Hello Experts,

I am trying to create a simple slideshow using jquery and css.
Please see the image attached.

Each image i will cut into 4 columns and 3 rows as in the example attached image.
what i want to do is reveal each image columns and rows randomly e.g. 2nd row 2nd column will appear first then .... until the entire photo is visible then do the same for the next image.

If you can show me an example online or suggest a solution i will appropriate any help.
mask.jpg
0
Refael
Asked:
Refael
  • 6
  • 5
  • 2
1 Solution
 
Kyle HamiltonData ScientistCommented:
here are acouple. im not sure how they rate in terms of performance. but ive seen lots of people use WOW slider...

http://wowslider.com/

http://workshop.rs/projects/jqfancytransitions/
0
 
RefaelAuthor Commented:
Hi kozaiwaniec

These does not have anything to do with what i want to achieve :-)
i might just need to write a jquery script to do what i am after which should be very simple.
i was hopping you can show me an example online or you can suggest.
0
 
Tom BeckCommented:
How about this? I created an example on jsfiddle.

http://jsfiddle.net/tommyBoy/ZHGYN/
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Kyle HamiltonData ScientistCommented:
EDIT: not really sure what the question is  - sorry.
0
 
RefaelAuthor Commented:
Hello tommyBoy :-)
That's actually a good example. yet again this is a slideshow so there are more photos (not just one). and i am trying to have few transitions like fade in, reveal and etc... per slice of a photo. Thanks.
0
 
Tom BeckCommented:
Do you need help with that?
0
 
RefaelAuthor Commented:
Hi tommyBoy
Yes, i do? because i have no idea to the path i should start...
Thanks.
0
 
Tom BeckCommented:
Here's a quick update to the fiddle I posted earlier. It now uses multiple images and has backwards and forwards buttons. I'll try to add more to it (like transitions and auto play) when I get a break today.

http://jsfiddle.net/tommyBoy/ZHGYN/4/
0
 
RefaelAuthor Commented:
Hi tommyBoy

Wow that's what i was basically looking for. Can it start slide automatically (without the navigation)? And last question.... is it possible to define different transitions per slide?
I am sorry if i sound greedy. That's really wonderful and a great help for me! Thank you.
0
 
Tom BeckCommented:
Here's another version, auto-play, with some fadeIn/fadeOut transitions added.

http://jsfiddle.net/tommyBoy/xHNTQ/1/

While it may be possible to define different transitions for each slide or for each slice, I think the resulting slideshow would be erratic performance wise and too confusing aesthetically.

That being said, there are two other ideas that I think WOULD be cool to try:

1.) Rather than randomizing the order in which image slices appear, you could define patterns and switch between them for each slide. Example: One pattern would fade in the four corners, then the four sides, then the center. The next pattern would fade in the left column of slices and progress through to the right column. The next pattern could start in the center and spiral out, fading in tiles as it goes.

2.) Use each full image as a sprite and use background-position to load each of the tiles with a copy of the sprite which is then positioned so that you had a complete image when all 12 tiles were filled. This is quite different from what I have done so far and would allow for "reveal" type transitions on a per tile basis. This method would eliminate the white screen that appears now between images.

If I get some more free time I may try these ideas.

BTW, I'm intrigued by the concept of using tiles to assemble complete images as a slideshow effect. That's what is holding my interest here. I'm well ahead of my monthly requirement for EE points. If this were a question about some prepackaged jquery slideshow plugin that someone wanted to tweak, I would have lost interest long ago. And one more caveat: I'm not a jquery expert. The jquery experts on this forum would probably laugh at my simplistic coding style. When you get your final page put together, you might want to post a new question in the jquery category and ask if anyone can improve on the code and make it more efficient.
0
 
RefaelAuthor Commented:
Hi tommyBoy,

You wrote: "I'm not a jquery expert".... I think you are an expert!
I thank you so much for your effort, time and getting deep into the idea/solution.
Your solution is excellent i like it very much.

Many thanks!
0
 
Tom BeckCommented:
Thanks so much for the points and the kind words. I am still hoping to work on the two ideas I mentioned earlier. Would you like to see the results (if any)?
0
 
RefaelAuthor Commented:
Hi tommyBoy

:-) of course. would be awesome!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 6
  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now