技術論壇

當 CommunityServer 遇上 LightBox (下)

在上一篇，講解了如何在 tinymce 上使用 lightbox ，但只有 blog 才能使用 tinymce 顯示 lightbox ，在多媒體 ( media ) 便派不上用場

如果要在多媒體使用 lightbox ，只有從 Theme ( aspx 檔案 ) 下手，CommunityServer 上，主要是靠 CSMedia:MediaGalleryPostData 物件顯示與建立聯結，但很不幸的，建立聯結這個屬性 LinkTo="View" 此類，並無法擴充讓他支援 lightbox ，如果要支援，唯有修改 SDK 或是自己建立一個新的 Control ，這裡便從講解 SDK 開始

當有 SDK 環境後，開啟CS2008.5_SP2_4.1.40407.4157.sdk\Source\CommunityServer.MediaGalleries\Controls\MediaGalleryPost\MediaGalleryPostData.cs 檔案，在 104 行左右便可見到此程式碼

case MediaGalleryPostLinkTo.View:
                            link = new HyperLink();

                            if (mediaGallery.Hub == null)
                                link.NavigateUrl = MediaGalleryUrls.Instance().ViewMediaGalleryPost(mediaGallery.ApplicationKey, post.PostID);
                            else
                                link.NavigateUrl = MediaGalleryUrls.Instance().HubMediaGalleryPost(mediaGallery.Hub.ApplicationKey, post.PostID);

                            break;

我並不建議直接修改原本的 LinkTo ，建議加一個 lightbox ，在 HyperLink 要加入 Rel 與 Title 屬性很簡單

link.Attributes.Add("rel", "lightbox");

再加入考慮是否為圖片再使用 lightbox ，整個 LinkTo 程式就如下列

case MediaGalleryPostLinkTo.LightBox:
							link = new HyperLink();

							if (post.Attachment.IsImage)
							{
								link.Attributes.Add("rel", "lightbox");
								link.Attributes.Add("title", post.Subject);
								link.NavigateUrl = post.Attachment.Url;
							}
							else
							{
								if (mediaGallery.Hub == null)
									link.NavigateUrl = MediaGalleryUrls.Instance().ViewMediaGalleryPost(mediaGallery.ApplicationKey, post.PostID);
								else
									link.NavigateUrl = MediaGalleryUrls.Instance().HubMediaGalleryPost(mediaGallery.Hub.ApplicationKey, post.PostID);
							}

							break;

當完成後，重新編譯即可使用 LinkTo="lightbox" 來顯示多媒體 lightbox ，以下就是顯示的範例

<CSMedia:MediaGalleryPostList runat="server" ID="MediaInformation" ShowHeaderFooterOnNone="true">
                                        <QueryOverrides PageSize="5" SortBy="PostDate" SortOrder="Descending" IncludeCategories="false"
                                            PageIndex="0" IsAggregate="false" IsCommunityAggregatedOnly="false" />
                                        <HeaderTemplate>
                                            <ul class="CommonContentBoxList">
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <CSMedia:MediaGalleryPostData ID="MediaGalleryPostData1" runat="server" Property="Subject"
                                                TruncateAt="50" LinkTo="LightBox" Tag="LI">
												<contenttemplate>
													<CSMedia:MediaGalleryPostViewer ID="MediaGalleryPostViewer1" runat="server" Width="1" Height="1" ViewType="Preview" />
												</contenttemplate>
                                            </CSMedia:MediaGalleryPostData>
                                        </ItemTemplate>
                                        <NoneTemplate>
                                            <li>
                                                <CSControl:ResourceControl runat="server" ResourceName="Home_NoFilesUploaded" />
                                            </li>
                                        </NoneTemplate>
                                        <FooterTemplate>
                                            </ul></FooterTemplate>
                                    </CSMedia:MediaGalleryPostList>

效果就會如本站首頁的顯示方式，按下圖片後啟用 lightbox 顯示圖片