如何在幻灯片放映中显示图像，如果存在，则在图像的下方显示。 [英] How to Show images in slide show with description in the below of the image if exist.

问题描述

如何在幻灯片放映中显示图像，如果存在，则在图像的下方显示。

我有一个div类（背景黑色）。在里面有如果存在于属性中，则将描述代码添加到每个图像。

默认我显示库中的前12个图像。

要求如果单个图像中不存在描述，则希望隐藏描述div。

或

我必须仅在图像中显示描述块任何一个具有描述元数据的图像。否则必须隐藏它。

你能帮忙吗？

我在下面提供我的.ascx设计。

< div class =" slideshow">

  &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; < asp：Repeater ID =" repslide" runat =" server">

  &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; < ItemTemplate>

  &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; < div class =" item">

  &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; < img class =" img-responsive" src ='<％＃（（Entities.Image）（Container.DataItem））。Url％>？ID = 10'>

  &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; < div class =" Desc-caption">

  &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; <％＃（（Entities.Image）（Container.DataItem））。Description == null？ （（Entities.Image）（Container.DataItem））。描述：（（Entities.Image）（Container.DataItem））。Description.Length
> = 200？ （（Entities.Image）（的Container.DataItem））Description.Substring（0200）+ QUOT; ..." ：（（Entities.Image）（Container.DataItem））。描述％>

  &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; < / div>

  &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; < / div>

  &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; < / ItemTemplate>

  &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; < / asp：Repeater>

  &NBSP; &NBSP; &NBSP; < / DIV>

解决方案

你可以为描述div / item添加动态CSS，如果描述为空，则隐藏它。

示例代码：

< div class ="<％＃（（Entities.Image）（Container.DataItem））。Description.Length！= 0？ "说明字幕" ："Desc-Hide" ％>"> 

。Desc-Hide {
 display：none; 
} 

最好的问候，

Lee

How to Show images in slide show with description in the below of the image if exist.

I have a div with class(background black color).inside there is a code for description to add it to every image if exist in the properties.

Default i am showing top 12 images form the library.

Requirement is want to hide description div if description doesn't exist to even single image.

Or

i have to show description block to images only if any one of the image having Description metadata.Otherwise have to hide it.

Could you please help?

I am providing my .ascx design below.

<div class="slideshow">
            <asp:Repeater ID="repslide" runat="server">
                <ItemTemplate>
                    <div class="item">
                        <img class="img-responsive" src='<%# ((Entities.Image)(Container.DataItem)).Url %>?ID=10'>
                        <div class="Desc-caption ">
                            <%# ((Entities.Image)(Container.DataItem)).Description == null? ((Entities.Image)(Container.DataItem)).Description : ((Entities.Image)(Container.DataItem)).Description.Length >=200? ((Entities.Image)(Container.DataItem)).Description.Substring(0,200)+"..." : ((Entities.Image)(Container.DataItem)).Description %>
                        </div>
                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </div>

解决方案

Hi,

You could add dynamic CSS for description div/item, if description is empty, hide it.

Sample code:

<div class="<%# ((Entities.Image)(Container.DataItem)).Description.Length != 0 ? "Desc-caption" : "Desc-Hide" %>">

.Desc-Hide{
display:none;
}

Best Regards,

Lee

这篇关于如何在幻灯片放映中显示图像，如果存在，则在图像的下方显示。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！