Adding Thumbnail Scroller

Topics: Customizing Orchard, General, Troubleshooting, Writing themes
Feb 4, 2013 at 5:44 PM
Hi,

Im trying to add a reference to a script in the layout.cshtml, and am getting errors. I am running 1.6, have uploaded the script to a folder under my theme called "Scripts." My script is jquery.thumbnailScroller.js

When I add it using Script.Require it says it cant be found. I added the full path and the same thing. Any ideas?

Regard,
TJ Havens
Coordinator
Feb 10, 2013 at 8:17 AM
You're missing a web.config in the script's directory.
Feb 10, 2013 at 6:33 PM
I already added that and continue to get the same thing, here is my web.config, do you see anything I haven't done right?

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<appSettings>
<add key="webpages:Enabled" value="false" />
</appSettings>
<system.web>
<httpHandlers>
  <!-- iis6 - for any request in this location, return via managed static file handler -->
  <add path="*" verb="*" type="System.Web.StaticFileHandler" />
</httpHandlers>
</system.web>
<system.webServer>
<handlers accessPolicy="Script,Read">
  <!--
  iis7 - for any request to a file exists on disk, return it via native http module.
  accessPolicy 'Script' is to allow for a managed 404 page.
  -->
  <add name="StaticFile" path="*" verb="*" modules="StaticFileModule" preCondition="integratedMode" resourceType="File" requireAccess="Read" />
</handlers>
</system.webServer>
</configuration>
Feb 10, 2013 at 6:41 PM
Keep getting same error:

A 'script' named 'jquery.thumbnailScroller.js' could not be found.
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.InvalidOperationException: A 'script' named 'jquery.thumbnailScroller.js' could not be found.

Source Error:


Line 13: <meta charset="utf-8" />
Line 14: <title>@Html.Title(title, siteName)</title>
Line 15: @Display(Model.Head) Line 16: <script>(function(d){d.className="dyn"+d.className.substring(6,d.className.length);})(document.documentElement);</script>
Line 17: </head>


Source File: c:\HostingSpaces\taxtitle\beta.taxtitleservices.com\wwwroot\Core\Shapes\Views\Document.cshtml Line: 15
Feb 10, 2013 at 7:59 PM
Bertrand,

I sued the technique from your blog to create a widget and added it to my views folder using the designer tools. Below is the code I have added attempting to get the Scroller working:
@Display(Model.Content)
<script src="Themes/TTS/Scripts/jquery.thumbnailScroller.js" type="text/javascript"></script>
<div class="bottom_log">
<div class="jThumbnailScroller" id="galthumb">
<div class="jTscrollerContainer" id="galinner" style="left: 0px; top: 2px;">
<div class="jTscroller"><img width="118" height="89" alt="" src="/Media/Default/Site/partner-img-9.png" /><a class="white" href="#"><img alt="" src="/Media/Default/Site/partner-img-1.png" /></a><a class="white" href="#"><img alt="" src="/Media/Default/Site/partner-img-5.png" /></a><a class="white" href="#"><img alt="" src="/Media/Default/Site/partner-img-2.png" /></a><a class="white" href="#"><img alt="" src="/Media/Default/Site/partner-img-7.png" /></a><a class="white" href="#"><img alt="" src="/Media/Default/Site/partner-img-3.png" /></a><a class="white" href="#"><img alt="" src="/Media/Default/Site/partner-img-8.png" /></a><a class="white" href="#"><img alt="" src="/Media/Default/Site/partner-img-4.png" /></a><a class="white" href="#"><img alt="" src="/Media/Default/Site/partner-img-10.png" /></a><a class="white" href="#"><img alt="" src="/Media/Default/Site/partner-img-11.png" /></a><a class="white" href="#"><img alt="" src="/Media/Default/Site/partner-img-12.png" /></a></div>
</div>
<div id="show"></div>
</div>
</div>
<script type="text/javascript">// <![CDATA[
/* jQuery.noConflict() for using the plugin along with other libraries. 
   You can remove it if you won't use other libraries (e.g. prototype, scriptaculous etc.) or 
   if you include jQuery before other libraries in yourdocument's head tag. 
   [more info: http://docs.jquery.com/Using_jQuery_with_Other_Libraries] */
/* calling thumbnailScroller function with options as parameters */
   (function($){
window.onload=function(){ 
    /* selector can be id, class, tag name etc. */
    $("#galthumb").thumbnailScroller({ 
        /* scroller type based on mouse interaction 
        values: "hoverPrecise", "hoverAccelerate", "clickButtons" 
        default: "hoverPrecise" */
        scrollerType:"hoverAccelerate", 
        /* scroller orientation 
        values: "horizontal", "vertical" 
        default: "horizontal" */
        scrollerOrientation:"horizontal", 
        /* scroll easing type only for "hoverPrecise" scrollers
        available values here: http://jqueryui.com/demos/effect/easing.html 
        default: "easeOutCirc" */
        scrollEasing:"easeOutCirc", 
        /* scroll easing amount only for "hoverPrecise" and "clickButtons" scrollers (0 for no easing) 
        values: milliseconds 
        default: 800 */
        scrollEasingAmount:800, 
        /* acceleration value only for "hoverAccelerate" scrollers 
        values: integer 
        default: 2 */
        acceleration:4, 
        /* scrolling speed only for "clickButtons" scrollers 
        values: milliseconds 
        default: 600 */
        scrollSpeed:800, 
        /* scroller null scrolling area only for "hoverAccelerate" scrollers 
        0 being the absolute center of the scroller
        values: pixels 
        default: 0 */
        noScrollCenterSpace:10, 
        /* initial auto-scrolling 
        0 equals no auto-scrolling 
        values: amount of auto-scrolling loops (integer) 
        default: 0 */
        autoScrolling:0, 
        /* initial auto-scrolling speed 
        values: milliseconds 
        default: 8000 */
        autoScrollingSpeed:2000, 
        /* initial auto-scrolling easing type 
        available values here: http://jqueryui.com/demos/effect/easing.html 
        default: "easeInOutQuad" */
        autoScrollingEasing:"easeInOutQuad", 
        /* initial auto-scrolling delay for each loop 
        values: milliseconds 
        default: 2500 */
        autoScrollingDelay:500 
    });
    
}
})(jQuery);
// ]]></script>
<div class="sep"></div>
Coordinator
Feb 10, 2013 at 8:42 PM
Oh, that's easy then: you used a relative URL. If you are on page /foo/bar, this src="Themes/TTS/Scripts/jquery.thumbnailScroller.js" is going to be looked for in "/foo/bar/Themes/TTS/Scripts/jquery.thumbnailScroller.js". Always use Script.Include: @{Script.Include("jquery.thumbnailScroller.js")} should do the trick.
Feb 10, 2013 at 8:46 PM
Where do I add it? Here is my code now and I get an error:
@Display(Model.Content)
@{Script.Include("jquery.thumbnailScroller.js")};
<div class="bottom_log">
<div class="jThumbnailScroller" id="galthumb">
<div class="jTscrollerContainer" id="galinner" style="left: 0px; top: 2px;">
<div class="jTscroller"><img width="118" height="89" alt="" src="/Media/Default/Site/partner-img-

9.png" /><a class="white" href="#"><img alt="" src="/Media/Default/Site/partner-img-1.png" 

/></a><a class="white" href="#"><img alt="" src="/Media/Default/Site/partner-img-5.png" /></a><a 

class="white" href="#"><img alt="" src="/Media/Default/Site/partner-img-2.png" /></a><a 

class="white" href="#"><img alt="" src="/Media/Default/Site/partner-img-7.png" /></a><a 

class="white" href="#"><img alt="" src="/Media/Default/Site/partner-img-3.png" /></a><a 

class="white" href="#"><img alt="" src="/Media/Default/Site/partner-img-8.png" /></a><a 

class="white" href="#"><img alt="" src="/Media/Default/Site/partner-img-4.png" /></a><a 

class="white" href="#"><img alt="" src="/Media/Default/Site/partner-img-10.png" /></a><a 

class="white" href="#"><img alt="" src="/Media/Default/Site/partner-img-11.png" /></a><a 

class="white" href="#"><img alt="" src="/Media/Default/Site/partner-img-12.png" /></a></div>
</div>
<div id="show"></div>
</div>
</div>
<script type="text/javascript">// <![CDATA[
/* jQuery.noConflict() for using the plugin along with other libraries. 
   You can remove it if you won't use other libraries (e.g. prototype, scriptaculous etc.) or 
   if you include jQuery before other libraries in yourdocument's head tag. 
   [more info: http://docs.jquery.com/Using_jQuery_with_Other_Libraries] */
/* calling thumbnailScroller function with options as parameters */
   (function($){
window.onload=function(){ 
    /* selector can be id, class, tag name etc. */
    $("#galthumb").thumbnailScroller({ 
        /* scroller type based on mouse interaction 
        values: "hoverPrecise", "hoverAccelerate", "clickButtons" 
        default: "hoverPrecise" */
        scrollerType:"hoverAccelerate", 
        /* scroller orientation 
        values: "horizontal", "vertical" 
        default: "horizontal" */
        scrollerOrientation:"horizontal", 
        /* scroll easing type only for "hoverPrecise" scrollers
        available values here: http://jqueryui.com/demos/effect/easing.html 
        default: "easeOutCirc" */
        scrollEasing:"easeOutCirc", 
        /* scroll easing amount only for "hoverPrecise" and "clickButtons" scrollers (0 

for no easing) 
        values: milliseconds 
        default: 800 */
        scrollEasingAmount:800, 
        /* acceleration value only for "hoverAccelerate" scrollers 
        values: integer 
        default: 2 */
        acceleration:4, 
        /* scrolling speed only for "clickButtons" scrollers 
        values: milliseconds 
        default: 600 */
        scrollSpeed:800, 
        /* scroller null scrolling area only for "hoverAccelerate" scrollers 
        0 being the absolute center of the scroller
        values: pixels 
        default: 0 */
        noScrollCenterSpace:10, 
        /* initial auto-scrolling 
        0 equals no auto-scrolling 
        values: amount of auto-scrolling loops (integer) 
        default: 0 */
        autoScrolling:0, 
        /* initial auto-scrolling speed 
        values: milliseconds 
        default: 8000 */
        autoScrollingSpeed:2000, 
        /* initial auto-scrolling easing type 
        available values here: http://jqueryui.com/demos/effect/easing.html 
        default: "easeInOutQuad" */
        autoScrollingEasing:"easeInOutQuad", 
        /* initial auto-scrolling delay for each loop 
        values: milliseconds 
        default: 2500 */
        autoScrollingDelay:500 
    });
    
}
})(jQuery);
// ]]></script>
<div class="sep"></div>
Coordinator
Feb 10, 2013 at 8:54 PM
What error?
Feb 10, 2013 at 8:56 PM

Server Error in '/' Application.
--------------------------------------------------------------------------------


 Compilation Error 
Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately. 

Compiler Error Message: CS1002: ; expected

 Source Error:









Line 1:  @Display(Model.Content)
Line 2:  @{Script.Include("jquery.thumbnailScroller.js")};
Line 3:  <div class="bottom_log">
Line 4:  <div class="jThumbnailScroller" id="galthumb"> 

Source File: c:\HostingSpaces\taxtitle\beta.taxtitleservices.com\wwwroot\Themes\TTS\Views\Widget-PartnerLogoScroller.cshtml    Line: 2 



Show Detailed Compiler Output:
 







Show Complete Compilation Source:
Coordinator
Feb 10, 2013 at 9:10 PM
Yeah, well, sorry, should have been @{Script.Include("jquery.thumbnailScroller.js");}

You may also want to change that inline script to a using(Script.Foot()) {... Look for examples in the code.
Feb 10, 2013 at 10:14 PM
Still not working, and it breaks the Featured Item Slider... Hmm, what a pain... I have an example of the logo slider here on a static site: http://www.aanmt.com/backup/tts/, its near the bottom, with the logos, on hove it shows arrows and lets you scroll through them...

hmm, how to get it to work?
Coordinator
Feb 10, 2013 at 10:21 PM
You really need to be more specific. I can't read your mind. ;) When you say "still not working" I cannot possibly guess how it's not working, so there is no way I can help. Also, if the script you're including is interacting negatively with another script on your page, I think you will have to debug that yourself, or contact the authors of the respective scripts.
Feb 24, 2013 at 6:17 PM
ok, still working on this. I have the web.config located in the Scripts folder of my theme. I am trying everything, any help would be appreciated.

I get the error:

SCRIPT438: Object doesn't support property or method 'thumbnailScroller'
beta.taxtitleservices.com, line 637 character 2
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.


And below is my widget code:
@{Script.Include("jquery.thumbnailScroller.js");}
@Display(Model.Content)
<div class="bottom_log">
    <div id="galthumb" class="jThumbnailScroller">
        <div id="galinner" class="jTscrollerContainer">
            <div class="jTscroller">
                <a class="white" href="#">
                <img src="Media/Default/Site/partner-img-1.png" /></a><a 

class="white" href="#"><img src="Media/Default/Site/partner-img-5.png" /></a><a class="white" 

href="#"><img src="Media/Default/Site/partner-img-2.png" /></a><a class="white" href="#"><img 

src="Media/Default/Site/partner-img-7.png" /></a><a class="white" href="#"><img 

src="Media/Default/Site/partner-img-3.png" /></a><a class="white" href="#"><img 

src="Media/Default/Site/partner-img-9.png" /></a><a class="white" href="#"><img 

src="Media/Default/Site/partner-img-8.png" /></a><a class="white" href="#"><img 

src="Media/Default/Site/partner-img-4.png" /></a><a class="white" href="#"><img 

src="Media/Default/Site/partner-img-10.png" /></a><a class="white" href="#"><img 

src="Media/Default/Site/partner-img-11.png" /></a><a class="white" href="#"><img 

class="lastchildimg" src="Media/Default/Site/partner-img-12.png" /></a>
            </div>
        </div>
        <div id="show">
        </div>
    </div>
</div>

<script>
/* jQuery.noConflict() for using the plugin along with other libraries. 
   You can remove it if you won't use other libraries (e.g. prototype, scriptaculous etc.) or 
   if you include jQuery before other libraries in yourdocument's head tag. 
   [more info: http://docs.jquery.com/Using_jQuery_with_Other_Libraries] */
/* calling thumbnailScroller function with options as parameters */
   (function($){
window.onload=function(){ 
    /* selector can be id, class, tag name etc. */
    $("#galthumb").thumbnailScroller({ 
        /* scroller type based on mouse interaction 
        values: "hoverPrecise", "hoverAccelerate", "clickButtons" 
        default: "hoverPrecise" */
        scrollerType:"hoverAccelerate", 
        /* scroller orientation 
        values: "horizontal", "vertical" 
        default: "horizontal" */
        scrollerOrientation:"horizontal", 
        /* scroll easing type only for "hoverPrecise" scrollers
        available values here: http://jqueryui.com/demos/effect/easing.html 
        default: "easeOutCirc" */
        scrollEasing:"easeOutCirc", 
        /* scroll easing amount only for "hoverPrecise" and "clickButtons" scrollers (0 

for no easing) 
        values: milliseconds 
        default: 800 */
        scrollEasingAmount:800, 
        /* acceleration value only for "hoverAccelerate" scrollers 
        values: integer 
        default: 2 */
        acceleration:4, 
        /* scrolling speed only for "clickButtons" scrollers 
        values: milliseconds 
        default: 600 */
        scrollSpeed:800, 
        /* scroller null scrolling area only for "hoverAccelerate" scrollers 
        0 being the absolute center of the scroller
        values: pixels 
        default: 0 */
        noScrollCenterSpace:10, 
        /* initial auto-scrolling 
        0 equals no auto-scrolling 
        values: amount of auto-scrolling loops (integer) 
        default: 0 */
        autoScrolling:0, 
        /* initial auto-scrolling speed 
        values: milliseconds 
        default: 8000 */
        autoScrollingSpeed:2000, 
        /* initial auto-scrolling easing type 
        available values here: http://jqueryui.com/demos/effect/easing.html 
        default: "easeInOutQuad" */
        autoScrollingEasing:"easeInOutQuad", 
        /* initial auto-scrolling delay for each loop 
        values: milliseconds 
        default: 2500 */
        autoScrollingDelay:500 
    });
    
}
})(jQuery);

</script>
Coordinator
Feb 24, 2013 at 7:07 PM
Looks like your script is still not loading. Use your browser's dev tools (network panel) to figure out why.