當 CommunityServer 遇上 LightBox (下)

Wednesday, 3 February 2010 08:55 by admin

在上一篇,講解了如何在 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 顯示圖片