Advanced Search

cycle 100% centered images

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <div id="topImages">
  2.  
  3. 	<div class="slide-img"><img src="/images/home1.jpg" width="2298" height="438" /></div>
  4.     <div class="slide-img"><img src="/images/home2.jpg" width="2298" height="438" /></div>
  5.  
  6. </div>
  7.  
  8.  
  9. <script type="text/javascript">
  10.  
  11. $(document).ready(function() {
  12.  
  13. 	$('#topImages').cycle({
  14. 		fx:'fade',
  15. 		sync: 1,
  16. 		speed:1000,
  17. 		timeout: 3000
  18. 	});
  19.  
  20. });
  21.  
  22. $(window).resize(function(){
  23.  
  24. function centerImages(){
  25.       var imgW=2298;
  26.       var mainW= $('#topImages').width();
  27.  
  28.       var margL=0-(imgW-mainW)/2;
  29.       $('.slide-img img').css('marginLeft',margL);
  30. }
  31.  
  32. centerImages();
  33.  
  34. });
  35.  
  36. $(window).resize();
  37.  
  38.  
  39. </script>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.