Tema: Configurar tamaño de div en jquery
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 16/04/2015, 17:01
Avatar de satjaen
satjaen
 
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 11 años, 8 meses
Puntos: 10
Respuesta: Configurar tamaño de div en jquery
Y este el index:

index.html

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  5.     <!--
  6.         Supersized - Fullscreen Slideshow jQuery Plugin
  7.         Version : 3.2.7
  8.         Site    : www.buildinternet.com/project/supersized
  9.         
  10.         Author  : Sam Dunn
  11.         Company : One Mighty Roar (www.onemightyroar.com)
  12.         License : MIT License / GPL License
  13.     -->
  14.  
  15.     <head>
  16.  
  17.         <title>Supersized - Full Screen Background Slideshow jQuery Plugin</title>
  18.         <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  19.         
  20.         <link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
  21.         <link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen" />
  22.         
  23.         <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  24.         <script type="text/javascript" src="js/jquery.easing.min.js"></script>
  25.         
  26.         <script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
  27.         <script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
  28.         
  29.         <script type="text/javascript">
  30.             
  31.             jQuery(function($){
  32.                 
  33.                 $.supersized({
  34.                 
  35.                     // Functionality
  36.                     slide_interval          :   3000,   // Length between transitions
  37.                     transition              :   3,  
  38.                         // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
  39.                     transition_speed        :   700,
  40.                     
  41.                         // Speed of transition
  42.                                            
  43.                     // Components                           
  44.                         slide_links             :   'blank',// Individual links for each slide (Options: false, 'num', 'name', 'blank')
  45.                     slides                  :   [           // Slideshow Images
  46.                                                         {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
  47.                                                         {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},  
  48.                                                         {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
  49.                                                         {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
  50.                                                         {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
  51.                                                         {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
  52.                                                         {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
  53.                                                         {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
  54.                                                         {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'}
  55.                                                 ]
  56.                                     
  57.                     
  58.                 });
  59.             });
  60.             
  61.         </script>
  62.         
  63.     </head>
  64.     
  65.     <style type="text/css">
  66.         ul#demo-block{ margin:0 15px 15px 15px; }
  67.             ul#demo-block li{ margin:0 0 10px 0; padding:10px; display:inline; float:left; clear:both; color:#aaa; background:url('img/bg-black.png'); font:11px Helvetica, Arial, sans-serif;}
  68.             ul#demo-block li a{ color:#eee; font-weight:bold; }
  69.     </style>
  70.  
  71. <body>
  72.     
  73.     <!--Demo styles (you can delete this block)-------------------------------------------------------------------------------->    
  74.     <ul id="demo-block">
  75.         <li><a href="http://buildinternet.com/project/supersized/" target="_blank"><img src="img/supersized-logo.png"/></a></li>
  76.         <li>Photographers: <a href="http://cargocollective.com/mariakazvan" target="_blank">Maria Kazvan</a>, <a href="http://colindub.com" target="_blank">Colin Wojno</a>, &amp; <a href="http://brookeshaden.com/" target="_blank">Brooke Shaden</a></li>
  77.     </ul>
  78.     
  79.     <!--End of styles--->
  80.  
  81.     <!--Thumbnail Navigation-->
  82.     <div id="prevthumb" ></div>
  83.     <div id="nextthumb" ></div>
  84.     
  85.     <!--Arrow Navigation-->
  86.     <a id="prevslide" class="load-item"></a>
  87.     <a id="nextslide" class="load-item"></a>
  88.     
  89.     
  90.     <div id="thumb-tray" class="load-item">
  91.         <div id="thumb-back"></div>
  92.         <div id="thumb-forward"></div>
  93.     </div>
  94.     <!--Time Bar-->
  95.     <div id="progress-back" class="load-item">
  96.         <div id="progress-bar"></div>
  97.     </div>
  98.     
  99.     
  100.     <!--Control Bar-->
  101.     <div id="controls-wrapper" class="load-item">
  102.         <div id="controls">
  103.             
  104.             <a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>
  105.         
  106.             <!--Slide counter-->
  107.             <div id="slidecounter">
  108.                 <span class="slidenumber"></span> / <span class="totalslides"></span>
  109.             </div>
  110.             
  111.             <!--Slide captions displayed here-->
  112.             <div id="slidecaption"></div>
  113.             
  114.             <!--Thumb Tray button-->
  115.             <a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/></a>
  116.             
  117.             <!--Navigation-->
  118.             <ul id="slide-list"></ul>
  119.             
  120.         </div>
  121.     </div>  
  122. <!--Demo styles (you can delete this block)--------------------------------------------------------------------------------------->
  123.  
  124. </body>
  125. </html>