Hi Steve

Tyr making use of this

var trans = string.IsNullOrEmpty(Parameter.transition) ? "transition:elastics" : Parameter.transition;
  
        
    @:$(document).ready(function() {
        @:var $gallery = $('a.slideGroup').colorbox({rel:'slideGroup', @trans , opacity:"0.5"});

        @:$("a#openGallery").click(function(e){
            @:e.preventDefault();
            @:$gallery.eq(0).click();
        });
    });
    

and remember to add the <script> tag in your template

<script>
        <umbraco:Macro transition="sometransition" Alias="yourCshtml" runat="server"></umbraco:Macro>
    </script>

Fuji,

Thanks! Question: So every template that might need to use this lightbox macro will need the script tag with the macro placeholder? And what if I needed more than one value key eg. transition="fade", slideshow="true", speed="300"?

Also, just added your code to my razor, and I am getting the error; ":" is not valid at the start of a code block. Only identifiers, keywords, comments, "(" and "{" are valid.

Hi Steve,

Yes i will depend what content page will need to make use of the Colorbox. Or what you can eventually do is make something like this when structuring your templates.

- Main-Colorbox-Template
-- Inner-Colorbox-Template
-- Slider-Colorbox-Template

On the Main-Colorbox-Template you can add a placeHolder

<asp:Content ContentPlaceHolderId="mainColorBox" runat="server">    
   <script>
            <asp:ContentPlaceHolder Id="innerColorBox" runat="server">
                <!-- Insert default "innerColorBox" markup here -->
            </asp:ContentPlaceHolder>

    
            <asp:ContentPlaceHolder Id="sliderColorBox" runat="server">
                <!-- Insert default "sliderColorBox" markup here -->
            </asp:ContentPlaceHolder>
   </script>
</asp:Content>

In -- Inner-Colorbox-Template you will have your macros with all the parameter value you want to use and a different one -- Slider-Colorbox-Template.

For the other parameter try something like this

var slideshow =string.IsNullOrEmpty(Parameter.slideshow)?"slideshow=true":Parameter.slideshow;
var fade =string.IsNullOrEmpty(Parameter.fade)?"transition=fade":Parameter.fade;
var speed =string.IsNullOrEmpty(Parameter.speed)?"speed=300":Parameter.speed;

Thanks again Fuji! I am still getting an error when using your javascript in my razor. Does it matter that I am using Web Forms and NOT Mvc? When I try to save It doesn't like the : after the @ ?

Can you try this instead and let me know if you are getting any error on saving the file, i just realise the if the paremeter transition has a value your js will failed since no transition is inserted.

@using umbraco;
@using System;
@using System.Collections.Generic;
@using umbraco.MacroEngines;

@{
    
    var trans = string.IsNullOrEmpty(Parameter.transition) ? "transition:elastics" : "transition:" + Parameter.transition;
    
        
    @:$(document).ready(function() {
        @:var $gallery = $('a.slideGroup').colorbox({rel:'slideGroup',@Html.Raw("'")@[email protected]("'"), opacity:"0.5"});

        @:$("a#openGallery").click(function(e){
            @:e.preventDefault();
            @:$gallery.eq(0).click();
        });
    });
    
}

It saves, but the javascript is showing up on the page as text. Here is a link to the page with the slideshow. And here is my razor:

@using umbraco;
@using System;
@using System.Collections.Generic;
@using umbraco.MacroEngines;
@inherits umbraco.MacroEngines.DynamicNodeContext

@{
    var trans = string.IsNullOrEmpty(Parameter.transition) ? "transition:elastic" : "transition:" + Parameter.transition;
    var slideshow = string.IsNullOrEmpty(Parameter.slideShow) ? "slideShow:false" : "slideShow:" + Parameter.slideShow;

    @:$(document).ready(function() {
        @:var $gallery = $('a.slideGroup').colorbox({rel:'slideGroup',@Html.Raw("'")@[email protected]("'"), opacity:"0.5"});

        @:$("a#openGallery").click(function(e){
            @:e.preventDefault();
            @:$gallery.eq(0).click();
        });
    });

}
@{
    if (!String.IsNullOrEmpty(Parameter.slideFolder)){
        var slideFolder = Library.MediaById(Parameter.slideFolder);
        var width = string.IsNullOrEmpty(Parameter.slideWidth) ? "350" : Parameter.slideWidth;
        var height = string.IsNullOrEmpty(Parameter.slideHeight) ? "auto" : Parameter.slideHeight;

    <ul class="gallery">
            @foreach(var slide in slideFolder.Children) {
            <li>
                <a class="slideGroup" href="@slide.umbracoFile" ><img src="/ImageGen.ashx?image=/media/1013416/slide-controls-overlay.png&width=@width&height=@height" /><img src="/ImageGen.ashx?image=
@slide.umbracoFile&width=@width&height=@height" /></a> 
            </li>
            }
    </ul>
            }
}

Something is wrong with my syntax. If you look at how the page is rendering, it's missing some of the end brackets and parenthases.

Also, I was thinking. Could I just write the <script></script> with the function call totally within the razor and not need to have the macro placeholder in the template?

You need to add the <script> </script> tag within the js for the first part.

Seperate the cshtml file.

1. for the js

2. for the slideFolder

Sorry, you lost me Fuji. I am confused.

Create 2 different cshtml file which you will add in your template.

The first one will be the js with the following

@using umbraco;
@usingSystem;
@usingSystem.Collections.Generic;
@using umbraco.MacroEngines;
@inherits umbraco.MacroEngines.DynamicNodeContext

@{
    var trans =string.IsNullOrEmpty(Parameter.transition)?"transition:elastic":"transition:"+Parameter.transition;
    var slideshow =string.IsNullOrEmpty(Parameter.slideShow)?"slideShow:false":"slideShow:"+Parameter.slideShow;

    @:$(document).ready(function(){
        @:var $gallery = $('a.slideGroup').colorbox({rel:'slideGroup',@Html.Raw("'")@trans@Html.Raw("'"), opacity:"0.5"});

        @:$("a#openGallery").click(function(e){
            @:e.preventDefault();
            @:$gallery.eq(0).click();
        });
    });

}

Which you will insert in the template

<asp:Content ContentPlaceHolderId="placeHolder" runat="server">   
      <script type="text/javascript">
         <umbraco:Macro transition="90" slideshow="true" Alias="yourColorboxJS" runat="server"></umbraco:Macro>
    </script>
    <umbraco:Macro  Alias="slideFolder" runat="server"></umbraco:Macro>
</asp:Content>

Your slideFolder cshtml file will look like this

@using umbraco;
@usingSystem;
@usingSystem.Collections.Generic;
@using umbraco.MacroEngines;
@inherits umbraco.MacroEngines.DynamicNodeContext

@{
    if(!String.IsNullOrEmpty(Parameter.slideFolder)){
        var slideFolder =Library.MediaById(Parameter.slideFolder);
        var width =string.IsNullOrEmpty(Parameter.slideWidth)?"350":Parameter.slideWidth;
        var height =string.IsNullOrEmpty(Parameter.slideHeight)?"auto":Parameter.slideHeight;

    <ul class="gallery">
            @foreach(var slide in slideFolder.Children){
            <li>
                <a class="slideGroup" href="@slide.umbracoFile"><img src="/ImageGen.ashx?image=/media/1013416/slide-controls-overlay.png&width=@width&height=@height"/><img src="/ImageGen.ashx?image=
@slide.umbracoFile&width=@width&height=@height"/></a> 
            </li>
            }
    </ul>
            }
}

Hope this helps

//fuji

I noticed that you included values for the macro placeholder. Won't that override the defaults you put in the variables?

var trans =string.IsNullOrEmpty(Parameter.transition)?"transition:elastic":"transition:"+Parameter.transition;
    var slideshow =string.IsNullOrEmpty(Parameter.slideShow)?"slideShow:false":"slideShow:"+Parameter.slideShow;

<umbraco:Macro transition="90" slideshow="true" Alias="yourColorboxJS" runat="server"></umbraco:Macro>

No it should be working. Or just add your own Macro. I added that added the slideshow parameter since i notice from your previous post you added this in your piece of code

var slideshow =string.IsNullOrEmpty(Parameter.slideShow)?"slideShow:false":"slideShow:"+Parameter.slideShow;

I had to re-write my code a bit to get it to work, but there is still an issue with the test on the variable slideshow. I can't use "string.IsNullOrEmpty(Parameter.slideShow)" because it is a boolean value, it will never be empty. What is another way of doing this?

@inherits umbraco.MacroEngines.DynamicNodeContext
<script src='/scripts/colorbox.js'></script>        
@{  
    var trans = string.IsNullOrEmpty(Parameter.transition) ? @Html.Raw("transition:'elastic'") : @Html.Raw("transition:'@Parameter.transition'");
    var slideshow = string.IsNullOrEmpty(Parameter.slideShow) ? @Html.Raw("slideshow:'false'") : @Html.Raw("slideshow:'true'");
    }
   <script>   
   $(document).ready(function() {
        var $gallery = $('a.slideGroup').colorbox({rel:'slideGroup',@trans, @slideshow, opacity:"0.5"});
        $("a#openGallery").click(function(e){
            e.preventDefault();
            $gallery.eq(0).click();
        });
    }); 
</script>

Change this from

var slideshow =string.IsNullOrEmpty(Parameter.slideShow)?@Html.Raw("slideshow:'false'"):@Html.Raw("slideshow:'true'");

to

var slideshow =Parameter.slideShow != "1"?@Html.Raw("slideshow:'false'"):@Html.Raw("slideshow:'true'");

For some reason, that doesn't work. It still is taking the default of "false"

@inherits umbraco.MacroEngines.DynamicNodeContext

<script src='/scripts/colorbox.js'></script>    

@{  
    var trans = string.IsNullOrEmpty(Parameter.transition) ? @Html.Raw("transition:'elastic'") : @Html.Raw("transition:'@Parameter.transition'");
    var slideshow = Parameter.slideShow != "1" ? @Html.Raw("slideshow:'false'") : @Html.Raw("slideshow:'true'");
    }
<script>   
   $(document).ready(function() {
        var $gallery = $('a.slideGroup').colorbox({rel:'slideGroup',@trans, @slideshow, opacity:"0.5"});
        $("a#openGallery").click(function(e){
            e.preventDefault();
            $gallery.eq(0).click();
        });
    }); 
</script>

Weird i just tried it out and works

var slideshow = Parameter.slideShow != "1" ? @Html.Raw("slideshow:'false'") : @Html.Raw("slideshow:'true'");

make sure you are not miss writing the ParameterAlias slideShow .

<umbraco:Macro transition="90" slideShow="1" Alias="js" runat="server"></umbraco:Macro>

Sorry, I was in a meeting.

I changed the way the razor got the properties from the javascript. I put the javascript enclosed with script tags in the top of the razor script and removed the macro placeholder and script tags from the template completly. Here is my final razor.

@using umbraco;
@using System;
@using System.Collections.Generic;
@using umbraco.MacroEngines;
@inherits umbraco.MacroEngines.DynamicNodeContext

<script src='/scripts/colorbox.js'></script>    


@{ 

    var trans = string.IsNullOrEmpty(Parameter.transition) ? @Html.Raw("transition:'elastic'") : @Html.Raw("transition:'@Parameter.transition'");
    var slideshow = (Parameter.slideShow == "1") ?  @Html.Raw("slideshow:true") : @Html.Raw("slideshow:false");     
}

<script>   
   $(document).ready(function() {
        var $gallery = $('a.slideGroup').colorbox({rel:'slideGroup',@trans, @slideshow, opacity:"0.5"});
        $("a#openGallery").click(function(e){
            e.preventDefault();
            $gallery.eq(0).click();
        });
    }); 
</script> 
@{
    if (!String.IsNullOrEmpty(Parameter.slideFolder)){
        var slideFolder = Library.MediaById(Parameter.slideFolder);
@*      var slideTitle = Library.MediaById(Parameter.slideTitle); not used - would need to be looped through the number of slided in the slideFolder *@
        var width = string.IsNullOrEmpty(Parameter.slideWidth) ? "350" : Parameter.slideWidth;
        var height = string.IsNullOrEmpty(Parameter.slideHeight) ? "auto" : Parameter.slideHeight;
    <ul class="gallery">
            @foreach(var slide in slideFolder.Children) {
            <li>
                <a class="slideGroup" href="@slide.umbracoFile" ><img src="/ImageGen.ashx?image=/media/1013416/slide-controls-overlay.png&width=@width&height=@height" /><img src="/ImageGen.ashx?image=
@slide.umbracoFile&width=@width&height=@height" /></a> 
            </li>
            }
    </ul>
            }
}

Did you get it working ??

Sorry Fuji, YES, I did! Using the razor in the last post you can see it here. Thanks for pointing me in the right direction!

Cool Glad i could help you out.

//fuji

is working on a reply...