|
|
| Page 1 of 1 |
|
|
 Posted: Wed, 29th May 2013 13:23 Post subject: jquery carousel with hover? |
|
 |
So I'm in the process of redoing the portfolio, the last one sucked, and now I have a different idea how to do it (minimal).
But I'd like to have a carousel on the page, that when you hover your mouse on it will make the black (or color) transition and the text shows on it, and you can click on the image, and it will lead you to the gallery with work on it.
Now this is what I want it to look like
And I found these:
http://www.angelomazzilli.com/minimalCarousel/white/index.html
Basically what I need, but with text on it, and bigger images. I think this one is not free :\
I also found these cool effects:
http://codecanyon.net/item/picanim-jquery-image-hover-effect-pulgin/full_screen_preview/2835834
Do you guys have any free solution to what I need? That can be easily implemented on web page?
First, I thought I'd work in joomla, but I'm giving up on that, since stuff isn't behaving how I'd like to behave :\
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 29th May 2013 13:26 Post subject: |
|
|
ok so when you move your mouse over an image it goes black and a text appears?
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 29th May 2013 13:57 Post subject: |
|
|
Or in my case red or any other color like in the image 
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 29th May 2013 14:23 Post subject: |
|
|
ok so what I have here is a self written jquery/jquerymobile based swipe plugin. It is really easy to use, but I made it some time ago, so I'd have to add the hover/color/text stuff to it, which wouldn't take much time.
This thing was never finished and maybe I think that I could improve it in almost all aspects, but why don't you just try it and see if it fits your needs?
Edit: Ehhh, entered my password wrong to often, so I have to wait until I can upload it 
In the meantime, here is what you'd need to use my plugin:
Let's say that you want to have 5 images in there:
| Code: | <div id="myswipe">
<img src="image1.png" /><img src="bla.png" /><a href="http://www.google.com"><img src="GoogleLogo.png" /></a><img src="piggy.png" /><img src="miggy.png" />
</div> |
Well and then you need to have some javascript:
<script>
$('#myswipe').fswipe();
</script>
... That's basically it
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 29th May 2013 15:37 Post subject: |
|
|
Ok I'll try this Thanks Pumpy ^^
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 29th May 2013 15:37 Post subject: |
|
|
http://pumpaction.prestige-gaming.net/swipedemo
I already applied your hover shizzles in the mean time with pure CSS so no changes to my plugin done. It changes the markup a little bit and you need this extra css on your page:
| Code: |
.fswipe > ul > li{
position: relative;
}
div.descriptor {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #000;
color: #fff;
opacity: 0;
transition: all 300ms;
}
div.descriptor>span{
position: absolute;
display:block;
top: 50%;
margin-top: -.5em;
width: 100%;
text-align: center;
}
div.descriptor:hover { opacity: 1; }
|
and the elements need to look like this:
| Code: | | <div><img src="piggy.gif"/><div class="descriptor"><span>Text</span></div></div> |
So in the span inside the descriptor you just put your text. preferably one line or else I need to use my brain again 
You can of course change opacity to .5 on hover, so that the image is still visible or change the background color and whatever you want on there.
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 29th May 2013 15:40 Post subject: |
|
|
Additional info: It uses 3D acceleration on supported browsers (f.e. webkit) and thus this also runs very smooth on ipad/iphone and android. You can actually emulate touch events with chrome -> F12 then go to the bottom right gear, click and scroll down and enable "emulate touch events". You'll then be able to use your mouse as finger and just click and swipe so that the images will move then too
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 29th May 2013 15:45 Post subject: |
|
|
I just looked closer at your image, you might want something more like this:
| Code: | div.descriptor {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: #fff;
opacity: 0;
transition: all 300ms;
}
div.descriptor>span{
position: absolute;
background: #000;
display:block;
top: 80%;
width: 100%;
height: 20%;
text-align: center;
}
div.descriptor:hover {
opacity: .8;
} |
Here the updated version:
http://pumpaction.prestige-gaming.net/swipedemo2/
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 29th May 2013 20:45 Post subject: |
|
|
So have you been able to implement it?
|
|
| Back to top |
|
|
|
|
| Posted: Thu, 30th May 2013 03:25 Post subject: |
|
|
http://pumpaction.prestige-gaming.net/3d2/
How about something like this? Comes with minimal JS
Clicking on the title above the imagecards should remove an existing one and slide one in from the right. Basically just to give you a hint how the animation system could look like.
|
|
| Back to top |
|
|
|
|
| Posted: Thu, 30th May 2013 09:10 Post subject: |
|
|
Wow!
I was out for the most part yesterday so I didn't look at it. But I'll give it a go
I still need to code my site from scratch, but since there are few elements, that won't be a problem
Thank you for helping out, as always )
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
| Page 1 of 1 |
All times are GMT + 1 Hour |
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
Powered by phpBB 2.0.8 © 2001, 2002 phpBB Group
|
|
 |
|
