Cześć posiadam taki kod:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Slick jQuery Slidehow: Demo</title>
  6. <style type="text/css">
  7. <!--
  8. /** 
  9.  * Slideshow style rules.
  10.  */
  11. #slideshow {
  12. 	margin:0 auto;
  13. 	width:640px;
  14. 	height:263px;
  15. 	background:transparent url(img/bg_slideshow.jpg) no-repeat 0 0;
  16. 	position:relative;
  17. }
  18. #slideshow #slidesContainer {
  19.   margin:0 auto;
  20.   width:560px;
  21.   height:263px;
  22.   overflow:auto; /* allow scrollbar */
  23.   position:relative;
  24. }
  25. #slideshow #slidesContainer .slide {
  26.   margin:0 auto;
  27.   width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  28.   height:263px;
  29. }
  30.  
  31. /** 
  32.  * Slideshow controls style rules.
  33.  */
  34. .control {
  35.   display:block;
  36.   width:39px;
  37.   height:263px;
  38.   text-indent:-10000px;
  39.   position:absolute;
  40.   cursor: pointer;
  41. }
  42. #leftControl {
  43.   top:0;
  44.   left:0;
  45.   background:transparent url(img/control_left.jpg) no-repeat 0 0;
  46. }
  47. #rightControl {
  48.   top:0;
  49.   right:0;
  50.   background:transparent url(img/control_right.jpg) no-repeat 0 0;
  51. }
  52.  
  53. /** 
  54.  * Style rules for Demo page
  55.  */
  56. * {
  57.   margin:0;
  58.   padding:0;
  59.   font:normal 11px Verdana, Geneva, sans-serif;
  60.   color:#ccc;
  61. }
  62. a {
  63.   color: #fff;
  64.   font-weight:bold;
  65.   text-decoration:none;
  66. }
  67. a:hover {
  68.   text-decoration:underline;
  69. }
  70. body {
  71.   background:#393737 url(img/bg_body.jpg) repeat-x top left;
  72. }
  73. #pageContainer {
  74.   margin:0 auto;
  75.   width:960px;
  76. }
  77. #pageContainer h1 {
  78.   display:block;
  79.   width:960px;
  80.   height:114px;
  81.   background:transparent url(img/bg_pagecontainer_h1.jpg) no-repeat top left;
  82.   text-indent: -10000px;
  83. }
  84. .slide h2, .slide p {
  85.   margin:15px;
  86. }
  87. .slide h2 {
  88.   font:italic 24px Georgia, "Times New Roman", Times, serif;
  89.   color:#ccc;
  90.   letter-spacing:-1px;
  91. }
  92. .slide img {
  93.   float:right;
  94.   margin:0 15px;
  95. }
  96. #footer {
  97.   height:100px;
  98. }
  99. #footer p {
  100.   margin:30px auto 0 auto;
  101.   display:block;
  102.   width:560px;
  103.   height:40px;
  104. }
  105. -->
  106. </style>
  107. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  108. <script type="text/javascript">
  109. $(document).ready(function(){
  110.   var currentPosition = 0;
  111.   var slideWidth = 560;
  112.   var slides = $('.slide');
  113.   var numberOfSlides = slides.length;
  114.  
  115.   // Remove scrollbar in JS
  116.   $('#slidesContainer').css('overflow', 'hidden');
  117.  
  118.   // Wrap all .slides with #slideInner div
  119.   slides
  120.     .wrapAll('<div id="slideInner"></div>')
  121.     // Float left to display horizontally, readjust .slides width
  122. 	.css({
  123.       'float' : 'left',
  124.       'width' : slideWidth
  125.     });
  126.  
  127.   // Set #slideInner width equal to total width of all slides
  128.   $('#slideInner').css('width', slideWidth * numberOfSlides);
  129.  
  130.   // Insert controls in the DOM
  131.   $('#slideshow')
  132.     .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
  133.     .append('<span class="control" id="rightControl">Clicking moves right</span>');
  134.  
  135.   // Hide left arrow control on first load
  136.   manageControls(currentPosition);
  137.  
  138.   // Create event listeners for .controls clicks
  139.   $('.control')
  140.     .bind('click', function(){
  141.     // Determine new position
  142. 	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
  143.  
  144. 	// Hide / show controls
  145.     manageControls(currentPosition);
  146.     // Move slideInner using margin-left
  147.     $('#slideInner').animate({
  148.       'marginLeft' : slideWidth*(-currentPosition)
  149.     });
  150.   });
  151.  
  152.   // manageControls: Hides and Shows controls depending on currentPosition
  153.   function manageControls(position){
  154.     // Hide left arrow if position is first slide
  155. 	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
  156. 	// Hide right arrow if position is last slide
  157.     if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  158.   }	
  159. });
  160. </script>
  161. </head>
  162. <body>
  163. <div id="pageContainer">
  164.   <h1><a href="http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/">Slick Slideshow using jQuery</a></h1>
  165.   <!-- Slideshow HTML -->
  166.   <div id="slideshow">
  167.     <div id="slidesContainer">
  168.       <div class="slide">
  169.         <h2>Web Development Tutorial</h2>
  170.         <p><a href="http://sixrevisions.com/tutorials/web-development-tutorials/using-xampp-for-local-wordpress-theme-development/"><img src="img/img_slide_01.jpg" alt="An image that says Install X A M P P for wordpress." width="215" height="145" /></a>If you're into developing web apps, you should check out the tutorial called "<a href="http://sixrevisions.com/tutorials/web-development-tutorials/using-xampp-for-local-wordpress-theme-development/">Using XAMPP for Local WordPress Theme Development</a>" which shows you how to set up a local testing server for developing PHP/Perl based applications locally on your computer. The example also shows you how to set up WordPress locally!</p>
  171.       </div>
  172.       <div class="slide">
  173.         <h2>Grunge Brushes, Anyone?</h2>
  174.         <p><a href="http://sixrevisions.com/freebies/brushes/sr-grunge-free-high-resolution-photoshop-grunge-brushes/"><img src="img/img_slide_02.jpg" width="215" height="145" alt="A thumbnail image that says S R grunge photoshop brushes 6 high resolution grunge brushes by six revisions." /></a>In this layout, I used <a href="http://sixrevisions.com/freebies/brushes/sr-grunge-free-high-resolution-photoshop-grunge-brushes/">SR Grunge</a>, which is a free set of high-resolution Photoshop brushes you can download here on Six Revisions.</p>
  175.         <p> 
  176.       </div>
  177.       <div class="slide">
  178.         <h2>How About Some Awesome Grunge Textures?</h2>
  179.         <p><a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/"><img src="img/img_slide_03.jpg" width="215" height="145" alt="A thumbnail image that says grunge extreme 15 free high resolution grunge textures six revisions." /></a>The texture used in this web page is from the Grunge Extreme Textures freebie set by JC Parmley released here on Six Revisions.</p>
  180.         <p>You can head over to the <a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/">Grunge Extreme</a> page to download the texture set or check out Six Revisions' <a href="http://sixrevisions.com/category/freebies/">freebie section</a> for even more goodies!</p>
  181.       </div>
  182.       <div class="slide">
  183.         <h2>'Tis the End, My Friend.</h2>
  184.         <p><a href="http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/"><img src="img/img_slide_04.jpg" width="215" height="145" alt="Thumbnail image that says sleek button using photoshop that links to a Photoshop tutoril." /></a>This is the last slide. Hit the left arrow control to go back to the other slides.</p>
  185.         <p>Alternatively, you may want to check out the tutorial on how to create a simple and cool button in Photoshop called &quot;<a href="http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/">How to Create a Slick and Clean Button in Photoshop</a>&quot; which was inspired by the <a href="http://www.campaignmonitor.com/designer/?utm_source=sixrevisions&amp;utm_medium=banner&amp;utm_term=2&amp;utm_content=0003&amp;utm_campaign=Apr09Banners">Campaign Monitor</a> web interface.</p>
  186.       </div>
  187.     </div>
  188.   </div>
  189.   <!-- Slideshow HTML -->
  190.   <div id="footer">
  191.     <p><a href="#">Create a Slick and Accessible Slideshow Using  jQuery by Jacob Gube</a> (<a href="http://sixrevisions.com/">Six Revisions</a>)</p>
  192.   </div>
  193. </div>
  194. </body>
  195. </html>
[HTML] pobierz, plaintext


To nie jest mój skrypt! Próbowałem na różne sposoby zmienić rozmiar tego okienka... i mi się to nie udało, albo się psuło, albo nic nie działało:)

Tutaj jest temat źródłowy Silder

Docelowe wymiary to: 800x600px


Proszę o pomoc! ;]