Извлечение заголовка из атрибута alt и вставка в div

Question

Я использую довольно прекрасный jQuery слайд-шоу 1.1 плагин на сайте в настоящий момент, но хотел бы извлечь атрибут alt из отображаемых изображений и вставить их в div с соответствующим время.

текущий код для плагина показан ниже для справки:

jQuery(function(){ 
    jQuery("div.svw").prepend("<img src='/template/theme/designdistillery/img/bg-portfolio-loading.gif' class='ldrgif' alt='loading...'/ >"); 
}); 
var j = 0; 
var quantofamo = 0; 
jQuery.fn.slideView = function(settings) { 
    settings = jQuery.extend({ 
    easeFunc: "easeInOutExpo", 
    easeTime: 750, 
    toolTip: false 
    }, settings); 
    return this.each(function(){ 
     var container = jQuery(this); 
     container.find("img.ldrgif").remove(); // removes the preloader gif 
     container.removeClass("svw").addClass("stripViewer");  
     var pictWidth = container.find("img").width(); 
     var pictHeight = container.find("img").height(); 
     var pictEls = container.find("li").size(); 
     var stripViewerWidth = pictWidth*pictEls; 
     container.find("ul").css("width" , stripViewerWidth); //assegnamo la larghezza alla lista UL  
     container.css("width" , pictWidth); 
     container.css("height" , pictHeight); 
     container.each(function(i) { 

      jQuery(this).after("<div class='stripTransmitter' id='stripTransmitter" + (j) + "'><ul><\/ul><\/div>"); 
      jQuery(this).find("li").each(function(n) { 
         jQuery("div#stripTransmitter" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'>"+(n+1)+"<\/a><\/li>");            
       }); 
      jQuery("div#stripTransmitter" + j + " a").each(function(z) { 
       jQuery(this).bind("click", function(){ 

       jQuery(this).addClass("current").parent().parent().find("a").not(jQuery(this)).removeClass("current"); // wow! 
       var cnt = -(pictWidth*z); 
       container.find("ul").animate({ left: cnt}, settings.easeTime, settings.easeFunc); 
       return false; 
        }); 
       }); 


       // next image via image click 14/01/2009 
       jQuery("div#stripTransmitter" + j + " a").parent().parent().parent().prev().find("img").each(function(z) { 
       jQuery(this).bind("click", function(){ 
        var ui = jQuery(this).parent().parent().parent().next().find("a"); 
        if(z+1 < pictEls){ 
         ui.eq(z+1).trigger("click"); 
        } 
        else ui.eq(0).trigger("click"); 
        }); 
       }); 

      jQuery("div#stripTransmitter" + j).css("width" , pictWidth); 
      jQuery("div#stripTransmitter" + j + " a:first").addClass("current"); 
      if(settings.toolTip){ 
      container.next(".stripTransmitter ul").find("a").Tooltip({ 
       track: true, 
       delay: 0, 
       showURL: false, 
       showBody: false 
       }); 
      } 
      }); 
     j++; 
    }); 
}; 

Answer 1

Это так просто, как:

$("div").html($("#myImg").attr("alt")); 

Когда вы хотите, чтобы это произошло?

Answer 2

Изображение включается (или доведенный в поле зрения) на экране с помощью этой линии

container.find("ul").animate({ left: cnt}, settings.easeTime, settings.easeFunc); 

вам нужно изменить эту строку:

container.find("ul").animate({ left: cnt}, settings.easeTime, settings.easeFunc, function(){ 
    // z is the index of the currently showing picture, 
    // it comes from the .each call above 

    var altText = $(this).find("img").eq(z).attr("alt"); //get alt value 

    // now insert the text from the alt value 
    $("#id_of_your_text_display_div").html(altText); 
}); 

Надеется, что это помогает ....

Answer 3

Спасибо за помощь!

Я изменил версию сценария эхаледа, чтобы подписи отображались под первым изображением в серии, а также простой эффект затухания для титров для любых последующих изображений - все это блестяще работает сейчас!

Еще раз спасибо :)

jQuery(function(){ 
jQuery("div.svw").prepend("<img src='/template/theme/designdistillery/img/bg-portfolio-loading.gif' class='ldrgif' alt='loading...'/ >"); 
}); 
var j = 0; 
var quantofamo = 0; 
jQuery.fn.slideView = function(settings) { 
     settings = jQuery.extend({ 
     easeFunc: "easeInOutExpo", 
     easeTime: 750, 
     toolTip: false 
     }, settings); 
     return this.each(function(){ 
      var container = jQuery(this); 
      container.find("img.ldrgif").remove(); // Removes the preloader gif 
      container.removeClass("svw").addClass("stripViewer");  
      var pictWidth = container.find("img").width(); 
      var pictHeight = container.find("img").height(); 
      var pictEls = container.find("li").size(); 
      var stripViewerWidth = pictWidth*pictEls; 
      container.find("ul").css("width" , stripViewerWidth); 
      container.css("width" , pictWidth); 
      container.css("height" , pictHeight); 
      container.each(function(i) { 
       var altTextstart = $(this).find("img").attr("alt"); 
       $("#caption").html(altTextstart); 
       jQuery(this).after("<div class='stripTransmitter' id='stripTransmitter" + (j) + "'><ul><\/ul><\/div>"); 
       jQuery(this).find("li").each(function(n) { 
        jQuery("div#stripTransmitter" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'>"+(n+1)+"<\/a><\/li>");          
       }); 
       jQuery("div#stripTransmitter" + j + " a").each(function(z) { 
        jQuery(this).bind("click", function(){ 
         $("#caption").html(altTextstart).hide();  
         jQuery(this).addClass("current").parent().parent().find("a").not(jQuery(this)).removeClass("current"); 
         var cnt = -(pictWidth*z); 
         container.find("ul").animate({ left: cnt}, settings.easeTime, settings.easeFunc,function(){ 
          // z is the index of the currently showing picture, 
          // It comes from the .each call above 
          var altText = $(this).find("img").eq(z).attr("alt"); // Get alt value 
          // Now insert the text from the alt value 
          $("#caption").html(altText).fadeIn("slow"); 
         }); 
         return false; 
        }); 
       }); 
       jQuery("div#stripTransmitter" + j + " a").parent().parent().parent().prev().find("img").each(function(z) { 
        jQuery(this).bind("click", function(){ 
         var ui = jQuery(this).parent().parent().parent().next().find("a"); 
         if(z+1 < pictEls){ 
          ui.eq(z+1).trigger("click"); 
          } 
          else ui.eq(0).trigger("click"); 
         }); 
        }); 
      jQuery("div#stripTransmitter" + j).css("width" , pictWidth); 
      jQuery("div#stripTransmitter" + j + " a:first").addClass("current");       
      if(settings.toolTip){ 
       container.next(".stripTransmitter ul").find("a").Tooltip({ 
        track: true, 
        delay: 0, 
        showURL: false, 
        showBody: false, 
        }); 
       } 
      }); 
     j++; 
    }); 
}; 

Answer 4

Первое изображение не имеет заголовок, потому что заголовок отображается только после onclick.
Это может быть исправлено путем вставки:

var altText = $(this).find("img").eq(0).attr("alt"); 
$("#caption").html(altText).fadeIn("slow");