Группировка изображений для отображения в LightBox

У меня есть веб-страница ASP.Net, и я создал настраиваемый элемент управления, основная цель которого состоит в том, чтобы быть «элементом» списка, отображаемым на панели главной страницы (asp:Panel), вот этот элемент управления списком:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="cListItem.ascx.cs"       Inherits="CatPro.Presentation.UserControls.CatalyticItem" %>
<script src="../Scripts/jquery-1.10.2.min.js"></script>
<script src="../Scripts/lightbox-2.6.min.js"></script>
<link href="../Css/lightbox.css" rel="stylesheet" />

</style>
<table class="MainFrame" border="1" runat="server">
  <tr>
    <td runat="server">
  <table class="MainFrame">

    <tr>
      <td class="CatImageColumn" rowspan="5">            
        <asp:DataList ID="DataList1" runat="server" 
              RepeatColumns="5" 
              RepeatDirection="Horizontal" 
              RepeatLayout="Flow">
          <ItemTemplate>
            <a id="ImageLink"  href='<%# Eval((string)Container.DataItem) %>' data-lightbox="image-1">
               <img id="Img1" src="<%# (string)Container.DataItem %>" width="150" height="150">
             </a>
          </ItemTemplate>
        </asp:DataList>                  
      </td>
      <td class="LinkHeader" colspan="5">
        <asp:LinkButton ID="hyperlinkDescription" runat="server" Font-Bold="True" Font-Size="X-Large">Item Description Link</asp:LinkButton>
      </td>
      <td class="LinkHeader">
        </td>
    </tr>
    <tr>
      <td class="FirstRowLabel">
        <asp:Label ID="lblYear" runat="server" Text="Year"></asp:Label>
      </td>
      <td class="FirstRowText">
        <asp:Label ID="txtYear" runat="server"></asp:Label>
      </td>
      <td class="SecondRowLabel">
        <asp:Label ID="lblRasCategory" runat="server" Text="RAS Category:"></asp:Label>
      </td>
      <td class="SecondRowText">
        <asp:Label ID="txtRASCategory" runat="server"></asp:Label>
      </td>
      <td class="ThirdRowLabel">
        <asp:Label ID="lblValue89" runat="server" Text="Value:" ForeColor="Green"></asp:Label>
      </td>
      <td class="ThirdRowText">
        <asp:Label ID="txtValue89" runat="server" ForeColor="Green">$0</asp:Label>
      </td>
    </tr>
    <tr>
      <td class="FirstRowLabel">
        <asp:Label ID="lblMake" runat="server" Text="Make:"></asp:Label>
      </td>
      <td class="FirstRowText">
        <asp:Label ID="txtMake" runat="server"></asp:Label>
      </td>
      <td class="SecondRowLabel">
        <asp:Label ID="lblPMCategory" runat="server" Text="PowerMount Category:"></asp:Label>
      </td>
      <td class="SecondRowText">
        <asp:Label ID="txtPMCategory" runat="server"></asp:Label>
      </td>
      <td class="ThirdRowLabel">
        <asp:Label ID="lblValue100" runat="server" Text="Value:" ForeColor="Green"></asp:Label>
      </td>
      <td class="ThirdRowText">
        <asp:Label ID="txtValue100" runat="server" ForeColor="Green">$0</asp:Label>
      </td>
    </tr>
    <tr>
      <td class="FirstRowLabel">
        <asp:Label ID="lblModel" runat="server" Text="Model:"></asp:Label>
      </td>
      <td class="FirstRowText">
        <asp:Label ID="txtModel" runat="server"></asp:Label>
      </td>
      <td class="SecondRowLabel">
        <asp:Label ID="lblOENumber" runat="server" Text="OE Number:"></asp:Label>
      </td>
      <td class="SecondRowText">
        <asp:Label ID="txtOENumber" runat="server"></asp:Label>
      </td>
      <td class="ThirdRowLabel"></td>
      <td class="ThirdRowText"></td>
    </tr>
    <tr>
      <td class="FirstRowLabel">
        <asp:Label ID="lblSubModel" runat="server" Text="Sub Model:"></asp:Label>
      </td>
      <td class="FirstRowText">
        <asp:Label ID="txtSubModel" runat="server"></asp:Label>
      </td>
      <td class="SecondRowLabel">
        &nbsp;</td>
      <td class="SecondRowText">
        &nbsp;</td>
      <td class="ThirdRowLabel">&nbsp;</td>
      <td class="ThirdRowText">&nbsp;</td>
    </tr>
  </table>
</td>

Для каждой записи, возвращенной из вызова базы данных, один из этих элементов управления добавляется к элементу управления Panel на главной странице. Каждый элемент может иметь более 1 изображения, поэтому я сохраняю их в asp:DataList в коде:

  string[] images = listCImages.Select(c => c.ImagePath).ToArray();
  DataList1.DataSource = images;
  DataList1.DataBind();

В идеале я хотел бы отобразить первое изображение в наборе данных на элементе управления, а затем при нажатии на элемент управления LightBox отобразить связанную коллекцию изображений (щелкнув набор в окне LightBox).

Это раздел, в котором используется элемент управления LightBox. У меня возникли проблемы с настройкой.

<asp:DataList ID="DataList1" runat="server" 
              RepeatColumns="5" 
              RepeatDirection="Horizontal" 
              RepeatLayout="Flow">
          <ItemTemplate>
            <a id="ImageLink"  href='<%# Eval((string)Container.DataItem) %>' data-lightbox="image-1">
               <img id="Img1" src="<%# (string)Container.DataItem %>" width="150" height="150">
             </a>
          </ItemTemplate>
        </asp:DataList>

Я могу загрузить и отобразить одно изображение без проблем, но мои попытки выполнить вышеупомянутое не были такими простыми. Это правильный подход? Какие изменения я должен сделать, чтобы получить желаемый результат?


javascript asp.net lightbox2
person devHead    schedule 17.03.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я временно решил это, сделав что-то вроде взлома (на мой взгляд, неаккуратный метод)...

Сначала я динамически создал свое отображаемое изображение:

  //Create a HyperLink control
  HyperLink linkWrapper = new HyperLink();
  linkWrapper.ID = catId.ToString();

  //assign a lightbox attribute
  linkWrapper.Attributes.Add("rel", string.Format("lightbox[{0}]", catId.ToString()));
  linkWrapper.Attributes.Add("title", string.Format("Image(s) for  {0}", catId.ToString()));

  //The path to my local image
  linkWrapper.NavigateUrl = imagePath;

  //next, create a display image
  Image mainImage = new Image();
  mainImage.Height = 128;
  mainImage.Width = 128;
  mainImage.ID = "img_" + catId.ToString();
  mainImage.ImageUrl = imagePath;

  //wrap the link around the image
  linkWrapper.Controls.Add(mainImage);

  //dynamically add display control to td cell
  CatImages.Controls.Add(linkWrapper);

Затем, если были какие-либо другие связанные изображения, я добавил их, например:

foreach (catImage cat in listCatImages) //custom generic list iteration
{
  //create a HyperLink control
  HyperLink hl = new HyperLink();
  hl.Attributes.Add("rel", string.Format("lightbox[{0}]", catalyticConverterId.ToString()));
  hl.Attributes.Add("title", "My Cats");
  hl.NavigateUrl = cat.ImagePath;

  //add just the link to the td cell
  CatImages.Controls.Add(hl);
}

Теперь, когда я нажимаю «Показать изображение», LightBox выбирает группу изображений и позволяет мне перемещаться по ним (и ссылки не видны).

person devHead    schedule 17.03.2014