Forums (Obsolete)

Member

eng.rupalikulkarni-gmail - 6/29/2012 4:25:44 PM

Display image gallery using repeater

Hi,

I have Image Gallery folder in which there are 3 folder's having different images.
I want to display folder name and images within that folder, But only 3 images per folder should get displayed on the page , rest of images should be visible in lightbox gallery.

I am using repeater to display images and adding HTML head webpart to include external lighbox jquery files.

But the problem is repeater is displaying all images in each folder.

Following is the transfomation code for repeater...

LightviewKiller

<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 = "/Images/Gallery/Main-Bar";
this.GalleryGrid.OrderBy = "NodeOrder";
this.GalleryGrid.TransformationName = "CMS.File.LightboxKiller";
this.GalleryGrid.RepeatColumns = 3;

this.GalleryGrid.ClassNames = "CMS.File";
this.GalleryGrid.ZeroRowsText = "<p>No Images Available</p>";
this.GalleryGrid.ReloadData(true);
}
</script>

LightboxKiller

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

Can someone please help me with this?

Thanks!

Kentico Developer

kentico_ivanat - 7/1/2012 4:38:46 PM

RE:Display image gallery using repeater

Hi,

you could use two nested repeaters web part. The first one would select folders (cms.folder) document type.

Then in its transformation you could use code similar to the following:


<%@ 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>

you could configure where condition in the nested repeater/lightbox web part. Something like:

NodeID NOT IN (SELECT TOP 3 NodeID FROM View_CMS_Tree_Joined_Versions)

This way first 3 items/files would not be selected. As a nested control you can use a repeater web part with your external scripts.

Best regards,
Ivana Tomanickova

Member

eng.rupalikulkarni-gmail - 7/2/2012 10:59:29 AM

RE:Display image gallery using repeater

Hi,

Thank you very much for your reply...

I used nested repeater, But i want to display only first 3 images from each folder...

I used below query at where condition of repeater,

NodeID IN (SELECT TOP 3 NodeID FROM View_CMS_Tree_Joined_Versions)

But it is not giving me any result.

if i use, NodeID NOT IN (SELECT TOP 3 NodeID FROM View_CMS_Tree_Joined_Versions) this query

It is displaying all images in each folder..

Can you please help me?

Thanks!


Kentico Developer	kentico_ivanat - 7/5/2012 10:06:15 PM RE:Display image gallery using repeater Hi, try to select NodeIDs from the View_CONTENT_File_Joined + you need to play a little with where condition, i.e. you need to add: <%# NodeAliasPath LIKE encodedAmp" +Eval("NodeAliasPath") + "/%encodedAmp" %> encodedAmp you can find here: encoded characters (the one with 39) Best regards, Ivana Tomanickova