www.webdeveloper.com
Results 1 to 6 of 6

Thread: I need help with Image Slider

  1. #1
    Join Date
    Nov 2011
    Posts
    5

    I need help with Image Slider

    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

  2. #2
    Join Date
    May 2009
    Posts
    46
    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.

  3. #3
    Join Date
    Nov 2011
    Posts
    5
    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 !

  4. #4
    Join Date
    Nov 2011
    Posts
    5
    Quote Originally Posted by ronen1m View Post
    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 !

  5. #5
    Join Date
    Nov 2011
    Posts
    5
    Quote Originally Posted by bcmann View Post
    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!
    Last edited by ronen1m; 11-03-2011 at 03:36 PM.

  6. #6
    Join Date
    Nov 2011
    Posts
    5

    SOLVED - Solution inside

    So I just added this:

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

    Thank you all !

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles