Tema: Dar diferentes posiciones a textos del slideshow
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 21/10/2013, 08:09
Avatar de kimmy
kimmy
 
Fecha de Ingreso: julio-2008
Mensajes: 841
Antigüedad: 16 años, 3 meses
Puntos: 15
Pregunta Dar diferentes posiciones a textos del slideshow
Hola:

Tengo un slideshow en el que muestro 3 textos que aparecen (en vez de imagenes aparecen textos). El problema es que no consigo que aparezcan en posiciones diferentes. Por ejemplo el 1º arriba, el 2º en el centro y el 3º abajo. Este es el jquery que los controla:

Código Javascript: 
Ver original
  1. var lightAnim = false;  
  2. var animTimeout = 6500;
  3. var startOverlay = '155px';
  4. var startFg = '30px';
  5. var endOverlay = '185px';
  6. var endFg = '0px';
  7.  
  8. $(function() {
  9.  
  10.     // Low end browsers receive light transitions
  11.     if($.browser.msie && $.browser.version < 9) {
  12.         lightAnim = true;
  13.     }
  14.  
  15.     // Setup slideshow
  16.     var slides = $('#slideshow .slide');
  17.     var slideBgs = $('#slide-bgs');
  18.  
  19.     if(slides.length > 1) {
  20.     
  21.         slideBgs.maximage({
  22.             fillElement: '#slideshow',
  23.             backgroundSize: 'cover',
  24.             overrideMSIEStop: true,
  25.             cycleOptions: {
  26.                 fx: 'fade',
  27.                 speed: lightAnim ? 200 : 700,
  28.                 timeout: animTimeout,
  29.                 before: onCycleBefore,
  30.                 after: onCycleAfter,
  31.                 pause: true
  32.             },
  33.             onFirstImageLoaded: function() {
  34.                 if (lightAnim) {
  35.                     slideBgs.show();
  36.                 } else {
  37.                     slideBgs.fadeIn('fast');
  38.                 }
  39.             }
  40.         });
  41.         
  42.         
  43.         $('#dots').show();
  44.         $('#dots .dot').each(function(i){
  45.             $(this).click(function(){
  46.                 slideBgs.cycle(i);
  47.             });
  48.         });
  49.             
  50.         
  51.         $('div.slide, div.slide a').hover(function() {
  52.             slideBgs.cycle('pause');
  53.         },function() {
  54.             slideBgs.cycle('resume');
  55.         });
  56.                 
  57.     } else {
  58.         
  59.         
  60.         if (lightAnim) {
  61.             // No scaling for old browsers with a single marquee
  62.             slideBgs.show();
  63.             slides.show();
  64.             $('div.overlay').css('top', endOverlay).show();
  65.             $('div.foreground').css('top', endFg).show();
  66.         } else {
  67.             slideBgs.maximage({
  68.                 fillElement: '#slideshow',
  69.                 backgroundSize: 'cover',
  70.                 overrideMSIEStop: true,
  71.                 cycleOptions: {
  72.                     fx: 'fade',
  73.                     speed: lightAnim ? 200 : 700,
  74.                     timeout: animTimeout,
  75.                     pause: false
  76.                 },
  77.                 onFirstImageLoaded: function() {
  78.                     slides.fadeIn(function() {
  79.                         slideBgs.fadeIn('fast');
  80.                         $('div.overlay', slides).animate({opacity: 'toggle', top: endOverlay}, 800, 'easeOutQuad');
  81.                         $('div.foreground', slides).animate({opacity: 'toggle', top: endFg}, 800, 'easeOutQuad');
  82.                     });
  83.                 }
  84.             });
  85.         }
  86.  
  87.     }
  88.     
  89.     
  90.     $('#search-box').focus(function(){
  91.         clearTimeout(searchTimeOut);
  92.         $(this).addClass('hover').animate({ width: '192px' }, 'fast');
  93.     }).blur(function(){
  94.         searchTimeOut = setTimeout(closeSearch,200);
  95.     });
  96. });
  97.  
  98.  
  99. var searchTimeOut;
  100. function closeSearch() {
  101.     $('#search-box').removeClass('hover').animate({ width: '33px' }, 'fast');
  102. }
  103.  
  104.  
  105. function onCycleBefore(curr, next, opts) {
  106.     // Fade out current slide overlays
  107.     var slide = $('div.slide-' + opts.currSlide);
  108.     var overlay = $('div.overlay', slide);
  109.     var foreground = $('div.foreground', slide);
  110.     
  111.     slide.fadeOut(function() {
  112.         // Reset internals
  113.         overlay.hide();
  114.         foreground.hide();
  115.         if (!lightAnim) {
  116.             overlay.css('top', startOverlay);
  117.             foreground.css('top', startFg);
  118.         }
  119.     });
  120.     
  121.     
  122.     if(curr == next) {
  123.         // Initial
  124.         $($('#dots .dot')[opts.currSlide]).addClass('active');
  125.     } else {
  126.         // Normal
  127.         $($('#dots .dot')[opts.currSlide]).removeClass('active');
  128.         $($('#dots .dot')[opts.nextSlide]).addClass('active');
  129.     }
  130. }
  131.  
  132.  
  133. function onCycleAfter(curr, next, opts) {
  134.     // Fade in current slide overlays
  135.     var slide = $('div.slide-' + opts.currSlide);
  136.     slide.fadeIn(function() {
  137.         if (lightAnim) {
  138.             $('div.overlay', slide).css('top', endOverlay).show();
  139.             $('div.foreground', slide).css('top', endFg).show();
  140.         } else {
  141.             $('div.overlay', slide).animate({opacity: 'toggle', top: endOverlay}, 800, 'easeOutQuad');
  142.             $('div.foreground', slide).animate({opacity: 'toggle', top: endFg}, 800, 'easeOutQuad');
  143.         }
  144.     });
  145. }

el css:

Código CSS: 
Ver original
  1. #slideshow {
  2.     position: absolute;
  3.     z-index: 1;
  4.     top:  0;
  5.     left: 0;
  6.     width:  100%;
  7.     height: 742px;
  8.     min-width: 1000px;
  9.     color: #fff;
  10.     overflow: hidden;
  11.     -webkit-transform-style: preserve-3d;
  12.     -webkit-backface-visibility: hidden;
  13. }
  14.  
  15.     #slide-bgs {
  16.         display: none;
  17.         position: absolute !important;
  18.         -webkit-transform-style: preserve-3d;
  19.         -webkit-backface-visibility: hidden;
  20.     }
  21.     
  22.         #slide-bgs img {
  23.             -webkit-transform-style: preserve-3d;
  24.             -webkit-backface-visibility: hidden;
  25.         }
  26.  
  27. #slideshow .slide {
  28.     position: absolute;
  29.     top:  100;
  30.     left: 0;
  31.     z-index: 1;
  32.     display: none;
  33.     height: 742px;
  34.     width: 100%;
  35. }
  36.  
  37.     #slideshow .slide-0 .overlay {
  38.         position: relative;
  39.         top: 155px;
  40.         left: 42%;
  41.         display: none;
  42.         width: 610px;
  43.         text-align:right;
  44.     }
  45.     
  46.         #slideshow .slide-1 .overlay {
  47.         position: relative;
  48.         top: 85%;
  49.         left: 19%;
  50.         display: none;
  51.         width: 1050px;
  52.         text-align:left;
  53.     }
  54.  
  55.         #slideshow .slide-2 .overlay {
  56.         position: relative;
  57.         top: 55%;
  58.         left: 19%;
  59.         display: none;
  60.         width: 950px;
  61.         text-align:left;
  62.     }
  63.  
  64.     #slideshow .slide a {
  65.         color: #fff;
  66.         text-decoration: none;
  67.         outline: 0;
  68.         display:block;
  69.     }
  70.     
  71.     #slideshow .slide a:focus {
  72.         outline: 0;
  73.         }
  74.     
  75.     #slideshow .slide div.foreground {
  76.         position: absolute;
  77.         display: none;
  78.         left: 55%;
  79.         margin-left: -745px;
  80.         top: 30px;
  81.     }
  82.     
  83.     #slideshow .slide span.lead {
  84.         font-size: 40px;
  85.         line-height: 50px;
  86.         font-weight: 300;
  87.     }
  88.     
  89.     #slideshow .slide span {
  90.         font-weight: 300;
  91.         padding: 0;
  92.         position:relative;
  93.     }
  94.     
  95.         #slideshow .slide span.small  { 
  96.             font-size: 45px;
  97.             font-family: "Raleway", sans-serif;
  98.             margin:0px;
  99.             padding:0px;
  100.             white-space:nowrap;
  101.         }
  102.  
  103.         #slideshow .slide span.medium { font-size: 55px; font-weight:bold; margin: 0px;  padding:0px; }
  104.  
  105.         #slideshow .slide span.large  { font-size: 90px; left: -7px; margin: 0px; padding:0px; }
  106.         
  107.         #slideshow .slide span.large-next   { margin: 0 0 13px 0; }
  108.         #slideshow .slide span.medium-next  { margin: 0 0 13px 0; }
  109.         #slideshow .slide span.small-next   { margin: 0 0 10px 0; }
  110.     
  111.     #slideshow .slide .info {
  112.         display: block;
  113.         font-family: "Raleway", sans-serif;
  114.         font-size: 20px;
  115.         font-weight: 300;
  116.         margin: 0 0 29px;
  117.         word-spacing:normal;
  118.     }
  119.  
  120.     #slideshow .slide .info2 {
  121.         display: block;
  122.         font-family: "Raleway", sans-serif;
  123.         font-size: 20px;
  124.         font-weight:bold;
  125.         margin: 0 0 29px;
  126.         word-spacing:normal;
  127.     }
  128.  
  129.     #slideshow .slide .info3 {
  130.         font-family: "Raleway", sans-serif;
  131.         font-size: 20px;
  132.         font-weight: 300;
  133.         margin: 0 0 5px;
  134.         word-spacing:normal;
  135.     }
  136.  
  137.     #slideshow .slide .info4 {
  138.         font-family: "Raleway", sans-serif;
  139.         font-size: 20px;
  140.         font-weight: bold;
  141.         margin: 0 0 5px;
  142.         word-spacing:normal;
  143.     }
  144.  
  145.     #slideshow .slide span.btn {
  146.         border-radius: 6px;
  147.         display: inline-block;
  148.         font-size: 18px;
  149.         padding: 4px 24px 4px 10px;
  150.         height: 26px;
  151.         background-color: #1BACD3;
  152.         background-image: url("../images/home-slide-cta-arrow2.png");
  153.         background-repeat:no-repeat;
  154.         background-position: 100% 13px;
  155.         -webkit-transition: all 0.2s;
  156.         -moz-transition: all 0.2s;
  157.         -o-transition: all 0.2s;
  158.         -ms-transition: all 0.2s;
  159.         transition: all 0.2s;   
  160.     }
  161.     
  162.     #slideshow .slide a:hover span.btn {
  163.         color: #000;
  164.         background-color: #fff;
  165.         background-image:url("../images/home-slide-cta-arrow2-hover.png");
  166.         cursor:pointer;
  167.     }

el html:

Código HTML: 
Ver original
  1. <div id="slideshow">
  2.     <div id="dots">
  3.             <div id="dots-inner">
  4.                 <span class="dot" goto="0"><a href="#" onclick="return false;"><img src="images/home-slide-cta-arrow2-hover.png" width="17" height="9" alt="y" /></a></span>
  5.                 <span class="dot" goto="1"><a href="#" onclick="return false;"><img src="images/home-slide-cta-arrow2-hover.png" width="17" height="9" alt="y" /></a></span>
  6.                 <span class="dot" goto="2"><a href="#" onclick="return false;"><img src="images/home-slide-cta-arrow2-hover.png" width="17" height="9" alt="y" /></a></span>
  7.             </div>
  8.     </div>
  9.  
  10.     <div id="slide-bgs">
  11.         <img src="images/bg1.png" width="1600" height="872" alt="Img1" title="Img1" border="0" />                       
  12.         <img src="images/bg2.png" width="1600" height="898" alt="Img1" title="Img2" border="0" />                   
  13.         <img src="images/bg3.png" width="1600" height="768" alt="Cloud" title="Cloud" border="0" />         
  14.     </div>
  15.  
  16.     <div class="slide slide-0">
  17.             <div class="overlay">
  18.                 <a href="" title="Posicionamiento">
  19.                     <span class="small small-next">¿Quiere una </span>
  20.                     <span class="medium medium-next"> mejor</span>
  21.                     <span class="medium medium-next">posición?</span>
  22.                     <span class="info">Consulte nuestros planes especializados de
  23.                     <span class="info2">Posicionamiento [+] </span></span>
  24.                 </a>
  25.             </div>
  26.     </div>
  27.     
  28.     <div class="slide slide-1">
  29.             <div class="overlay">
  30.                 <a href="" title="Email">
  31.                     <p>
  32.                         <span class="medium medium-next">¿Cansado </span>
  33.                         <span class="small small-next"> de los problemas </span>
  34.                     </p>
  35.                         <span class="small small-next">con el </span>
  36.                         <span class="medium medium-next"> Correo? </span>
  37.                         <span class="info3">Consulte nuestros servicios de </span>
  38.                         <span class="info4">Email APPS [+]</span>
  39.                 </a>
  40.             </div>
  41.     </div>
  42.                                 
  43.     <div class="slide slide-2">
  44.             <div class="overlay">
  45.                 <a href="" title="Desarrollo">
  46.                 <p>
  47.                     <span class="small small-next">¿Quiere dar </span>
  48.                     <span class="medium medium-next"> el gran </span>
  49.                 </p>
  50.                     <span class="medium medium-next"> salto 
  51.                     <span class="small small-next">con su </span>
  52.                     empresa </span>
  53.                     <span class="info">Nosotros lo hacemos realidad con el 
  54.                     <span class="info2">Desarrollo de Aplicaciones [+]</span></span>
  55.                 </a>
  56.             </div>
  57.     </div>
  58.  
  59. </div>

Por favor me ayudan a entender esto. Gracias.
__________________
Caminando con el corazón partío