Foros del Web » Programando para Internet » Jquery »

Configurar tamaño de div en jquery

 Estas en el tema de Configurar tamaño de div en jquery en el foro de Jquery en Foros del Web. Hola quería saber si se puede ajustar el tamaño de este slider: http://buildinternet.com/project/supersized/ Aqui esta el css: supersized.css @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original * ...
  #1 (permalink)  
Antiguo 16/04/2015, 16:59
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 11 años, 7 meses
Puntos: 10
Configurar tamaño de div en jquery
Hola quería saber si se puede ajustar el tamaño de este slider:
http://buildinternet.com/project/supersized/

Aqui esta el css:

supersized.css

Código CSS: 
Ver original
  1. * { margin:0; padding:0; }
  2. body { background:#111; height:100%; }
  3.     img { border:none; }
  4.     
  5.     #supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../img/progress.gif) no-repeat center center;}
  6.     
  7.     #supersized {  display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
  8.         #supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
  9.             #supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }   /*Speed*/
  10.             #supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }           /*Quality*/
  11.         
  12. #supersized li { display:block; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
  13.         #supersized a { width:100%; height:100%; display:block; }
  14.             #supersized li.prevslide { z-index:-20; }
  15.             #supersized li.activeslide { z-index:-10; }
  16.             #supersized li.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; }
  17.                 #supersized li.image-loading img{ visibility:hidden; }
  18.             #supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }



supersized.shutter.css

Código CSS: 
Ver original
  1. /* Controls Bar
  2.     ----------------------------*/
  3.     #controls-wrapper { margin:0 auto; height:42px; width:50%; bottom:0px; left:0; z-index:4; background:url(../img/nav-bg.png) repeat-x; position:fixed; }
  4.         #controls { overflow:hidden; height:50%; position:relative; text-align:left; z-index:5; }
  5.             #slidecounter { float:left; color:#999; font:14px "Helvetica Neue", Helvetica, Arial, sans-serif; text-shadow:#000 0 -1px 0; margin:0px 10px 0 15px; line-height:42px; }
  6.             #slidecaption { overflow:hidden; float:left; color:#FFF; font:400 14px "Helvetica Neue", Helvetica, Arial, sans-serif; text-shadow:#000 1px 1px 2px; margin:0 20px 0 0; line-height:42px; }
  7.             
  8.             #navigation { float:right; margin:0px 20px 0 0; }
  9.                 #play-button{ float:left; margin-top:1px;border-right:1px solid #333; background:url('../img/bg-hover.png') repeat-x 0 44px; }
  10.                     #play-button:hover{ background-position:0 1px; cursor:pointer; }
  11.                 
  12.                 #prevslide, #nextslide{ position:absolute; height:43px; width:43px; top:50%; margin-top:-21px; opacity:0.6; }
  13.                     #prevslide{ left:10px; background:url('../img/back.png'); }
  14.                     #nextslide{ right:10px; background:url('../img/forward.png'); }
  15.                         #prevslide:active, #nextslide:active{ margin-top:-19px; }
  16.                         #prevslide:hover, #nextslide:hover{ cursor:pointer; }
  17.                 
  18.                 ul#slide-list{ padding:15px 0; float:left; position:absolute; left:50%; }
  19.                     ul#slide-list li{ list-style:none; width:12px; height:12px; float:left; margin:0 5px 0 0; }
  20.                         ul#slide-list li.current-slide a, ul#slide-list li.current-slide a:hover{ background-position:0 0px; }
  21.                         ul#slide-list li a{ display:block; width:12px; height:12px; background:url('../img/nav-dot.png') no-repeat 0 -24px; }
  22.                             ul#slide-list li a:hover{ background-position:0 -12px; cursor:pointer; }
  23.                 
  24.                 #tray-button{ float:right; margin-top:1px; border-left:1px solid #333; background:url('../img/bg-hover.png') repeat-x 0 44px; }
  25.                     #tray-button:hover{ background-position:0 1px; cursor:pointer; }
  26.         
  27.     
  28.     /* Progress Bar
  29.     ----------------------------*/                  
  30.     #progress-back{ z-index:5; position:fixed; bottom:42px; left:0; height:8px; width:100%; background:url('../img/progress-back.png') repeat-x; }
  31.         #progress-bar{ position:relative; height:8px; width:100%; background:url('../img/progress-bar.png') repeat-x; }
  32.     
  33.     
  34.     /* Thumbnail Navigation
  35.     ----------------------------*/  
  36.     #nextthumb,#prevthumb { z-index:2; display:none; position:fixed; bottom:61px; height:75px; width:100px; overflow:hidden; background:#ddd; border:1px solid #fff; -webkit-box-shadow:0 0 5px #000; }
  37.         #nextthumb { right:12px; }
  38.         #prevthumb { left:12px; }
  39.             #nextthumb img, #prevthumb img { width:150px; height:auto;  }
  40.             #nextthumb:active, #prevthumb:active { bottom:59px; }
  41.             #nextthumb:hover, #prevthumb:hover { cursor:pointer; }
  42.     
  43.     
  44.     /* Thumbnail Tray
  45.     ----------------------------*/          
  46.     #thumb-tray{ position:fixed; z-index:3; bottom:0; left:0; background:url(../img/bg-black.png); height:150px; width:100%; overflow:hidden; text-align:center; -moz-box-shadow: 0px 0px 4px #000; -webkit-box-shadow: 0px 0px 4px #000; box-shadow: 0px 0px 4px #000; }
  47.         
  48.         #thumb-back, #thumb-forward{ position:absolute; z-index:5; bottom:42px; height:108px; width:40px; }
  49.             #thumb-back{ left:0; background: url('../img/thumb-back.png') no-repeat center center;}
  50.             #thumb-forward{ right:0; background:url('../img/thumb-forward.png') no-repeat center center;}
  51.                 #thumb-back:hover, #thumb-forward:hover{ cursor:pointer; background-color:rgba(256,256,256, 0.1); }
  52.                     #thumb-back:hover{ border-right:1px solid rgba(256,256,256, 0.2); }
  53.                     #thumb-forward:hover{ border-left:1px solid rgba(256,256,256, 0.2); }
  54.         
  55.         
  56.         ul#thumb-list{ display:inline-block; list-style:none; position:relative; left:0px; padding:0 0px; }
  57.             ul#thumb-list li{ background:#111; list-style:none; display:inline; width:150px; height:108px; overflow:hidden; float:left; margin:0; }
  58.                 ul#thumb-list li img { width:200px; height:auto; opacity:0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter:alpha(opacity=60); -webkit-transition: all 100ms ease-in-out; -moz-transition: all 100ms ease-in-out; -o-transition: all 100ms ease-in-out; -ms-transition: all 100ms ease-in-out; transition: all 100ms ease-in-out; }
  59.                 ul#thumb-list li.current-thumb img, ul#thumb-list li:hover img{ opacity:1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); }
  60.                 ul#thumb-list li:hover{ cursor:pointer; }



Gracias
  #2 (permalink)  
Antiguo 16/04/2015, 17:01
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 11 años, 7 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>
  #3 (permalink)  
Antiguo 17/04/2015, 01:14
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 11 años, 7 meses
Puntos: 10
Respuesta: Configurar tamaño de div en jquery
Perdonad si no me he explicado bien. Lo que quiero es por ejemplo acoplarlo a un div mas pequeño para adaptarlo a mi web.
Gracias
  #4 (permalink)  
Antiguo 17/04/2015, 09:26
(Desactivado)
  
Fecha de Ingreso: abril-2013
Ubicación: rosario
Mensajes: 248
Antigüedad: 11 años
Puntos: 17
Respuesta: Configurar tamaño de div en jquery
por lo que veo el plugin esta hecho para esa finalidad, es decir, fullscreen, si queres podes modificar el plugin y decirle que tome los valores que vos seteas en los parametros startwidth y startheight.
Por ejemplo vos lo instancias asi:
Código Javascript: 
Ver original
  1. $(function(){
  2.         $.fn.supersized.options = {  
  3.             startwidth: 750,  
  4.             startheight: 560,
  5.             minsize: .50,
  6.             slideshow: 1,
  7.             slideinterval: 5000  
  8.         };
  9.               $('#supersize').supersized(); 
  10.     });

En el plugin luego de la fila 87 pones esto
Código Javascript: 
Ver original
  1. $(this).width(options.startwidth);
  2. $(this).height(options.startheight);

En cierto modo le estas diciendo, che no me importa lo que queres hacer solo respeta los valores que yo te paso.
  #5 (permalink)  
Antiguo 17/04/2015, 12:40
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 11 años, 7 meses
Puntos: 10
Respuesta: Configurar tamaño de div en jquery
Gracias por contestar. No sé si es así como dices pero no me funciona. Y lo de la línea 87 no sé donde ponerlo.

Código HTML: 
Ver original
  1. <script type="text/javascript">
  2.                 
  3.                 
  4.              $(function(){
  5.             $.fn.supersized.options = {  
  6.             startwidth: 750,  
  7.             startheight: 560,
  8.             minsize: .50,
  9.             slideshow: 1,
  10.             slideinterval: 5000,
  11.              transition: 3, // 0-None, 1-Fade,2-Slide Top,3-Slide Right,4-Slide Bottom,5-Slide Left, 6-Carousel Right, 7-Carousel Left
  12.              transition_speed:   700,// Speed of transition// Components                            
  13.              slide_links:   'blank',// Individual links for each slide (Options: false, 'num', 'name', 'blank')
  14.              slides                     :   [           // Slideshow Images
  15.                                                         {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/'},
  16.                                                         {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/'},  
  17.                                                         {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/'},
  18.                                                         {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/'},
  19.                                                         {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/'},
  20.                                                         {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/'},
  21.                                                         {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/'},
  22.                                                         {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/'},
  23.                                                         {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/'}
  24.                                                 ]
  25.               
  26.               
  27.         };
  28.               $('#supersize').supersized();
  29.                
  30.     });
  31.                 
  32.             
  33.         </script>

Gracias y un saludo
  #6 (permalink)  
Antiguo 19/04/2015, 04:36
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 11 años, 7 meses
Puntos: 10
Respuesta: Configurar tamaño de div en jquery
He probado con estos parámetros pero no funciona:

Código HTML: 
Ver original
  1. // Size & Position                         
  2.                     min_width               :   400,            // Min width allowed (in pixels)
  3.                     min_height              :   200,            // Min height allowed (in pixels)
  4.                     vertical_center         :   1,          // Vertically center background
  5.                     horizontal_center       :   1,          // Horizontally center background
  6.                     fit_always              :   0,          // Image will never exceed browser width or height (Ignores min. dimensions)
  7.                     fit_portrait            :   1,          // Portrait images will not exceed browser height
  8.                     fit_landscape           :   0,          // Landscape images will not exceed browser width
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.                     slideshow               :   1,          // Slideshow on/off
  37.                     autoplay                :   1,          // Slideshow starts playing automatically
  38.                     start_slide             :   1,          // Start slide (0 is random)
  39.                     stop_loop               :   0,          // Pauses slideshow on last slide
  40.                     random                  :   0,          // Randomize slide order (Ignores start slide)
  41.                     slide_interval          :   4000,       // Length between transitions
  42.                     transition              :   6,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
  43.                     transition_speed        :   1000,       // Speed of transition
  44.                     new_window              :   1,          // Image links open in new window/tab
  45.                     pause_hover             :   0,          // Pause slideshow on hover
  46.                     keyboard_nav            :   1,          // Keyboard navigation on/off
  47.                     performance             :   1,          // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
  48.                     image_protect           :   1,          // Disables image dragging and right click with Javascript
  49.                                                                
  50.                     // Size & Position                         
  51.                     min_width               :   400,            // Min width allowed (in pixels)
  52.                     min_height              :   200,            // Min height allowed (in pixels)
  53.                     vertical_center         :   1,          // Vertically center background
  54.                     horizontal_center       :   1,          // Horizontally center background
  55.                     fit_always              :   0,          // Image will never exceed browser width or height (Ignores min. dimensions)
  56.                     fit_portrait            :   1,          // Portrait images will not exceed browser height
  57.                     fit_landscape           :   0,          // Landscape images will not exceed browser width
  58.                                                                
  59.                     // Components                           
  60.                     slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
  61.                     thumb_links             :   1,          // Individual thumb links for each slide
  62.                     thumbnail_navigation    :   0,          // Thumbnail navigation // Landscape images will not exceed browser width
  63.                     slides                  :   [           // Slideshow Images
  64.                                                         {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/'},
  65.                                                         {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/'},  
  66.                                                         {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/'},
  67.                                                         {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/'},
  68.                                                         {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/'},
  69.                                                         {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/'},
  70.                                                         {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/'},
  71.                                                         {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/'},
  72.                                                         {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/'}
  73.                                                 ],
  74.                                                 
  75.                                                 
  76.                                                 // Theme Options               
  77.                     progress_bar            :   1,          // Timer for each slide                         
  78.                     mouse_scrub             :   0
  79.                     
  80.                 });
  81.             });
  82.             
  83.         </script>
  84.         
  85.     </head>
  86.     
  87.     <style type="text/css">
  88.         ul#demo-block{ margin:0 15px 15px 15px; }
  89.             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;}
  90.             ul#demo-block li a{ color:#eee; font-weight:bold; }
  91.     </style>
  92.  
  93. <body>
  94.     
  95.     <!--Demo styles (you can delete this block)-------------------------------------------------------------------------------->    
  96.     <ul id="demo-block">
  97.         <li><a href="http://buildinternet.com/project/supersized/" target="_blank"><img src="img/supersized-logo.png"/></a></li>
  98.         <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>
  99.     </ul>
  100.     
  101.     <!--End of styles--->
  102.  
  103.     <!--Thumbnail Navigation-->
  104.     <div id="prevthumb" ></div>
  105.     <div id="nextthumb" ></div>
  106.     
  107.     <!--Arrow Navigation-->
  108.     <a id="prevslide" class="load-item"></a>
  109.     <a id="nextslide" class="load-item"></a>
  110.     
  111.     
  112.     <div id="thumb-tray" class="load-item">
  113.         <div id="thumb-back"></div>
  114.         <div id="thumb-forward"></div>
  115.     </div>
  116.     <!--Time Bar-->
  117.     <div id="progress-back" class="load-item">
  118.         <div id="progress-bar"></div>
  119.     </div>
  120.     
  121.     
  122.     <!--Control Bar-->
  123.     <div id="controls-wrapper" class="load-item">
  124.         <div id="controls">
  125.             
  126.             <a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>
  127.         
  128.             <!--Slide counter-->
  129.             <div id="slidecounter">
  130.                 <span class="slidenumber"></span> / <span class="totalslides"></span>
  131.             </div>
  132.             
  133.             <!--Slide captions displayed here-->
  134.             <div id="slidecaption"></div>
  135.             
  136.             <!--Thumb Tray button-->
  137.             <a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/></a>
  138.             
  139.             <!--Navigation-->
  140.             <ul id="slide-list"></ul>
  141.             
  142.         </div>
  143.     </div>  
  144. <!--Demo styles (you can delete this block)--------------------------------------------------------------------------------------->
  145. <div id="supersized"></div>
  146. </body>
  147. </html>

Etiquetas: tamaño
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 20:16.