每個圖像的jQuery燈箱描述文本

Question

我正在燈箱畫廊。

我可以從存儲CMS圖像的動態數據庫中創建它。

我不能做的是獲取描述每個圖像的文本（也存儲在圖像數據庫的一列中），並將其放在燈箱下作為對喜歡的圖像的描述。 每個圖像都有自己的文本/說明。

在這里，您是相對於畫廊創建的html / php代碼的一部分：

<div class="gallery">
<?php foreach ($select as $sc): ?>
    <figure>
        <a class="go" href="<?php echo $sc['img_url'] ?>">
            <img src="<?php echo $sc['thumb_ftp_path'] ?>" alt="<?php echo $sc['img_text'] ?>">
        </a>
    </figure>            
<?php endforeach ?>

如您所見，我使用描述文本（$ sc ['img_text']）來動態寫入每個圖像的“ alt”屬性。

對於燈箱，我正在研究在Internet上找到的腳本。

在這里，您是與創建html“ go”標簽的images'lightbox相關的jquery部分。

$('.go').click(function(e) {

// prevent default click event
e.preventDefault();

// grab href from clicked element
var image_href = $(this).attr("href");  

// determine the index of clicked trigger
var slideNum = $('.go').index(this);

// find out if #lightbox exists
if ($('#lightbox').length > 0) {        
  // #lightbox exists
  $('#lightbox').fadeIn(300);
  // #lightbox does not exist - create and insert (runs 1st time only)
} else {                                
  // create HTML markup for lightbox window
  var lightbox =
      '<div id="lightbox">' +
      '<p>Close X</p>' +
      '<div id="description_text">'+ //div where insert the description of the image
      '</div>'+
      '<div id="slider">' +
      '<div class="nav">' +
      '<a class="prev slide-nav">prev</a>' +
      '<a class="next slide-nav">next</a>' +
      '</div>' +
      '</div>' +
      '</div>';

  //insert lightbox HTML into page
  $('body').append(lightbox);

  // fill lightbox with a hrefs in .gallery
  $('.gallery').find('figure > a').each(function() {
    var $href = $(this).attr('href');
    $('#slider').append(
      '<img src="' + $href + '">'
    );
  });

}

最后是重點。 我不能使用導致文本的變量$ sc ['img_text']來填充單擊“ go”標記時由jquery腳本創建的div #description_text。

我按以下方式嘗試了te，但它不起作用：

$('.gallery').find('figure > img') {
    var $description_text = $(this).attr('alt');
    $('#imgtext').append(
      '<p>' + $description_text + '</p>'
    );

}）;

有什么建議嗎？

M.

Answer 1

我自己解決了。 你在這里：

// fill lightbox/imgtext with alt attributes of a > img in .gallery
  $('.gallery').find('figure > a > img').each(function() {
    var $alt = $(this).attr('alt');
    $('#imgtext').append('<p>' + $alt + '</p>');
  });

問題末尾發布的嘗試是錯誤的，因為.find（）方法參數不完整，而且我沒有正確編寫父路徑。

現在，我可以將每個圖像的alt屬性存儲到html“ p”元素中並使用它們。

馬泰奧