Ver Mensaje Individual
  #1 (permalink)  
Antiguo 28/08/2015, 10:50
cjauregui
 
Fecha de Ingreso: julio-2014
Mensajes: 6
Antigüedad: 7 años, 11 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