1

I downloaded and implemented the original files from here, but it doesn't play.

Interestingly, when I host my files on Dropbox using pancakeapps, it does work. Is there something preventing me from using the script while hosting with Google?

Kara
  • 6,115
  • 16
  • 50
  • 57

2 Answers2

1

Linking

Check this website: CDNJS

Hosts JS's. For ResponsiveSlides: http://cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.53/responsiveslides.min.js

Google drive hosting: tutorial

Source (JSFiddle)

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Slider</title>
      
  
  
  
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  
    
      <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    
  
    
      <script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.53/responsiveslides.min.js"></script>
    
  
  <style type='text/css'>
    .rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

#wrapper {
  float: left;
  width: 100%;
  margin-bottom: 50px;
  }

a {
  color: #222;
  }

.rslides_container {
  margin-bottom: 50px;
  position: relative;
  float: left;
  width: 100%;
  }

.rslides1_nav {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 50%;
  left: 0;
  z-index: 99;
  opacity: 0.7;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  height: 61px;
  width: 38px;
  background: transparent url("http://responsiveslides.com/with-captions/themes.gif") no-repeat left top;
  margin-top: -45px;
  }

.rslides1_nav:active {
  opacity: 1.0;
  }

.rslides1_nav.next {
  left: auto;
  background-position: right top;
  right: 0;
  }

.rslides2_nav {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 0;
  left: 0;
  display: block;
  background: #fff; /* Fix for IE6-9 */
  opacity: 0;
  filter: alpha(opacity=1);
  width: 48%;
  text-indent: -9999px;
  overflow: hidden;
  height: 91%;
  }

.rslides2_nav.next {
  left: auto;
  right: 0;
  }

.rslides3_nav {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  opacity: 0.6;
  text-indent: -9999px;
  overflow: hidden;
  top: 0;
  bottom: 0;
  left: 0;
  background: #000 url("themes.gif") no-repeat left 50%;
  width: 38px;
  }

.rslides3_nav:active {
  opacity: 1.0;
  }

.rslides3_nav.next {
  left: auto;
  background-position: right 50%;
  right: 0;
  }

.rslides1_nav:focus,
.rslides2_nav:focus,
.rslides3_nav:focus {
  outline: none;
  }

.rslides_tabs {
  margin-top: 10px;
  text-align: center;
  }

.rslides_tabs li {
  display: inline;
  float: none;
  _float: left;
  *float: left;
  margin-right: 5px;
  }

.rslides_tabs a {
  text-indent: -9999px;
  overflow: hidden;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  background: #ccc;
  background: rgba(0,0,0, .2);
  display: inline-block;
  _display: block;
  *display: block;
  -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  width: 9px;
  height: 9px;
  }

.rslides_tabs .rslides_here a {
  background: #222;
  background: rgba(0,0,0, .8);
  }

.caption {
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  text-align: center;
  background: #000;
  background: rgba(0,0,0, .8);
  color: #fff;
}
  </style>
  


<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
   $(function () {

      // Slideshow 1
      $("#slides1").responsiveSlides({
        auto: true,
        pagination: true,
        nav: true,
        fade: 500,
      });

    });
}//]]>  

</script>


</head>
<body>
  <div id="wrapper">
    
    <div class="rslides_container">
      <ul id="slides1" class="rslides">
        <li>
          <img src="http://responsiveslides.com/1.jpg" alt="" />
          <p class="caption">Donec id elit non mi porta gravida at eget metus.</p>
        </li>
        <li>
          <img src="http://responsiveslides.com/2.jpg" alt="" />
          <p class="caption">Donec ullamcorper nulla non metus auctor fringilla.</p>
        </li>
        <li>
          <img src="http://responsiveslides.com/3.jpg" alt="" />
          <p class="caption">Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </li>
      </ul>
    </div>
    
      
      
      
  
</body>


</html>

Customization

Now you can easly customize by editing the script and css:

available options (js):

 $(".rslides").responsiveSlides({
      auto: true,             // Boolean: Animate automatically, true or false
      speed: 500,            // Integer: Speed of the transition, in milliseconds
      timeout: 4000,          // Integer: Time between slide transitions, in milliseconds
      pager: false,           // Boolean: Show pager, true or false
      nav: false,             // Boolean: Show navigation, true or false
      random: false,          // Boolean: Randomize the order of the slides, true or false
      pause: false,           // Boolean: Pause on hover, true or false
      pauseControls: true,    // Boolean: Pause when hovering controls, true or false
      prevText: "Previous",   // String: Text for the "previous" button
      nextText: "Next",       // String: Text for the "next" button
      maxwidth: "",           // Integer: Max-width of the slideshow, in pixels
      navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'
      manualControls: "",     // Selector: Declare custom pager navigation
      namespace: "rslides",   // String: Change the default namespace used
      before: function(){},   // Function: Before callback
      after: function(){}     // Function: After callback
    });
Community
  • 1
  • 1
rafaeldefazio
  • 449
  • 2
  • 7
  • Thanks. I've pointed to this link instead of my hosted file, but the slideshow still doesn't play. Does Google Drive somehow block the js from running? –  Apr 27 '14 at 20:24
  • Can you show me the .js url? And the sequence of .js's, are they correct? – rafaeldefazio Apr 27 '14 at 20:26
  • These are the scripts I am pointing to: ` ` Sorry for the formatting; I'm new to coding and this forum. –  Apr 27 '14 at 20:27
0

Well without being able to the code your using I'm going to assume you have similar code to the answer here. If so, Google Drive hosting has to have https linking for external calls (i.e. jQuery library call; it has to be http, // and http don't work)

hakarune
  • 402
  • 2
  • 7
  • 20