alt 속성에서 캡션을 추출하고 div에 삽입

Question

현재 사이트에서 다소 멋진 jQuery slideviewer 1.1 플러그인을 사용하고 있지만 표시되는 이미지에서 alt 속성을 추출하여 적절한 div에 삽입하고 싶습니다. 시각.

플러그인에 대한 현재의 코드는 참조를 위해 다음과 같습니다 당신이 원하는 않는 경우

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

이 일이 :

이

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

그것은처럼 간단?

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

모든 도움을 주셔서 감사합니다!

캡션이 일련의 첫 번째 이미지 아래에 표시되도록 ekhaled 버전의 스크립트를 수정했으며 이후 이미지의 캡션에 간단한 페이드 효과가 적용되었습니다. 이제는 모두 훌륭하게 작동합니다!

다시 한번 감사

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");