Slider imagen+texto chungo chungo...

[cjauregui]

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:

$(document).ready(function(){
 
    jQuery.fn.mostVisible = function(mySelector) {
        
        var wHeight = $(window).height()
        var wTop = $(window).scrollTop();
        var wBottom = wTop + wHeight;
        
        most_visible_height = 0;
        $most_visible = false;
        
        if(wTop < 100) return $(this).children(mySelector+':first');
        
        $(this).children(mySelector).each(function(){
            $this = $(this);
            var pHeight = $this.height()
            var pTop = $this.offset().top;
            var pBottom = pTop + pHeight;
            // outside screen at bottom or outside screen at top
            if( pTop > wBottom || pBottom < wTop ) return;
            // part of project visible
            intersect_top = (pTop < wTop) ? wTop : pTop
            intersect_bottom = (pBottom < wBottom) ? pBottom : wBottom
            intersect_height = intersect_bottom - intersect_top;
            if(intersect_height > most_visible_height) {
                $most_visible = $this;
                most_visible_height = intersect_height;
            }
            
        });
    
        return $most_visible;
    }
 
 
    /* INIT SLIDESHOWS WITH SWIPE JS */
    
    var swipes = new Array();
    
    function initSlideshows() {
    
        $('div.slideshow').each(function(){
            var $this = $(this);
        
            $this.theSwipe = Swipe( $this[0], {
                callback: function(index, elem) {
                    $this.find('div.nav a').removeClass('active');
                    $this.find('div.nav a:eq('+index+')').addClass('active');
                }
        
            } );
            
            swipes.push( $this.theSwipe );
        
 
            $this.find('a.next').on('click', function(e) {
                e.preventDefault();
                $this.theSwipe.next();
            });
 
            $this.find('a.prev').on('click', function(e) {
                e.preventDefault();
                $this.theSwipe.prev();
            });
 
            if( $('html').hasClass('no-touch') ) {
                $this.on('click', function(e) {
                    e.preventDefault(); e.stopPropagation();
                    $this.theSwipe.next();
                });
            }
 
        
            $this.find('div.nav a').on('click', function(e) {
                e.preventDefault(); e.stopPropagation();
                var i = $(this).index();
                $this.theSwipe.slide(i);
            });
        
            $this.find('div.nav a:first').addClass('active');
    
    
        });
    
        // DO THE NORMAL THING
        $('div.swipe div.caption a').click(function(e){
            e.stopPropagation();
        });
    
    }
 
 
    
function adjustSizes() {    
    
    $('main').each(function(){
        $(this).css('min-height',$(window).height()+'px');
    })
    
 
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    var headerHeight = 90;
    var maxHeight = 750; // image height as uploaded
    var maxWidth = windowWidth - headerHeight; // have at least half the header height left and right
    var widthOK = false;
    
    while(! widthOK ) {
 
        var slideWidth = windowWidth;
    
        var slideHeight = windowHeight - 2*headerHeight;
        if (slideHeight > maxHeight) slideHeight = maxHeight;
    
        var slideWidth = parseInt( (slideHeight/9)*16 );
        
        if( slideWidth > maxWidth ) {
            windowHeight = windowHeight - 20;
        } else {
            widthOK = true;
        }
        
    
    }
 
    
    
    
    $('div.slide').css({
        height: slideHeight+'px',
        width: slideWidth+'px'
    });
    
 
    $('div.slide.two img').css({
        height: slideHeight+'px',
        width: 'auto'
    });
 
    $('div.slide:not(.two) img').css({
        height: slideHeight+'px',
        width: 'auto',
    });
 
 
 
    $('div.slideshow').css({
        height: (slideHeight+2*headerHeight)+'px',
        width: slideWidth+'px',
        paddingTop: headerHeight+'px'
    });
 
    $('div.slideshow div.nav').css({
        height: headerHeight+'px',
        lineHeight: headerHeight+'px'
    });
 
    $('div.inner, div.credit-inner').css({
        width: slideWidth+'px'
    });
 
}
 
 
    $('header a[href^="#"]').click(function(e){
        var $target = $( $(this).attr('href') );
        if($target.length) {
            e.preventDefault();
            $('html, body').animate({
                scrollTop: $target.offset().top
            }, 300 );
        }
    });
 
    $('h1 a').click(function(e){
        e.preventDefault();
 
        swipes[0].slide(0);
 
        if($(window).scrollTop() > 0) {
            $('html, body').animate({
                scrollTop: 0
            }, 300 );
        }
        
        
 
    });
 
    var updateHeader = function(){
        // $('header a').removeClass('active');
        var $sect = $('body').mostVisible('main');
        var theId = $sect.attr('id');
 
        $('header nav a').hide();
        if( theId == 'about' ) $('a[href="#work"]').show();
        else  $('a[href="#about"]').show();
 
        // hide the one that was just scrolled to
        // $('header nav a').show();
        // $('header nav').find('a[href="#'+theId+'"]').hide();
 
        $('body').removeClass().addClass(theId);
        //console.log(theId);
        
        
    }
    
    $('header nav').find('a[href="#work"]').hide();
    
    var updateHeaderTimeout;
    var updateHeaderDelay = 320;
    
    $(window).scroll(function(){
        updateHeaderTimeout = setTimeout(updateHeader, updateHeaderDelay);
    });
 
    $(window).resize( adjustSizes );
    adjustSizes();  
    initSlideshows();   
 
 
});
 

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

Gracias!

Carol

[livemusic]

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:

<div class="slideshow">
    <div class="slides">
        <div class="slide">
            <img src="static/img/imagen1.jpg" width="100%" height="auto" >
            <span>demo demo demo demo</span>
        </div>
        <div class="slide two">
            <img src="static/img/imagen2.jpg">
            <img src="static/img/imagen3.jpg" >
            <span>demo demo demo demo</span>
        </div>
    </div>
    <div class="nav">
        <a href="#">1</a>
        <a href="#">2</a>
    </div>
</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:

$this.theSwipe = Swipe( $this[0], {
    callback: function(index, elem) {
        $this.find('div.nav a').removeClass('active');
        $this.find('div.slide span').removeClass('activeText');
        $this.find('div.nav a:eq('+index+')').addClass('active');
        $this.find('div.slide span:eq('+index+')').addClass('activeText');
    }
} );
 

// 3.- Asignamos el activeText: Para mostrar solo el primero { ------ Linea 80 ------ } Pon solo la segunda linea, puse de referencia la primera..

Código Javascript:

$this.find('div.nav a:first').addClass('active');
$this.find('div.slide:first span').addClass('activeText');
 

// 4.- Ocultamos todos los span

Código CSS:

.slideshow .slides .slide span{ display: none;  }
 

// 5.- Creamos la clase activeText para mostrar el text activo ..

Código CSS:

.activeText{ display: block;  }
 

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