Products

Evoq Content Overview Content Creation Workflow Asset Management Mobile Responsive Personalization Content Analytics SEO Integrations Security Website PerformanceEvoq Engage Overview Community Management  Dashboard  Analytics  Member Profile Gamification Advocate Marketing Community Engagement  Ideas  Answers  Discussions  Groups  Wikis  Events Mobile ReadyDNN Support PackagesEvoq: CMS FeaturesEvoq OnDemandCompare DNN's CMS Products

Solutions

Content Management SystemMulti-Channel PublishingDigital MarketingOnline Community ManagementIntranet Software SolutionOur CustomersPrime

Resources

Test DrivesSchedule A DemoDocumentation CenterWebinarsWhite PapersProduct ManualsRequest PricingData SheetsCase StudiesEvoq Preferred Products Content Management Ecommerce Forms Identity Management and Authentication Site Management Social Themes

Partners

DNN Partners Partner Directory Become a DNN Partner Partner Program Overview  Hosting  Implementation  ISV  Training  Competencies

Community

Participate Ask a Question Forums Community Showcase DNN MVP  Program Overview  Lifetime MVPs  Honorary MVPs Subscribe to DNN Digest Advisory Groups  Awareness Advisory Group  Developer Advisory Group  Partner Advisory Group  Technology Advisory GroupLearn Documentation Wiki Community Blog Video Library Project History Development RoadmapDownload DNN Store Language Packs Manuals Nightly BuildsSecurity Policies Security Center

Blog

About

News Press Releases News Coverage Press KitCareersContact DNN

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen
HomeHomeDevelopment and...Development and...Building ExtensionsBuilding ExtensionsModulesModulesproblems incorporating shadowbox into my moduleproblems incorporating shadowbox into my module
Previous
 
Next
New Post
3/6/2011 1:54 PM
 
Steve

Joined: 4/29/2008
Posts: 3
Hello,
I am somewhat new to dotnetnuke module development, and even newer to jQuery.  I am working on building a module for my brother's website and I want to be able to display photographs in a lightbox.  I have used the following code in the module's Page_Load method:

' Register jQuery and shadowbox
DotNetNuke.Framework.jQuery.RequestRegistration()

Dim shadowbox_folder As String = "/dnn/Resources/Shared/Scripts/shadowbox-3.0.3/"

'<link rel="stylesheet" type="text/css" href="shadowbox.css">
Dim shadowbox_stylesheet = New HtmlGenericControl("link")
shadowbox_stylesheet.Attributes.Add("rel", "stylesheet")
shadowbox_stylesheet.Attributes.Add("type", "text/css")
Page.Header.Controls.Add(shadowbox_stylesheet)

'<script type="text/javascript" src="shadowbox.js"></script>
Dim shadowbox_script = New HtmlGenericControl("script")
shadowbox_script.Attributes.Add("type", "text/javascript")
shadowbox_script.Attributes.Add("src", shadowbox_folder & "shadowbox.js")
Page.Header.Controls.Add(shadowbox_script)

'<script type="text/javascript">Shadowbox.init();</script>
Dim shadowbox_initiateScript = New HtmlGenericControl("script")
shadowbox_initiateScript.Attributes.Add("type", "text/javascript")
shadowbox_initiateScript.InnerHtml = ";Shadowbox.init();"
Page.Header.Controls.Add(shadowbox_initiateScript)

'------ end code --------------

I believe that this is working correctly because when dotnetnuke loads the page with my module in it, the following html is on the page (many lines of code removed to focus only on shadowbox):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml...">
<head id="Head">
<script type="text/javascript" src="/dnn/Resources/Shared/Scripts/jquery/jquery.min.js" >
<link rel="stylesheet" type="text/css" href="/dnn/Resources/Shared/Scripts/shadowbox-3.0.3/shodowbox.css"></link>
<script type="text/javascript" src="/dnn/Resources/Shared/Scripts/shadowbox-3.0.3/shadowbox.js"></script>
<script type="text/javascript">Shadowbox.init();</script>
</head>

<body id="Body">
<a id="dnn_ctr390_ViewShowroomProduct_lnkProductImage" href="/dnn/Portals/0/Showroom/390/Source/IMG_0006.JPG" rel="shadowbox">
<img id="dnn_ctr390_ViewShowroomProduct_imgProductImage" src="/dnn/Portals/0/Showroom/390/Primary/IMG_0006.JPG" style="border-width:0px;" />
</a>
</body>

'----------- end html excerpt  ---------------

The html leads me to believe that this should work.  And the folder "shadowbox-3.0.3" is in the location referenced by the script source.  Is there anything else that I need to do to get this to work?
 
New Post
3/7/2011 11:16 AM
 
Kelly Edvalson


Joined: 10/1/2009
Posts: 55
Are you getting script errors? If so, could you post them?

A few tips I think I would recommend(based on what I do, not sure if it will solve your problem). DotNetNuke already adds jquery to the page head during the onload method, so I usually add scripts during the prerender to make sure they are always added after any jquery gets inserted. Asp.net webforms page life cycle methods go init, onload, then prerender(there are more but these are used more often).

Protected Overrides Sub OnPreRender(ByVal e As System.EventArgs)
        Dim gc As System.Web.UI.HtmlControls.HtmlGenericControl = New System.Web.UI.HtmlControls.HtmlGenericControl("script")
        gc.Attributes.Add("src", "/desktopmodules/randommodule/jqueryblockui.js")
        gc.Attributes.Add("type", "text/javascript")
        Page.Header.Controls.Add(gc)
        MyBase.OnPreRender(e)
    End Sub

Your shadowbox init method should be wrapped in a $(document).ready(function() { //script goes here });
The html dom elements on the page need to be loaded in order for jquery to use them. The .ready gets fired right after the dom gets loaded so any jquery you want to fire on load needs to go inside the document ready function.

You can always troubleshoot your javascript by putting In your code. Try putting an 1'); before you call your shadowbox init method and an 2'); after it. Just to make sure it is calling your js.
 
New Post
3/7/2011 9:43 PM
 
Steve

Joined: 4/29/2008
Posts: 3
Kelly - thank you for your thoughtful response.  I did the unthinkable and enabled script debugging (I am using IE 8).  I now know that the scripts are loading correctly, but when I click on the link with the "rel" attribute set to "shadowbox", shadowbox.js throws a script error for "Invalid argument" on the line of code "function(aS,aT){aS.style[aQ]=""+aT+"px"};".

 

Based on your post and some more digging that I did, I modified my code to insert the following script in the header:

'-------- code ---------

shadowbox_initiateScript.InnerHtml = "jQuery.noConflict();jQuery(document).ready(function() {Shadowbox.init({players: ['img','html']});});"


'--------- generated html ----------
<script type="text/javascript"> jQuery.noConflict();jQuery(document).ready(function() {Shadowbox.init({players: ['img','html']});});</script>

I even modified the shadowbox.css file based on one forum post about issues with shadowbox and IE8.  This was all to no avail.  I still do not know why I am getting an invalid argument script error.

Any other thoughts would be greatly apprecaited.

Thanks,
Steve
 
New Post
3/8/2011 10:07 PM
 
Steve

Joined: 4/29/2008
Posts: 3
I resolved the problem...sort of.  I decided to use colorbox instead of shadowbox to see if I had the same problem.  This worked on the first try.  I am still not sure why shadowbox would not work, but it doesn't really matter.  Colorbox is smaller to load anyway, which is always a good thing.  For anyone interested, below is the code that I used to get this to work:

 

01.Private Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
02.            ' Register jQuery and colorbox
03.            Dim colorbox_folder As String = Globals.ApplicationPath & "/Resources/Shared/Scripts/colorbox/"
04.  
05.            '<script type="text/javascript" src="/dnn/Resources/Shared/Scripts/jquery/jquery.js" ></script>
06.            DotNetNuke.Framework.jQuery.RequestRegistration()
07.  
08.            '<link rel="stylesheet" media="screen" href="/dnn/Resources/Shared/Scripts/colorbox/colorbox.css"></link>
09.            Dim colorbox_stylesheet = New HtmlGenericControl("link")
10.            colorbox_stylesheet.Attributes.Add("rel", "stylesheet")
11.            colorbox_stylesheet.Attributes.Add("media", "screen")
12.            colorbox_stylesheet.Attributes.Add("href", colorbox_folder & "colorbox.css")
13.            Page.Header.Controls.Add(colorbox_stylesheet)
14.  
15.            '<script type="text/javascript" src="/dnn/Resources/Shared/Scripts/colorbox/jquery.colorbox-min.js"></script>
16.            Dim colorbox_script = New HtmlGenericControl("script")
17.            colorbox_script.Attributes.Add("type", "text/javascript")
18.            colorbox_script.Attributes.Add("src", colorbox_folder & "jquery.colorbox-min.js")
19.            Page.Header.Controls.Add(colorbox_script)
20.  
21.            '<script type="text/javascript">jQuery.noConflict();jQuery(document).ready(function() {jQuery("a[rel='colorbox']").colorbox({transition:"none", width:"80%", height:"80%"});});</script>
22.            Dim colorbox_initiateScript = New HtmlGenericControl("script")
23.            colorbox_initiateScript.Attributes.Add("type", "text/javascript")
24.            colorbox_initiateScript.InnerHtml = "jQuery.noConflict();jQuery(document).ready(function() {jQuery(""a[rel='colorbox']"").colorbox({transition:""none"", width:""80%"", height:""80%""});});"
25.            Page.Header.Controls.Add(colorbox_initiateScript)
26.  
27.        End Sub
 
New Post
3/9/2011 4:30 AM
 
Wes Tatters


Wes Tatters's Avatar

Joined: 4/30/2004
Posts: 2155
fwiw you can also inject literal controls without the need to build an explicit class:

Dim styleSheetBase As String = "<link rel=""stylesheet"" media=""screen"" href=""/dnn/Resources/Shared/Scripts/colorbox/colorbox.css"" />"
Me.Parent.Page.Header.Controls.Add(New LiteralControl(styleSheetBase))

Cheers

Westa
 
 Page 1 of 2
12Next 
Previous
 
Next
HomeHomeDevelopment and...Development and...Building ExtensionsBuilding ExtensionsModulesModulesproblems incorporating shadowbox into my moduleproblems incorporating shadowbox into my module


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out