Can't get SlideIO to work

General web design discussion, including HTML, CSS, and JavaScript

Can't get SlideIO to work

Postby sandyhon! » Fri Oct 12, 2012 4:44 pm

OK. I did some reading today and have a better understanding of jQuery/JavaScript (well, let's say I now have some familiarity with the terms and code!) I've gone ahead and started a new page. I added the jQuery link from Google at the bottom before the close of the body tag. I copied and pasted the script tag from the MagicEdit site below the jQuery script. I removed the "type="text/javascript" from the <script type="text/javascript"> because I don't think it's needed with HTML5. (I could be wrong...I was reading http://www.adobe.com/devnet/dreamweaver ... query.html and it appeared to be no longer needed.) I added the html and css from the ME site (I changed the image names to correspond to the image files in the image folder.) Uploaded it, but it's not working.

According to the directions on the ME site "The default implementation is very easy in JavaScript. Just make sure you include the jQuery and plugin scripts, then apply the plugin to the slide wrapper container."

I don't think I'm applying the plugin to the slide wrapper container. How do I do that? Is that the problem?

http://sandyhon.cust.magicedit.com/

Thanks in advance for all your help and support!
jNewbie Sandy
sandyhon!
 
Posts: 18
Joined: Sun Jun 24, 2012 5:24 pm

Re: Can't get SlideIO to work

Postby raw10 » Mon Oct 15, 2012 1:16 pm

Hey Sandy,

Check out the most recent forum post on jQuery here: viewtopic.php?f=4&t=85

SlideIO works pretty much the same way, but the most important thing is to make sure the file(s) for the plugin are located on your website somewhere (usually in a "js" folder). I suspect that you are getting a JS error because the script file can't be found.

And it's true that you don't need the type="text/javascript" and a <script> is all you need.
raw10
 
Posts: 81
Joined: Tue Apr 12, 2011 2:46 pm

Re: Can't get SlideIO to work

Postby sandyhon! » Mon Oct 15, 2012 2:13 pm

Code: Select all
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>SlideIO test</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="slide-wrap">
  <div class="slide">
    <img src="slide1.jpg" alt="Slide1" />
  </div>
  <div class="slide">
    <img src="slide2.jpg" alt="Slide2" />
  </div>
  <div class="slide">
    <img src="slide3.jpg" alt="Slide3" />
  </div>
    <div class="slide">
    <img src="slide4.jpg" alt="Slide4" />
  </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery.slideIO.js"></script>
<script>
  $(document).ready(function() {
    $(".slide-wrap").slideIO();
  });
</script>
</body>
</html>


@charset "utf-8";
/* CSS Document */

body {
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
background-color:#fff;
color:#000;
}

/* Set the width and height of the wrapper and the slides */
.slide-wrap,
.slide-wrap .slide {
width:900px;
height:300px;
}

.slide-wrap {
position:relative;
overflow:hidden;
}

/* Slides will come in from the top in this case */
.slide-wrap .slide {
position:absolute;
top:-300px;
left:0;
}

The jquery.slideIO.js plugin is located in the js folder. When I validate I do not get any error messages. In looking at the Fancybox example there was a css style sheet specifically for the plugin. Is that what I'm missing?
sandyhon!
 
Posts: 18
Joined: Sun Jun 24, 2012 5:24 pm

Re: Can't get SlideIO to work

Postby raw10 » Fri Oct 19, 2012 9:03 am

Were you able to get it working? I just wanted to reiterate that the best approach when you have any issues is to use the console. Firebug in Firefox or Chrome's inspector are my tools of choice. Validating really doesn't do much to help you during development except make sure you are using the correct tags and not making malformed HTML, and it certainly isn't a replacement for getting comfortable with using a good web inspector.

Secondly, you want to use the inspector because it shows what the current state of the page is (as it is being manipulated by JavaScript). So any time you are implementing JavaScript, even if it's someone else's plugin, it's a good idea to make sure to pull up the console and look for any errors. It will save you lots of time and headaches, I assure you!
raw10
 
Posts: 81
Joined: Tue Apr 12, 2011 2:46 pm


Return to Web Design

Who is online

Users browsing this forum: No registered users and 1 guest

cron