Question

我发现这个很酷的jQuery插件jCapSlide，当你将鼠标悬停在图像上时，通过向上滑动叠加div来显示图像标题。

问题是，我找不到它的任何文档，我找到的关于它的一些说明说我必须按ID定位元素，但在我的情况下，这是不可能的，因为我正在生成图像动态地不保证会有多少。这是我到目前为止所做的:(我使用的是Umbraco CMS，图像是用Razor宏创建的）。

var products = Model.AncestorOrSelf(1).Descendants("Product").Where("Visible").Items;

foreach (var product in products)
{
if (product.favourite == true)
{
    <div class="floatProducts">
    <div class="outerSqrProducts">
    <div class="sqrProductsImage">
        <a href="@product.Url">
            <img src="@product.Media("mainImage","umbracoFile")" alt="@product.Media("mainImage","altText")" />
        </a>
        <div class="overlay" style="display:none;"></div>
        <div class="ic_caption" style="display:none;">
            <h2>@product.Name</h2>  
        </div>  
    </div>
    </div>
    </div>
}
}

在我的模板的头部，我有这个......

   <script type="text/javascript">
        $(document).ready(function () {
            $('.sqrProductsImage').capslide({
                    caption_color    :   '#FFFFFF',
                    caption_bgcolor  :   'rgb(0,148,217)',
                    overlay_bgcolor  :   'rgb(0,148,217)',
                    border           :   '',
                    showcaption      :   false

            });
        });
    </script>

我也有头脑中包含的所有js和css文件，但没有任何事情发生。任何人都可以提出任何建议吗？

谢谢

Answer 1

这不是真正的Umbraco问题！

您没有提供对您正在使用的脚本本身的任何引用，因此我们所能做的只是猜测实现，但是我的建议是，如果您必须使用ID，那么只需迭代所有元素类和抓住id - 虽然看起来效率很低！

未经证实的例子来证明我的意思：

<script type="text/javascript">
    $(document).ready(function () {
    var elements = $('.sqrProductsImage');
    $.each(elements, function() {
            $($(this).att("id")).capslide({
                caption_color    :   '#FFFFFF',
                caption_bgcolor  :   'rgb(0,148,217)',
                overlay_bgcolor  :   'rgb(0,148,217)',
                border           :   '',
                showcaption      :   false
            });
        });
    });
</script>

参考：https://api.jquery.com/jQuery.each/

Answer 2

我最终做到了这一点。写了我自己的jQuery脚本。

HTML：

<body>

    <div class="outerSqrProducts">
        <div class="sqrProductsImage">
            <a href="#">
                <img src="http://www.avenir-accessories.co.uk/media/4367/beewi-fiat-500-white.jpg"/>
            </a>
        </div>
        <div class="overlay"></div>
        <div class="ic_caption" id="caption1">
            <h2 class="centerText">Title</h2>   
         </div>
    </div>

    <!-- this could be repeated x amount of times in the dynamic code -->
    <div class="outerSqrProducts">
       <div class="sqrProductsImage"> <a href="#">
        <img src="http://www.avenir-accessories.co.uk/media/4367/beewi-fiat-500-white.jpg"/>
        </a>


        </div>
        <div class="overlay"></div>
        <div class="ic_caption">
                <h2 class="centerText">Title</h2>   
        </div>
    </div>

    <body>

CSS：

body {
    background-color: #0097F0;
}
.centerText {
    text-align: center;
}
.outerSqrProducts
{
    display: table-cell;
    vertical-align: middle;
    height: 234px;
    width: 234px;
    background-color: #FFF; 
    position: relative;

}
.sqrProductsImage 
{
    display: inline-block;
}
.sqrProductsImage img {
    max-height: 234px;
    max-width: 234px;
}
.overlay, .ic_caption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
}
.overlay {
    background-color: rgba(0, 151, 240, 0.5);
    height: 100%;
}
.ic_caption {
    background-color: rgba(0, 151, 240, 0.8);
    height: 50%;
}

jQuery的：

$(document).ready(function () {
    var div = $('.outerSqrProducts');
    var overlay = $('.overlay');
    var title = $('.ic_caption');
    var speed = 500;

    div.each(function (i) {
        $(this).attr('id', 'image' + i);
        var divId = $(this).attr('id');

        $('#' + divId).hover(function () {
            // make background opaque
            $('#' + divId).find('.overlay').fadeIn(speed);
            // slide down the title
            $('#' + divId).find('.ic_caption').slideDown(speed);
        },

        function () {
            $('#' + divId).find('.ic_caption').slideUp(speed);
            $('#' + divId).find('.overlay').fadeOut(speed);

        });
    });

});

像魅力一样。

jQuery jCapSlide实现多个动态图像

2 个答案: