Use this Code for add function to collapse the album

Feb 10, 2012 at 2:35 AM
Edited Feb 10, 2012 at 2:45 AM

For the version 01.06, the last version compatible with DNN 5, I added a function to collapse all the albums, this feature is very handy when you have a long list of albums.

you only need edit ViewLightbox.ascx file, and use the "jquery Collapse" you can download from http://webcloud.se/code/jQuery-Collapse/

 

This is the code:

<script src="http://webcloud.se/code/jQuery-Collapse/jquery.collapse-0.9.2.min.js"></script>

<asp:Repeater ID="rptGallery" runat="server">
    <ItemTemplate>
        <div class="wns_lightbox_wrapper wns-showlater">
            <a class="EditAlbumLink" href='<%#GetEditUrl(DataBinder.Eval(Container.DataItem, "LightboxId"))%>'><img src="" alt='<%=Me.GetLocalizedString("EditImage.Alt")%>' title='<%=Me.GetLocalizedString("EditImage.Alt")%>' class="wns-image EditImage" /></a>
            <a class="ReorderLink" href='<%#GetReorderUrl(DataBinder.Eval(Container.DataItem, "LightboxId"))%>'><img src="" alt='<%=Me.GetLocalizedString("OrderImage.Alt")%>' title='<%=Me.GetLocalizedString("OrderImage.Alt")%>' class="wns-image OrderImage" /></a>
            
			<div class="collapse<%#Server.HtmlDecode(DataBinder.Eval(Container.DataItem, "LightboxId"))%>">
				<h3><%#Server.HtmlDecode(DataBinder.Eval(Container.DataItem, "GalleryName"))%></h3>
				<div class="Normal">
					<p class="Normal wns_lightbox_description"><%#Server.HtmlDecode(DataBinder.Eval(Container.DataItem, "GalleryDescription").ToString)%></p>
					<%#Me.GetImageFiles(DataBinder.Eval(Container.DataItem, "LightboxId"), DataBinder.Eval(Container.DataItem, "GalleryFolder"), DataBinder.Eval(Container.DataItem, "GalleryName"))%>
				</div>
			</div>
			
			<script language="javascript" type="text/javascript">

				$(".collapse<%#Server.HtmlDecode(DataBinder.Eval(Container.DataItem, "LightboxId"))%>").collapse({show: function(){
						this.animate({
							opacity: 'toggle', 
							height: 'toggle'
						}, 300);
					},
					hide : function() {
						
						this.animate({
							opacity: 'toggle', 
							height: 'toggle'
						}, 300);
					}
				});
			</script>
		</div>
    </ItemTemplate>
</asp:Repeater>

 

Coordinator
Feb 14, 2012 at 5:14 AM

Very cool!  I might add this as an option in a future release.

Coordinator
Feb 14, 2012 at 5:14 AM
This discussion has been copied to a work item. Click here to go to the work item and continue the discussion.
Mar 15, 2012 at 3:54 AM
hismightiness wrote:

Very cool!  I might add this as an option in a future release.


Hello, I've been wracking my brain on how to get this collapse working on the newest .10 edition of the lightbox module, however, I've had no success other than breaking and repairing the module.  How could I go about collapsing all the images and show just the name of the album, until clicked, then have it expand, to show all the images in the album?  I am somewhat new to jquery, and DNN in general, so I'll likely need baby steps on how to do this.

Thanks for all your help.

Fernando