jQuery jCapSlide在多个动态图像上的实现

我发现这个很酷的jQuery插件jCapSlide，当您将鼠标悬停在图像上方时，通过滑动覆盖div来显示图像标题。jQuery jCapSlide在多个动态图像上的实现

问题是，我找不到任何文档，我发现的几条指令说我必须通过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文件中包含的头很好，但什么也没有发生。任何人都可以提供建议吗？

谢谢

来源

2014-03-06 John Halsey

这不是一个真正的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/

来源

2014-03-07 09:06:18 ProNotion

感谢您对ProNotion的回应。我用umbraco标记它，因为我重要的是我解释说我正在动态生成这些想象。自从我尝试写我自己的脚本来实现相同的功能，它适用于一个图像，但不适用于多个图像。我已经尝试过你的方法，但它恐怕不起作用。 –

没有以什么方式工作？你可以提供一些更详细的信息，或者更好地在[jsfiddle]（http://jsfiddle.net/）上放置一个例子。您还需要确保所有的.sqrProductsImage元素都具有它们不在您的示例中的ID。 – ProNotion

我只是现在就这样做。看看这个。 http://jsfiddle.net/JohnHalsey/aFG9k/9/ –

我的工作，这也使最终这样做。写了我自己的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); 

     }); 
    }); 

});

就像一个魅力。

来源

2014-03-07 15:32:41

jQuery jCapSlide在多个动态图像上的实现

回答

相关问题