putting javascrpt slide show in orchard cms

Topics: Administration, Announcements, Core, Customizing Orchard, General, Jobs, Troubleshooting, Writing modules, Writing themes
Oct 15, 2014 at 3:57 PM
I want to put a simple slider on orchard. I have write the code and It is working on my computer. but when I add it to orchard CMS it doesn't work. can any one help me please. the asp version is 4.5 and iis 7.5 windows server 2008. here is the code:
<html>
<head>
<script type="text/javascript">

var slideimages = new Array() // create new array to preload images
var slidenum=2
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "emkanat1.JPG" // set image object src property to an image's src, preloading that image in the process
slideimages[1] = new Image()
slideimages[1].src = "emkanat2.JPG"
slideimages[2] = new Image()
slideimages[2].src = "emkanat3.JPG"


</script>
</head>
<body>
<div style="display: block; width:940px; height:356px;">
<img src="emkanat1.JPG" id="slide" width="940px" height="356px" />
<div >
<img style="position:absolute; margin-top: 150px; margin-left: 10px;" src=left.jpg onclick="prev()"/>
<img style="position:absolute; margin-top: 150px; margin-left: 890px;" src=right.jpg onclick="next()"/>
</div>
</div>

<script type="text/javascript">

//variable that will increment through the images
var step=0

function slideit(){
 //if browser does not support the image object, exit.
 if (!document.images)
  return
 document.getElementById('slide').src = slideimages[step].src
 if (step<slidenum)
  step++
 else
  step=0
 //call function "slideit()" every 2.5 seconds
 setTimeout("slideit()",2500)
}

function next(){
 if (!document.images)
  return

 if (step<slidenum)
  step++
 else
  step=0

  document.getElementById('slide').src = slideimages[step].src
}

function prev(){
 if (!document.images)
  return
  if (step>0)
  step--
 else
  step=slidenum

  document.getElementById('slide').src = slideimages[step].src
}



slideit()

</script>
</body>
</html>
I add it in orchard CMS in tools part or content but it didn't slide pictures and I don't know what is the reason.
Oct 15, 2014 at 4:17 PM
I think your problem is the path to your images. Orchard CMS uses asp.net MVC and that routing. If you define your images direct in code and your slider is for example on the front page, the path where the slider looks for is images is http://mysite.com/iemkanat1.JPG. But this route isn't defined and so you will get an 404 (look in your console in chrome or firefox).

I am not sure what exactly your needs, but when I need an slider I create a ContentTyp with an Imagefield, create a Query to query the Contenttyp, create a Projection with that query and customize the projection view so that it fits your needs.
Oct 15, 2014 at 4:50 PM
benschi11 wrote:
I think your problem is the path to your images. Orchard CMS uses asp.net MVC and that routing. If you define your images direct in code and your slider is for example on the front page, the path where the slider looks for is images is http://mysite.com/iemkanat1.JPG. But this route isn't defined and so you will get an 404 (look in your console in chrome or firefox).

I am not sure what exactly your needs, but when I need an slider I create a ContentTyp with an Imagefield, create a Query to query the Contenttyp, create a Projection with that query and customize the projection view so that it fits your needs.
yes, I changed the address when I put it there but it still didn't work. will you please explain more bout your Query and method for slider?
Oct 15, 2014 at 5:15 PM
Edited Oct 15, 2014 at 5:16 PM
Hi!

I looked my Slider up and saw that it was a little bit more difficult to implement an dynamic slider. I wrote my own Layout for the Projection (like this Tutorial: http://indice.gr/blog/orchard-cms-building-slider-projection).

If you only want a static slider you can put it in your theme. I created an view called Slider.cshtml with following content (I use revolution slider):
@{
    Style.Require("Slider-Revolution-Settings");
    Style.Require("Slider-Revolution-Dynamic-Captions");
    Style.Require("Slider-Revolution-Static-Captions");

    Script.Require("Slider-Revolution-Plugins");
    Script.Require("Slider-Revolution");
}


<div class="boxedSlider-container">
    <div class="tp-banner-container">
        <div id="slider1" class="tb-banner">
            <ul>
                <li data-transition="fade" data-slotamount="7" data-masterspeed="300">
                    <img src="@Url.Content(Html.ThemePath(WorkContext.CurrentTheme, "/Content/Slider/demo1.png"))"  alt="" data-bgposition="center top" data-lazyload="@Url.Content(Html.ThemePath(WorkContext.CurrentTheme, "/Content/Slider/demo1.png"))" data-bgfit="cover" data-bgrepeat="no-repeat" />
                </li>

                <li data-transition="fade" data-slotamount="7" data-masterspeed="300">
                    <img src="@Url.Content(Html.ThemePath(WorkContext.CurrentTheme, "/Content/Slider/demo2.jpg"))" alt="" data-bgposition="center top" data-lazyload="@Url.Content(Html.ThemePath(WorkContext.CurrentTheme, "/Content/Slider/demo2.jpg"))" data-bgfit="cover" data-bgrepeat="no-repeat" />

                    <!-- LAYERS -->
                    <!-- LAYER NR. 1 -->
                    <div class="caption randomrotate big_white" data-x="400" data-y="100" data-speed="700" data-start="1700" data-easing="easeOutBack">KICKSTART YOUR WEBSITE</div>
                    
                </li>
            </ul>
            <div class="tp-bannertimer tp-bottom"></div>
        </div>
    </div>
</div>

@using (Script.Foot()) {
    <script type="text/javascript">
        $(function () {
            $('#slider1').revolution();
        });
    </script>
}
And then I add this to my layout.cshmtl to render the slider only on the main page (if you remove the if - it will be rendered on all sites)
if (WorkContext.HttpContext.Request.RawUrl == Href("~/") || WorkContext.HttpContext.Request.RawUrl == Href("~//")) {
        WorkContext.Layout.Header.Add(New.Slider(), "0");
}
Make sure your Theme has a zone called Header and your and your slider-page hast the name Slider.cshtml.

That was my workaround for an easy slider for demo purposes.

edit: removed some code for better understanding.
Oct 15, 2014 at 10:45 PM
It seems that there is a problem that does not let my script to be rendered. Does any one have any idea? is there any thing that can stop scripts from running? is there any permission or s.th that I should change?
Oct 16, 2014 at 1:13 AM
Where did you put your script? In which file? Or did you create your own part? If so, check if your part is added to the placement.info file, to get displayed.
Oct 16, 2014 at 7:58 AM
I try it in 2 place. First new, page and click on html view and paste my code there(In this case I use it as a content). Second in widgetsin navagation part, html widget and put it there(navagation was enabled in the theme I used). In both case I saw the first image of slider with out changing to the next slide. Even when I press on next or prev button.
Oct 16, 2014 at 3:16 PM
Ok. Seems both ok for me. Is there an error in the developer console? (in chrome Press F12 Key) I think it might be the URL that you add to your array. Can you post your slideimage array from your orchard code?
Oct 16, 2014 at 4:51 PM
Edited Oct 17, 2014 at 9:43 AM
thanks a lot for your help. IT seems that there is a problem in some other part that show itself in it. because now my slider works properly and another java script part encounter a problem. in console it is written that :
Uncaught ReferenceError: mouseaway is not defined (index):216onmouseout (index):216
Uncaught ReferenceError: rollover is not defined (index):216onmouseover

and the code is as below.
<p>
<script type="mce-text/javascript">// <![CDATA[
function rollover(my_image)
    {
        my_image.src='http://es.sums.ac.ir/Media/Default/_Profiles/98c9a695/7b090ae0/blackhistory.png?v=635487999046557605';
    }


 function mouseaway(my_image)
    {
        my_image.src='http://es.sums.ac.ir/Media/Default/_Profiles/98c9a695/7b090ae0/history-1.png?v=635482832563470344';
    }
// ]]></script>
</p>
<style type="text/css" media="screen"><!--
#horizontalmenu1 ul { padding:1; margin:1; list-style:none; }   
        #horizontalmenu1 li { float:right; position:relative; display:block;} 
        #horizontalmenu1 li ul { display:none; position:absolute; background:white ; color:black; } 
        #horizontalmenu1 li:hover ul{ display:block; height:auto;  background:white ; color:black; width:150px; } 
        #horizontalmenu1 li ul li{ clear:both; border-style:none; width:150px;}
                #horizontalmenu1 a{color:black; }
--></style>
<div style="text-align: center;"><img src="http://es.sums.ac.ir/Media/Default/_Profiles/98c9a695/7b090ae0/history-1.png?v=635482832563470344" width="100" height="100" onmouseover="rollover(this)" onmouseout="mouseaway(this)" /></div>
Oct 17, 2014 at 5:33 PM
I am sorry. for my long delay. I played a little bit with your code and I think problem is
<script type="mce-text/javascript">
It should be:
<script type="text/javascript">
With this little modification it works for me.
Marked as answer by maryam_karimi on 1/11/2015 at 11:20 PM
Oct 18, 2014 at 3:02 PM
It's working, thanks a lot :)