[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

jquery css masked slideshow

Posted on 2012-08-17
13
Medium Priority
?
670 Views
Last Modified: 2012-08-24
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
Comment
Question by:Refael
  • 6
  • 5
  • 2
13 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38307883
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
 

Author Comment

by:Refael
ID: 38307905
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38307914
How about this? I created an example on jsfiddle.

http://jsfiddle.net/tommyBoy/ZHGYN/
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38307920
EDIT: not really sure what the question is  - sorry.
0
 

Author Comment

by:Refael
ID: 38318539
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38318996
Do you need help with that?
0
 

Author Comment

by:Refael
ID: 38320557
Hi tommyBoy
Yes, i do? because i have no idea to the path i should start...
Thanks.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38320844
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
 

Author Comment

by:Refael
ID: 38320946
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
 
LVL 38

Accepted Solution

by:
Tom Beck earned 2000 total points
ID: 38324483
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
 

Author Closing Comment

by:Refael
ID: 38324813
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38328807
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
 

Author Comment

by:Refael
ID: 38328823
Hi tommyBoy

:-) of course. would be awesome!
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month19 days, 4 hours left to enroll

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question