Question

我正在使用网页模板中的图片库，类似于此link。现在，当我点击图像时，它将显示在jquery滑块内。但是我需要滑块内的图像来显示标记span内定义的Project name:villa2，其中每个图像都有以下标记： -

   <li>
        <figure><a href="http://livedemo00.template-help.com/wt_47767/img/page3_bigimg1.jpg" class="thumb"><img src="http://livedemo00.template-help.com/wt_47767/img/page3_img1.jpg" alt=""><span><strong>Project name:</strong><em>villa2</em></span></a></figure>
    </li>

所以我在我的css文件中定义了以下内容： -

#gallerySlider .placeholder:after {
  content: "test";
  color: yellow;
  font-size: 36px;
  font-family: arial;
  position: relative;
  display: block;
  height: 20px;
  width: 200px;
  z-Index: 1;
  bottom: 42px;
  text-align: right;
  margin: -8px;
}

将显示以下内容： -

我可以在滑块内添加文本“test”。但是，任何人都可以尝试我如何做这两个修改： -

1）而不是使用以下css在滑块内显示静态文本： -

  #gallerySlider .placeholder:after {
      content: "test";

我如何强制CSS内容，以显示与渲染图像相关的Project name:villa2？

2）我如何将内容移动到图像下方而不是左侧？

由于

修改

现在经过多次测试和修改后，我对Touchtouch脚本中的loadImage回调函数进行了以下修改： -

function loadImage(src, callback){
            var img = $('<img>').on('load', function(){
                callback.call(img);
            });

            img.attr('src', src);



                // get all the captions (should probably be done with variable referring to something about above selector)
                var allcaptions = $("figure span");

                // setTimeout is a hack here, since the ".placeholders" don't exist yet
                //setTimeout(function () {
                    $(".placeholder").each(function (i) {

                        // in each .placeholder, copy its caption's mark-up into it (remove the img first)
                        var caption = allcaptions.eq(i).clone();
                       // caption.find("img").remove();
                        $(this).append("<div class='caption'>" + caption.html() + "</div>");
                    });
       // }, 500
        //);
}

这似乎表明了跨度如下： -

但我面临两个问题： -

第一个问题如上图所示文本将显示两次，特别是当我点击下一个和上一个箭头时，这里是下一个＆amp;的内置代码。预防箭头： -

function showNext(){

        // If this is not the last image
        if(index+1 < items.length){
            index++;
            offsetSlider(index);
            preload(index+1);
        }
        else{
            // Trigger the spring animation

            slider.addClass('rightSpring');
            setTimeout(function(){
                slider.removeClass('rightSpring');
            },500);
        }
    }

    function showPrevious(){

        // If this is not the first image
        if(index>0){
            index--;
            offsetSlider(index);
            preload(index-1);
        }
        else{
            // Trigger the spring animation

            slider.addClass('leftSpring');
            setTimeout(function(){
                slider.removeClass('leftSpring');
            },500);
        }
    }

第二个问题。就是我点击下一个＆amp;之前的箭头图像将继续失去其位置，并在之后的许多下一个＆amp;之前我将最终将图像放在页面底部的以下位置： -

所以有人可以解释我如何解决这两个问题吗？

Answer 1

Pseudoelements：after和：之前可以使用css将一个元素添加到html流程中......但是那就是它。一个元素，可以是文本，形状，图像（使用css指令作为content:url('image.png')等。但是你不能在伪元素的content:中添加html（如我所知的logn）。

您可以使用简单的jquery：

$(".placeholder").after("<span class="your-class-to-style"><strong>Project name:</strong><em>villa2</em></span>");

但是如果你控制了html，那我就把它包含在那里。

（注意：:after和:before遵循html流程，因此要重新定位它们，您需要使用position:absolute并忘记将relative添加到父级

Answer 2

好吧，如果你查看源代码，你会看到他们正在使用TouchTouch jQuery插件（顺便说一点有点过时）。由于插件没有选项或回调，因此您必须手动执行此操作。关键是以下行：

loadImage(items.eq(index).attr('href'), function(){
    placeholders.eq(index).html(this);
});

因此，即使您使用jQuery添加文本，插件也会从占位符中删除它并仅添加图像。

使用CSS内容＆amp; ：在图像内显示<span>之后

2 个答案: