Forums (Obsolete)

Member

eng.rupalikulkarni-gmail - 6/5/2012 9:20:51 AM

Repeater with lightbox problem

Hi,

I did following steps;

1. Created page using lightbox gallery template.
2. Added repeater
3. applied LightviewGallery transformation code is as below;
<h2><%# Eval("DocumentName") %></h2>
<div class="galleryWrapper">
<cms:CMSDataList ID="GalleryGrid" runat="server" />
</div>

<script runat="server">
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
this.GalleryGrid.Path = Eval<string>("NodeAliasPath") + "/%";
//this.GalleryGrid.Path = "/Gallery-(1)";
this.GalleryGrid.OrderBy = "NodeOrder";
this.GalleryGrid.TransformationName = "CMS.File.lightboxplummers";
this.GalleryGrid.RepeatColumns = 4;
//this.GalleryGrid.QueryName="CMS.Module.selectTopN";
this.GalleryGrid.ClassNames = "CMS.File";
this.GalleryGrid.ZeroRowsText = "<p>No Images Available</p>";
this.GalleryGrid.ReloadData(true);
}
</script>

4. lightboxplummers transformation which is called within above transformation is as below;

<div style="width: 170px; height: 150px; margin: 3px; background: url(<%# GetFileUrl("FileAttachment") %>?maxsidesize=270) no-repeat center center;" >
<a href="<%# GetDocumentUrl() %>" rel="gallery[<%# Eval("firstUrl") %>]"class="lightview" title="<%# Eval("FileDescription", true) %>" style="display: block; width: 170px; height: 140px;"> </a>
</div>

5. Added HTML head webpart at the page having following references;
<link rel="stylesheet" href="~/CMSScripts/lightview/lightview.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" src="~/CMSScripts/prototype.js"></script>
<script type="text/javascript" src="~/CMSScripts/scriptaculous/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="~/CMSScripts/lightview/lightview.js"></script>

6. My all images are placed inside Images/Gallery/Test1,mages/Gallery/Test2 folders

7. I want to display images from folder wise, For which i did above steps.

8. Images are displaying properly according to transformation , But when ii click on images lightbox appearance is not there.

Can someone please help me?

Thanks!

Kentico Developer

kentico_ivanat - 6/6/2012 6:58:23 AM

RE:Repeater with lightbox problem

Hi,

you can use Lightbox gallery web part for this purpose and you do not need to play with above configuration. A working example you can find on a default Corporate site in the section: /Examples/Web Parts/Listings and viewers/Images/Lightbox gallery

It displays images from your project folder with a lightbox effect.

Best regards,
Ivana Tomanickova

Member

eng.rupalikulkarni-gmail - 6/6/2012 8:23:45 AM

RE:Repeater with lightbox problem

Hi,

Thanks for your reply..

I want to display the images category wise with lightbox effect on page like;

Folder Name 1:
Images icons

Folder Name 2:
Images icons

Folder Name 3:
Images icons

For which i have used repeater control. So that next time when i will add
Folder Name 4 with images in that it, will automatically show that on page.

In the example at the corporate site, It is straight forward displaying all images from Products/


Member	eng.rupalikulkarni-gmail - 6/6/2012 8:48:32 AM RE:Repeater with lightbox problem Hi, Also i want to display only 4 images per category, rest of images i want to display only in lightbox for each category.. Can you please suggest me something?

Kentico Developer

kentico_ivanat - 6/12/2012 5:06:01 AM

RE:Repeater with lightbox problem

Hi,

here is a code example which could help.

Imagine you have a structure:

images (cms.menuitem - document with a repeater web part)
-- aaa (cms.folder)
--- image1
--- image2
-- bbb (cms.folder)
---image3

In the main repeater you can configure Path (/images/%) and Document types (cms.folder) properties.

In transformation property you can use following code so each set of images will be displayed under its folder name:


<%@ Register Src="~/CMSWebParts/Viewers/Effects/lightbox.ascx" TagName="lightbox"
    TagPrefix="uc1" %>


<b><%# Eval("NodeName")%> </b>
<p>
<uc1:lightbox runat="server" ID="folderGallery" TransformationName="CMS.File.Lightbox"  
Path='<%# Eval("NodeAliasPath").ToString()+ "/%"%>' EnableViewState="false"  ClassNames="cms.file"/>
</p>

<script runat="server">

protected void Page_PreRender(object sender, EventArgs e)
{
   folderGallery.ReloadData();
}
</script>

Best regards,
Ivana Tomanickova