Forums

peterharren

Hi, thanks for reading this. At the bottom right of this page http://bugasalt.com/slidertestpage.php I want to use the anything slider with the mini dark theme to slide 4 youtube videos. I'm a beginner with jquery. Can anyone trouble shoot this, or give me step by step instructions on how to set up the anything slider in this way? Thanks!

peterharren

$40 paypal to whoever helps me get this thing up and running!

Senff

Not sure if it will help, but this is what I noticed at first glance..... Try moving this code out of the HEAD tag and place it right before the </BODY> tag:

  <script type="text/javascript">
  $(document).ready(function(){
          $('#anything_slider').anythingSlider();
  });
  </script>

See if that does something.

(And for heaven's sake, get rid of that annoying fly....)

peterharren

Moved

$(document).ready(function(){ $('#anything_slider').anythingSlider(); });

but nothing changed unfortunately. Thanks for the effort though. Any other ideas? Ha, the fly would be gone if it was up to me. Same with the flashing 'here' text.

djrolstad

list all . js external links you put for the anything slider and what version of jQuery did you put up?

peterharren

Do you mean, these that are listed in the head?

 



  <link rel="stylesheet" href="css/theme-mini-dark.css">

peterharren

I suck at posting code here. Do you mean the ones listed in the head?

http://bugasalt.com/slidertestpage.php

I don't think I have external .js links, I have src="js/jquery.anythingslider.min.js" src="js/jquery.anythingslider.fx.min.js" in the head and I have them on the server.

djrolstad

well since they are videos you need the jquery.anythingslider.video.js file

peterharren

I put jquery.anythingslider.video.js in there and no luck. So I tried adding js/jquery.anythingslider.video.min.js too, and still no luck. Thanks so much for helping. Any other ideas?

djrolstad

trying replacing the jquery.min.js with jQuery v1.7.2??

djrolstad

and you might have too many jQuery versions; I see you have 1.8.8 and 1.4.2

peterharren

Just tried it, but no luck. anything slider comes with a whole bunch of js files that I'm not linking to in the head, should I just try including all of them?

peterharren

Ok got rid of the 1.4.2 version and something changed. Not sure if it's progress though. http://bugasalt.com/slidertestpage.php

djrolstad

you can give it a shot

djrolstad

$("#anything_slider").click(function(e){ $('.anythingSlider').anythingSlider(6); e.preventDefault(); });

put this in instead of;

$(document).ready(function(){ $('#anything_slider').anythingSlider(); });

Mottie

Hi @peterharren

Some files are being loaded twice and in the wrong order... change this block from this:

  <!-- AnythingSlider -->
  <script src="js/jquery.anythingslider.min.js"></script>
  <script src="js/jquery.anythingslider.video.js"></script>
  <script src="js/jquery.anythingslider.video.min.js"></script>
  <!-- Optional extension -->
  <script src="js/jquery.anythingslider.fx.min.js"></script>
  <script src="js/jquery.anythingslider.fx.js"></script>
  <script src="js/jquery.anythingslider.js"></script>
  <script src="js/jquery.easing.1.2.js"></script>
  <script src="js/jquery.min.js"></script>
  <script src="js/swfobject.js"></script>

to this:

  <!-- AnythingSlider -->
  <script src="js/swfobject.js"></script>
  <script src="js/jquery.easing.1.2.js"></script>
  <script src="js/jquery.anythingslider.min.js"></script>
  <script src="js/jquery.anythingslider.video.min.js"></script>
  <script src="js/jquery.anythingslider.fx.min.js"></script>

You also need to define the width and height of the anything slider panels (the sizes may be wrong, but I matched the YouTube video sizes):

  #anything_slider {
      width: 300px;
       height: 169px;
  }

peterharren

Hi Mottie, Thanks so much for the help. I changed out the files in the head. Thanks for spotting the doubles. Then I added the #anything_slider width and height to the theme-mini-dark.css file, but there's still some problems. $100 paypal if you can help me sort this out.

djrolstad

function formatText(index, panel) { return index; } $(function () { $('#slider1').anythingSlider({ }); });

djrolstad

function formatText(index, panel) { return index; } $(function () { $('#slider1').anythingSlider({ }); });

Mottie

Sorry, I forgot you were using a different theme. So when you initialize AnythingSlider, set the theme there:

  $('#anything_slider').anythingSlider({
      theme: 'mini-dark'
  });

Also the mini-dark theme css (http://bugasalt.com/css/theme-mini-dark.css) points to image files that don't seem to exist... it's looking for them here: http://bugasalt.com/images/mini-dark.png so you'll need to include that image and maybe change the URL in the css to point to it.

And it's too bad the gun is sold out, my cousin is interested in one LOL :P

djrolstad

I think Mottie has it because when I was fiddling with it it was working but there was no css

treehouse : what would you like to learn today?

Forums

Need help setting up the anything slider.