0

Consider the following as my source code:

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Slider Example - Jssor Slider, Carousel, Slideshow</title>
</head>
<body style="font-family:Arial, Verdana;background-color:#fff;">
       <script type="text/javascript" src="C:\Users\yashs\Desktop\Final Shot\js\jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="C:\Users\yashs\Desktop\Final Shot\js\jssor.js"></script>
    <script type="text/javascript" src="C:\Users\yashs\Desktop\Final Shot\js\jssor.slider.js"></script>
    <script>
        jQuery(document).ready(function ($) {
            var options = {
                $AutoPlay: true,                                   
                $DragOrientation: 3                               
            };
            var jssor_slider1 = new $JssorSlider$("slider1_container", options);
        });
    </script>
    <header id="top header">
    <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px;
        height: 300px;">        
        <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
            overflow: hidden;">
            <div><img u="image" src="C:\Users\yashs\Desktop\Final Shot\img\1.jpg" /></div>
            <div><img u="image" src="C:\Users\yashs\Desktop\Final Shot\img\2.jpg" /></div>
            <div><img u="image" src="C:\Users\yashs\Desktop\Final Shot\img\3.jpg" /></div>
            <div><img u="image" src="C:\Users\yashs\Desktop\Final Shot\img\4.jpg" /></div>           
        </div>
    </div>
    </header>
</body>
</html>

I have created a document library in SharePoint 2010 and stored all js, img and main txt file in this library (All inside the same folder and not in subfolders) I then created a web part (Content Editor) and gave the path to this library. However, this functions well in IE. But in Chrome I cant see the images as well as slider functionality.

Please help. Thanks in advance!!!

0

I have a solution that will work to add an image and get the right path :

First in your project right click on the sharepoint project then add then sharepoint "layout" mapped folder

this will create a folder for your project inside sharepoint native "Layout" mapped folder

copy/ paste your "images" folder to this folder

in the image src , you can add the path as the following :

"/_layouts/YourProjectFolderName/images/YourImageName"

Deploy The solution and hopefully it will work

| improve this answer | |
  • I followed your instructions... Now the images are loaded but still the functionality of slider is not working.... It seems with the help of inspect element that: Not allowed to load local resource: file:///C:/Users/yashs/Desktop/Final%20Shot/js/jssor.js – Yash Saraiya Sep 4 '15 at 9:54
  • I figured out that we cannot give the path of the local machine since Chrome doesn't allows that due to security reasons. But, I tried to take the path for js files as i did for images, it is opening up a download to save pop-up and not opening this file – Yash Saraiya Sep 4 '15 at 10:15
  • I think the problem is with the loading of the js file as well . You can do the same with your js file by adding your js folder to the mapped project folder inside the layout folder . and add reference to it in your web part like the following : – Mohamed Ragab Sep 5 '15 at 8:05
  • <SharePoint:ScriptLink ID="scriptLink1" Name="/_layouts/YourProjectFolderName/js/jssor.js" runat="server"> </SharePoint:ScriptLink> – Mohamed Ragab Sep 5 '15 at 8:14
  • and yes you are right in the part that you can not use a path for the local resource . so using this way it is relative and hopefully it will work – Mohamed Ragab Sep 5 '15 at 8:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.