How does it work

Jul 23, 2009 at 9:12 PM

Obviously I can'r get it to work properly.

Is the the code:

<umbraco:Macro folderId="[#Gallery]" ThumbWidth="100" ThumbHeight="100" LightBoxWidth="600" LightBoxHeight="600" Alias="Designit.Gallery" runat="server"></umbraco:Macro>

supposed to be hard coded into the template?

How do I make the macro work on any pages?

It makes no sense, that the macro should be in the templates, and coded to a specific folder.

/Verakso

Aug 9, 2009 at 6:07 PM

When I install the package. It works. But I will only display the images as thumbnails. When I click on the pictures they will open in a new tab and not with the lightbox effect.

In the demo page. There is a small script element that my umbraco does not add automatically.

If I add it manually it will only give me a scripting error. So maybe some of the script files are not were they should be but I can figure out which.

<script type="text/javascript">
$(function() {
$('#diGallery a').lightBox();
});
</script>
Jan 23, 2010 at 10:02 PM

Here are the steps that worked for me...

  • Download the codeplex package
  • Under Umbraco Developer section, select Packages, Install Local Package and follow the prompts.
  • Add a Property to your document type, Gallery as a Media Picker
  • Under Templates add the following lines to your template:

<%@ Master Language="C#" MasterPageFile="/masterpages/Master.master" AutoEventWireup="true" %>
<asp:content ContentPlaceHolderId="BodyContent" runat="server">
<script src="/scripts/Designit.Gallery/jquery.lightbox-05.pack.js" type="text/javascript"></script>
<script src="/scripts/Designit.Gallery/jquery.lightbox-0.5.js" type="text/javascript"></script>
<umbraco:Macro folderId="[#Gallery]" ThumbWidth="100" ThumbHeight="100" LightBoxWidth="600" LightBoxHeight="600" Alias="Designit.Gallery" runat="server"></umbraco:Macro>
<script type="text/javascript">
$(function() {
  $('#diGallery a').lightBox();
});
</script>
</asp:content>

  • Under Media, create a folder say "MyGallery" and add images to this folder
  • Under Content create a document with this document type and template
  • Set the property Gallery to the folder "MyGallery"
  • Publish and Preview

This should present your gallery on the document and selecting an image should load lightbox effects.

Hope this helps anyone having issues working with this project.

Keith Duncan

Mar 19, 2010 at 6:53 AM
Edited Mar 19, 2010 at 6:55 AM

Hi,

I have installed "Designit_Gallery_1.0.1" package.

1) Created document type with "media Picker".
2) In Template i have inserted macro
<umbraco:Macro folderId="Images" ThumbWidth="100" ThumbHeight="100" LightBoxWidth="500" LightBoxHeight="500" Alias="Designit.Gallery" runat="server"></umbraco:Macro>

and followed above step
3) i am not clear about step "Set the property Gallery to the folder "MyGallery" "

i am not getting anything in the page preview. Can u suggest.

Coordinator
Mar 19, 2010 at 8:16 AM
Edited Mar 19, 2010 at 8:17 AM

All you have to do is to select a folder in the the media section with the mediapicker.

When you created your document type, you gave your media picker an alias. That alias you just insert into folderId of the macro - like this:
<umbraco:Macro folderId="[#mediaPickerAlias]" ThumbWidth="100" ThumbHeight="100" LightBoxWidth="500" LightBoxHeight="500" Alias="Designit.Gallery" runat="server"></umbraco:Macro>

 

Hope this helps?

Mar 19, 2010 at 8:53 AM

ya it worked fine with your suggestion, thank you for the help..!

 

Oct 6, 2010 at 10:17 AM
Edited Oct 6, 2010 at 12:52 PM

@raly76:

Although the code is in the Page_Load for rendering the correct script tags, for some reason asp.net is ignoring the registerstartupscript and registerclientscriptinclude method calls completely.

I suspect it has something to do with umbraco, but not sure yet as to what.

 

Update: I changed the page_load code to use the umbraco.library.Register* methods instead:

 

            umbraco.library.RegisterJavaScriptFile("jquery.lightbox-05.pack.js", "/scripts/Designit.Gallery/jquery.lightbox-05.pack.js");
            umbraco.library.RegisterJavaScriptFile("jquery.lightbox-0.5.min.js", "/scripts/Designit.Gallery/jquery.lightbox-0.5.js");

and that worked, also doing

            umbraco.library.RegisterStyleSheetFile("jquery.lightbox-0.5", "/css/Designit.Gallery/jquery.lightbox-0.5.css"); 

instead of creating the new HtmlLink and adding it to the head.

However, still can't get the galleryInit script block to render just yet.

 

Update #2: Well, finally figured out what was wrong.

I WAS MISSING THE <form runat="server"></form> TAGS!!!

duh.

Dec 22, 2010 at 8:31 PM

Hi,

I installed the designit gallery package 1.1.1 on my umbraco 4.5.2 with ImageGen 2.0.1.

The modal popup only works the first couple of times then I just get linked to something like : ./umbraco/ImageGen.ashx?image=/media/555/something.jpg&width=600&height=600&constrain=true

Can't figure out what is going on...

Dec 27, 2010 at 2:56 AM

I have tried installing both 1.1.1 and 1.1.0 on Umbraco 4.5.2 and I'm getting the following scripting error in both versions:

"Object doesn't support this property or method"

It is happening on this line:

 $('#diGallery a').lightBox();

Can someone help me figure out what is causing this and how to fix it?

Mr Peterson, I suspect you are probably getting the same scripting error.  In IE, you can look down in the bottom left corner and see if the dreaded "Error on page" is present.

 

Coordinator
Dec 27, 2010 at 2:56 AM
I am out of the office and will be back again on Monday 03 January 2011.

In case of urgent matter, please try my mobile at +45 26 72 22 00.

Merry Christmas and Happy New Year

--
Kind regards

Rasmus Lynggaard
Senior System Developer

Direct +45 87 30 90 72
Mobile +45 26 72 22 00
Office +45 70 27 77 00
skype raly360

Designit . Strategic Design Consultancy
Dec 31, 2010 at 2:46 PM

Ok, I got it to work, so I know what the problem is.  That bad news is it breaks something else.  My issue is a script conflict.  I have a slide show that references this jquery script which breaks the Designit Gallery:

http://code.jquery.com/jquery-1.4.2.min.js

When I remove the reference to the above script, all is well, but then it breaks my slide show!  I guess I'll need to come up with a different solution for the slide show...