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”属性。

对于灯箱，我正在研究我在互联网上找到的脚本。

这里是jquery部分，相对于创建图像'lightbox，使用html“go”标签。

$('.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']来填充jquery脚本在点击'go'标签时创建的div #description_text。

我尝试了以下方式，但它不起作用：

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

}）;

有什么建议吗？

微米。

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”元素中并使用它们。

Matteo

每个图像的jquery灯箱描述文本

1 个答案: