jquery carousel with hover?
Page 1 of 1
dingo_d
VIP Member



Posts: 14555

PostPosted: 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
PumpAction
[Schmadmin]



Posts: 26759

PostPosted: 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?


=> NFOrce GIF plugin <= - Ryzen 3800X, 16GB DDR4-3200, Sapphire 5700XT Pulse
Back to top
dingo_d
VIP Member



Posts: 14555

PostPosted: Wed, 29th May 2013 13:57    Post subject:
Or in my case red or any other color like in the image Smile


"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
PumpAction
[Schmadmin]



Posts: 26759

PostPosted: 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 Laughing

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 Smile


=> NFOrce GIF plugin <= - Ryzen 3800X, 16GB DDR4-3200, Sapphire 5700XT Pulse
Back to top
dingo_d
VIP Member



Posts: 14555

PostPosted: Wed, 29th May 2013 15:37    Post subject:
Ok I'll try this Smile 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
PumpAction
[Schmadmin]



Posts: 26759

PostPosted: 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 Very Happy

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.


=> NFOrce GIF plugin <= - Ryzen 3800X, 16GB DDR4-3200, Sapphire 5700XT Pulse
Back to top
PumpAction
[Schmadmin]



Posts: 26759

PostPosted: 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 Smile


=> NFOrce GIF plugin <= - Ryzen 3800X, 16GB DDR4-3200, Sapphire 5700XT Pulse
Back to top
PumpAction
[Schmadmin]



Posts: 26759

PostPosted: 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/


=> NFOrce GIF plugin <= - Ryzen 3800X, 16GB DDR4-3200, Sapphire 5700XT Pulse
Back to top
PumpAction
[Schmadmin]



Posts: 26759

PostPosted: Wed, 29th May 2013 20:45    Post subject:
So have you been able to implement it?


=> NFOrce GIF plugin <= - Ryzen 3800X, 16GB DDR4-3200, Sapphire 5700XT Pulse
Back to top
PumpAction
[Schmadmin]



Posts: 26759

PostPosted: Thu, 30th May 2013 03:25    Post subject:
http://pumpaction.prestige-gaming.net/3d2/

How about something like this? Comes with minimal JS Smile
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.


=> NFOrce GIF plugin <= - Ryzen 3800X, 16GB DDR4-3200, Sapphire 5700XT Pulse
Back to top
dingo_d
VIP Member



Posts: 14555

PostPosted: 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 Very Happy

I still need to code my site from scratch, but since there are few elements, that won't be a problem Smile

Thank you for helping out, as always Smile)


"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
NFOHump.com Forum Index - Programmers Corner
Signature/Avatar nuking: none (can be changed in your profile)  


Display posts from previous:   

Jump to:  
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