deon7388
asked on
Cascading Divs Like Windows jQuery
Hi guys,
I am attempting to scroll through cascaded divs exactly like you can for windows on a PC (I believe a Mac too). I am looking for a jQuery library/plugin that can do this in order to substitute for another library. I'm pretty sure that I have an idea to create the look of it with only divs, but the library I'm using for other effects makes it difficult to combine. I am using Swiper by iDangerous.
If a library/plugin does not exist, and if you have time to look at the link provided, could you steer me in a good direction to incorporate this using Javascript with the Swiper plugin? Basically, I need to make the slides cascade.
Thanks in advance!
I am attempting to scroll through cascaded divs exactly like you can for windows on a PC (I believe a Mac too). I am looking for a jQuery library/plugin that can do this in order to substitute for another library. I'm pretty sure that I have an idea to create the look of it with only divs, but the library I'm using for other effects makes it difficult to combine. I am using Swiper by iDangerous.
If a library/plugin does not exist, and if you have time to look at the link provided, could you steer me in a good direction to incorporate this using Javascript with the Swiper plugin? Basically, I need to make the slides cascade.
Thanks in advance!
ASKER
Thanks for the fast reply! Not exactly. You know how you can cascade all open windows on Windows 7 (right-click on taskbar, click 'Cascade Windows')? Well I want to do that with my sliding divs and be able to scroll through them diagonally on the z-axis instead of only horizontally and vertically. It is very difficult to find through my research.
Understand the stacking part.
So you want to scroll through them so the one at the front moves to the back and so or vice versa?
I do remember seeing a plugin for this, will see if I can find it.
So you want to scroll through them so the one at the front moves to the back and so or vice versa?
I do remember seeing a plugin for this, will see if I can find it.
Something like this
http://tympanus.net/Tutorials/PhotoStack/
Click one of the boxes and you will get the photos, then click on the photos.
http://tympanus.net/Tutorials/PhotoStack/
Click one of the boxes and you will get the photos, then click on the photos.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Getting closer. Based on the second link you gave, take a look at this one: http://www.bkosborne.com/jquery-waterwheel-carousel
Imagine taking the left side of that carousel, and making the pictures move forward instead of in a circle. Same functionality with the clicks, but making them go from left to right and then loop.
And again, thank you so much for helping me. Talking this out is really helping.
Imagine taking the left side of that carousel, and making the pictures move forward instead of in a circle. Same functionality with the clicks, but making them go from left to right and then loop.
And again, thank you so much for helping me. Talking this out is really helping.
Not sure what you mean by move forward instead of in a circle
You can amend the container so it will not look like they are going in a circle and amend the position.
You can amend the container so it will not look like they are going in a circle and amend the position.
ASKER
Sorry for the confusion. Here's the scenario:
I'm looking to have my divs shown exactly like the left side of the carousel (the cutting board picture, the lake, the trees, and the northern lights).
--completely ignore the right side--
With that orientation/positioning, when I scroll to the next picture, I want the 1st picture to now become last (looping), and the rest will appear to move diagonally (up and right), but it may be technically to the right.
I'm looking to have my divs shown exactly like the left side of the carousel (the cutting board picture, the lake, the trees, and the northern lights).
--completely ignore the right side--
With that orientation/positioning, when I scroll to the next picture, I want the 1st picture to now become last (looping), and the rest will appear to move diagonally (up and right), but it may be technically to the right.
ASKER
Now that I look at the waterwheel more, I may be able to use that as well, unless you have something better for what I'm trying to obtain.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Oh wow, that simple? Great! One more thing (simple to explain this time lol)...are you aware if it's possible to add a touch functionality where I can slide the carousel with the mouse, instead of clicking a button to move it?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks, you've been a big help!!!
ASKER
These comments allowed me to see what possibilities existed in order to formulate a solution. Also, the expert when above and beyond to provide examples and help.
Cheers
Are you looking for a simple touch slider like this
http://touchslider.com/
I don't think you get much simpler than this.