I need help with Image Slider

**ronen1m** · 11-02-2011 03:36 PM

Hi,

I'm very (VERY) new with JS.
I want to create this slider:
http://www.guyprives.com/gallery
(just below the logo... where the pics expand).

How do I do that?
Can you direct me to a chapter/website/manule/something that I can read about how to do that???

Thank you !!!
Ronen

**bcmann** · 11-02-2011 04:00 PM

This site is using a JQuery Plugin called "Kwicks Slider". Here's a link to the developer's site:
http://www.jeremymartin.name/project...project=kwicks

And here's another demo with some different settings:
http://themesmania.com/demo/creative/kwicks-slider

If you get stuck on the code, post what you've got and I'll help troubleshoot.

**ronen1m** · 11-03-2011 11:39 AM

Hi,

Thank you so much for your reply !

As for the demo from TheMesmania, this is EXACTLY what I want...

Thank you !
Now I need to understand how to do it...

So I d/l the code... I thought it will be easier

Nothing that I do in the CSS changes the html... do I need to recomplie?!

Am I missing something? it is more basic than this..?

Thanks again !

**ronen1m** · 11-03-2011 12:43 PM

Originally Posted by ronen1m

Hi,

Thank you so much for your reply !

As for the demo from TheMesmania, this is EXACTLY what I want...

Thank you !
Now I need to understand how to do it...

So I d/l the code... I thought it will be easier

Nothing that I do in the CSS changes the html... do I need to recomplie?!

Am I missing something? it is more basic than this..?

Thanks again !

But... I found many 'create-yourself-Kwicks' so I guess that is what I wanted

Thanks again !

**ronen1m** · 11-03-2011 02:06 PM

Originally Posted by bcmann

This site is using a JQuery Plugin called "Kwicks If you get stuck on the code, post what you've got and I'll help troubleshoot.

Ok,
Now I need your help...

I created my own according to this:
http://banhawi.com/2009/06/create-yo...jquery-effect/

But I'm having the problem that they are talking about it in the comments.
I have this animation queueing, like when I'm going on all of them they are expanding one by one even if my mouse is no longer on the image...
Don't know how to solve it...

Any idea?

This is my code (simple...)

Code:

<html>     
	<head>     
		<link rel="stylesheet" type="text/css" href="main.css" />
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script type="text/javascript">
			$(document).ready(function()
			{     
				$("li").mouseover(function()
				{         
				    $(this).removeClass("inactive");         
				    $(this).addClass("active");
				    $("li.active").animate({ width: "500px"}, 300 );         
				    $("li.inactive").animate({ width: "100px"}, 300 );     
				}); 
				
				$("li").mouseout(function()
				{     							
					$(this).removeClass("active");     
					$(this).addClass("inactive");     
					$("li").animate({ width: "100px"}, 200 ); 
				}); 
				
				
				
			}); 						

		 </script>
		<title>JS Effect</title>     
	</head>     
<body>         
	<ul>             
		<li class="inactive"><a href="#"><img src="Image01.jpg" alt=""/></a></li>             
		<li class="inactive"><a href="#"><img src="Image02.jpg" alt=""/></a></li>             
		<li class="inactive"><a href="#"><img src="Image03.jpg" alt=""/></a></li>            
		<li class="inactive"><a href="#"><img src="Image04.jpg" alt=""/></a></li>         
		<li class="inactive"><a href="#"><img src="Image05.jpg" alt=""/></a></li>         
	 </ul>   
	  
</body> 
</html>

You can see the example here:
www.ronenmymon.com/Kwicks/main.htm

Thanks!

**ronen1m** · 11-03-2011 03:15 PM

So I just added this:

Code:

$("li.active").animate({ width: "700px"}, {queue:false, duration:300 });

Was simple..

Thank you all !

Thread: I need help with Image Slider

Thread Tools

Display

I need help with Image Slider

SOLVED - Solution inside

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions