Foros del Web » Programando para Internet » Jquery »

Slider imagen+texto chungo chungo...

Estas en el tema de Slider imagen+texto chungo chungo... en el foro de Jquery en Foros del Web. Hola!!!!! Os escribo a ver si podríais ayudarme con un slider que estoy intentando montar. El slider se compone de imágenes + un texto descriptivo ...
  #1 (permalink)  
Antiguo 28/08/2015, 10:50
 
Fecha de Ingreso: julio-2014
Mensajes: 6
Antigüedad: 10 años, 4 meses
Puntos: 1
Pregunta Slider imagen+texto chungo chungo...

Hola!!!!!

Os escribo a ver si podríais ayudarme con un slider que estoy intentando montar.
El slider se compone de imágenes + un texto descriptivo de cada imagen (serán textos largos, por lo que no deben montarse sobre la imagen, sino que aparezca justo debajo).

El caso es que el slider ya lo tengo hecho, pero me falta el texto. He usado códigos que he ido buscando por ahí hasta conseguir el aspecto que quería, pero el jquery me parece tan complejo que no se cómo añadirle el texto...

Os copio aquí el HTML de lo que tengo:


Código HTML:
<div class="slideshow">
					<div class="slides">
						
						<div class="slide">
							<img src="static/img/imagen1.jpg" width="100%" height="auto" >
						</div>
						
						<div class="slide two">
							<img src="static/img/imagen2.jpg">
							<img src="static/img/imagen3.jpg" >
						</div>


					</div>
					
					<div class="nav">
						<a href="#">1</a>
						<a href="#">2</a>
					</div>
					
				</div> 

(el slide two carga 2 imágenes a la vez)


Y esto es el enorme jquery (lo pongo todo porque no me aclaro...):

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.  
  3.     jQuery.fn.mostVisible = function(mySelector) {
  4.        
  5.         var wHeight = $(window).height()
  6.         var wTop = $(window).scrollTop();
  7.         var wBottom = wTop + wHeight;
  8.        
  9.         most_visible_height = 0;
  10.         $most_visible = false;
  11.        
  12.         if(wTop < 100) return $(this).children(mySelector+':first');
  13.        
  14.         $(this).children(mySelector).each(function(){
  15.             $this = $(this);
  16.             var pHeight = $this.height()
  17.             var pTop = $this.offset().top;
  18.             var pBottom = pTop + pHeight;
  19.             // outside screen at bottom or outside screen at top
  20.             if( pTop > wBottom || pBottom < wTop ) return;
  21.             // part of project visible
  22.             intersect_top = (pTop < wTop) ? wTop : pTop
  23.             intersect_bottom = (pBottom < wBottom) ? pBottom : wBottom
  24.             intersect_height = intersect_bottom - intersect_top;
  25.             if(intersect_height > most_visible_height) {
  26.                 $most_visible = $this;
  27.                 most_visible_height = intersect_height;
  28.             }
  29.            
  30.         });
  31.    
  32.         return $most_visible;
  33.     }
  34.  
  35.  
  36.     /* INIT SLIDESHOWS WITH SWIPE JS */
  37.    
  38.     var swipes = new Array();
  39.    
  40.     function initSlideshows() {
  41.    
  42.         $('div.slideshow').each(function(){
  43.             var $this = $(this);
  44.        
  45.             $this.theSwipe = Swipe( $this[0], {
  46.                 callback: function(index, elem) {
  47.                     $this.find('div.nav a').removeClass('active');
  48.                     $this.find('div.nav a:eq('+index+')').addClass('active');
  49.                 }
  50.        
  51.             } );
  52.            
  53.             swipes.push( $this.theSwipe );
  54.        
  55.  
  56.             $this.find('a.next').on('click', function(e) {
  57.                 e.preventDefault();
  58.                 $this.theSwipe.next();
  59.             });
  60.  
  61.             $this.find('a.prev').on('click', function(e) {
  62.                 e.preventDefault();
  63.                 $this.theSwipe.prev();
  64.             });
  65.  
  66.             if( $('html').hasClass('no-touch') ) {
  67.                 $this.on('click', function(e) {
  68.                     e.preventDefault(); e.stopPropagation();
  69.                     $this.theSwipe.next();
  70.                 });
  71.             }
  72.  
  73.        
  74.             $this.find('div.nav a').on('click', function(e) {
  75.                 e.preventDefault(); e.stopPropagation();
  76.                 var i = $(this).index();
  77.                 $this.theSwipe.slide(i);
  78.             });
  79.        
  80.             $this.find('div.nav a:first').addClass('active');
  81.    
  82.    
  83.         });
  84.    
  85.         // DO THE NORMAL THING
  86.         $('div.swipe div.caption a').click(function(e){
  87.             e.stopPropagation();
  88.         });
  89.    
  90.     }
  91.  
  92.  
  93.    
  94. function adjustSizes() {   
  95.    
  96.     $('main').each(function(){
  97.         $(this).css('min-height',$(window).height()+'px');
  98.     })
  99.    
  100.  
  101.     var windowHeight = $(window).height();
  102.     var windowWidth = $(window).width();
  103.     var headerHeight = 90;
  104.     var maxHeight = 750; // image height as uploaded
  105.     var maxWidth = windowWidth - headerHeight; // have at least half the header height left and right
  106.     var widthOK = false;
  107.    
  108.     while(! widthOK ) {
  109.  
  110.         var slideWidth = windowWidth;
  111.    
  112.         var slideHeight = windowHeight - 2*headerHeight;
  113.         if (slideHeight > maxHeight) slideHeight = maxHeight;
  114.    
  115.         var slideWidth = parseInt( (slideHeight/9)*16 );
  116.        
  117.         if( slideWidth > maxWidth ) {
  118.             windowHeight = windowHeight - 20;
  119.         } else {
  120.             widthOK = true;
  121.         }
  122.        
  123.    
  124.     }
  125.  
  126.    
  127.    
  128.    
  129.     $('div.slide').css({
  130.         height: slideHeight+'px',
  131.         width: slideWidth+'px'
  132.     });
  133.    
  134.  
  135.     $('div.slide.two img').css({
  136.         height: slideHeight+'px',
  137.         width: 'auto'
  138.     });
  139.  
  140.     $('div.slide:not(.two) img').css({
  141.         height: slideHeight+'px',
  142.         width: 'auto',
  143.     });
  144.  
  145.  
  146.  
  147.     $('div.slideshow').css({
  148.         height: (slideHeight+2*headerHeight)+'px',
  149.         width: slideWidth+'px',
  150.         paddingTop: headerHeight+'px'
  151.     });
  152.  
  153.     $('div.slideshow div.nav').css({
  154.         height: headerHeight+'px',
  155.         lineHeight: headerHeight+'px'
  156.     });
  157.  
  158.     $('div.inner, div.credit-inner').css({
  159.         width: slideWidth+'px'
  160.     });
  161.  
  162. }
  163.  
  164.  
  165.     $('header a[href^="#"]').click(function(e){
  166.         var $target = $( $(this).attr('href') );
  167.         if($target.length) {
  168.             e.preventDefault();
  169.             $('html, body').animate({
  170.                 scrollTop: $target.offset().top
  171.             }, 300 );
  172.         }
  173.     });
  174.  
  175.     $('h1 a').click(function(e){
  176.         e.preventDefault();
  177.  
  178.         swipes[0].slide(0);
  179.  
  180.         if($(window).scrollTop() > 0) {
  181.             $('html, body').animate({
  182.                 scrollTop: 0
  183.             }, 300 );
  184.         }
  185.        
  186.        
  187.  
  188.     });
  189.  
  190.     var updateHeader = function(){
  191.         // $('header a').removeClass('active');
  192.         var $sect = $('body').mostVisible('main');
  193.         var theId = $sect.attr('id');
  194.  
  195.         $('header nav a').hide();
  196.         if( theId == 'about' ) $('a[href="#work"]').show();
  197.         else  $('a[href="#about"]').show();
  198.  
  199.         // hide the one that was just scrolled to
  200.         // $('header nav a').show();
  201.         // $('header nav').find('a[href="#'+theId+'"]').hide();
  202.  
  203.         $('body').removeClass().addClass(theId);
  204.         //console.log(theId);
  205.        
  206.        
  207.     }
  208.    
  209.     $('header nav').find('a[href="#work"]').hide();
  210.    
  211.     var updateHeaderTimeout;
  212.     var updateHeaderDelay = 320;
  213.    
  214.     $(window).scroll(function(){
  215.         updateHeaderTimeout = setTimeout(updateHeader, updateHeaderDelay);
  216.     });
  217.  
  218.     $(window).resize( adjustSizes );
  219.     adjustSizes(); 
  220.     initSlideshows();  
  221.  
  222.  
  223. });




En fin... si alguien entiende algo y me hace el favor de explicármelo como para tontos... me salváis la vida

Gracias!

Carol
  #2 (permalink)  
Antiguo 01/09/2015, 10:44
Avatar de livemusic  
Fecha de Ingreso: abril-2011
Ubicación: Lima - Chorrillos
Mensajes: 150
Antigüedad: 13 años, 7 meses
Puntos: 18
Respuesta: Slider imagen+texto chungo chungo...

Hola me tome la molestia de leer tu código y me gustaria que intentes lo siguiente:

// 1.- Asignamos el texto a cada slide
Código HTML:
Ver original
  1. <div class="slideshow">
  2.     <div class="slides">
  3.         <div class="slide">
  4.             <img src="static/img/imagen1.jpg" width="100%" height="auto" >
  5.             <span>demo demo demo demo</span>
  6.         </div>
  7.         <div class="slide two">
  8.             <img src="static/img/imagen2.jpg">
  9.             <img src="static/img/imagen3.jpg" >
  10.             <span>demo demo demo demo</span>
  11.         </div>
  12.     </div>
  13.     <div class="nav">
  14.         <a href="#">1</a>
  15.         <a href="#">2</a>
  16.     </div>
  17. </div>

// 2.- callback: Removemos la clase activeText de algún span y asignamos el active cuando se cambie el slide. { ------ Linea 45 ------ }
Código Javascript:
Ver original
  1. $this.theSwipe = Swipe( $this[0], {
  2.     callback: function(index, elem) {
  3.         $this.find('div.nav a').removeClass('active');
  4.         $this.find('div.slide span').removeClass('activeText');
  5.         $this.find('div.nav a:eq('+index+')').addClass('active');
  6.         $this.find('div.slide span:eq('+index+')').addClass('activeText');
  7.     }
  8. } );


// 3.- Asignamos el activeText: Para mostrar solo el primero { ------ Linea 80 ------ } Pon solo la segunda linea, puse de referencia la primera..
Código Javascript:
Ver original
  1. $this.find('div.nav a:first').addClass('active');
  2. $this.find('div.slide:first span').addClass('activeText');


// 4.- Ocultamos todos los span
Código CSS:
Ver original
  1. .slideshow .slides .slide span{ display: none;  }


// 5.- Creamos la clase activeText para mostrar el text activo ..
Código CSS:
Ver original
  1. .activeText{ display: block;  }


Algo así seria... espero y funcione :'D me comentas .. Saludos¡¡

Última edición por livemusic; 01/09/2015 a las 10:50

Etiquetas: html, slider
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

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 04:32.