Installing jquery plugin

Question

I'm a novice and I'm trying to create a carousel gallery on a website.

I've been trying to get owlcarousel to work for a while now. I've read numerous posts and how to's but I just don't understand what I'm doing wrong.

The website is http://www.vicandross.com/victoriaaustin

and the code is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Victoria Austin</title>

<head>

<link rel="stylesheet" type="text/css" href="_ui/css/screen.css"></link>

<link rel="icon" type="image/png" href="http://vicandross.com/_ui/images/vricon.png"></link>


<link rel="stylesheet" href="/owl-carousel/owl.carousel.css"></link>

<link rel="stylesheet" href="/owl-carousel/owl.theme.css"></link>

</head>

<body>

<div class="logo_row" style="background:#ffdacf;padding:0">
<div style="width:996px;text-align:center;margin:0 auto;background:#ffdacf;padding:20px 0">
<a href="/">
<img alt="victoria austin" src="http://www.vicandross.com/victoriaaustin/_ui/image/logo.png">    
</img>
</a>
</div>
</div>


<div id="owl-example" class="owl-carousel">
<div> <img src="http://www.vicandross.com/victoriaaustin/_ui/images/logo.png"></img></div>
<div> <img src="http://www.vicandross.com/victoriaaustin/_ui/images/cookies3.jpg"></img></div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1 /jquery.min.js"></script>
<script type="text/javascript" src="/owl-carousel/owl.carousel.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$("#owl-example").owlCarousel();
items: 1,
  loop: true,
  margin: 10,
  lazyLoad: true,
  merge: true, 
  video: true,
  responsive:{  
    480:{
      items:2
},

678:{
  items:3
},

960:{
  items:5
}
}
   });
</script>



</body>
</html>

I would really appreciate someones advice.

Thank you

On your website /owl-carousel/owl.carousel.js throws 404. Please provide more details. Where is this file on your disk relatively to your script? Are you doing some rewrites on HTTP server? — ElmoVanKielmo
– ElmoVanKielmo, Commented May 15, 2014 at 18:03
@ElmoVanKielmo thanks, i was using the wrong folder name (no hyphen). — user3641990
– user3641990, Commented May 15, 2014 at 19:58
@DaveNewton The file was at victoriaaustin/owlcarousel/ not /owlcarousel/ (the index file is in www.vicandross.com/victoriaaustin)and so I've fixed that. I've just looked at web console in firefox and it says: "TypeError: $(...).owlCarousel is not a function" — user3641990
– user3641990, Commented May 15, 2014 at 20:16
You're still looking for your files in the wrong location. When you go to a page like vicandross.com/victoriaaustin and link to a file at victoriaaustin/somefile the link actually becomes vicandross.com/victoriaaustin/victoriaaustin/somefile. — Dana K
– Dana K, Commented May 15, 2014 at 23:53

Dave Newton · Accepted Answer · 2014-05-15 18:02:42Z

1

Exactly what the JS console is telling you; you have a malformed object around line 41-43:

$(document).ready(function() {
    $("#owl-example").owlCarousel();
    items: 1,
    loop: true,

You can't randomly start using object literal syntax in the middle of the source.

Did you mean to pass an object to the owlCarousel() method, e.g.,

$("#owl-example").owlCarousel({
    items: 1,
    loop: true,
    ... etc ...
});

Unrelated to the issue: when asking a question you need to provide actionable information, e.g., what happens, what's supposed to happen, info from the JS console (in cases like this where it's HTML/JS interaction), and so on.

answered May 15, 2014 at 18:02

Dave Newton

161k27 gold badges264 silver badges311 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ElmoVanKielmo Over a year ago

Yeah, this would solve the problem if carousel js and CSS were reachable by thy browser...

Dave Newton Over a year ago

@ElmoVanKielmo Yep, that also appears to be an issue :)

user3641990 Over a year ago

@DaveNewton Thanks for taking the time to offer. I'll take on board your advice about the kind of info I need to give when posting.

user3641990 Over a year ago

@DaveNewton What's supposed to happen: The plugin is for a scrolling gallery. The logo further down the page and the picture of the girl are objects in the carousel. If the plugin was working correctly they would be side by side and you would be able to move them. I hope that's the kind of thing you meant.

user3641990 Over a year ago

@DaveNewton with regards to passing objects etc., I was just trying to follow some of the guidance I found on the internet. For now I'm just interested in knowing that the plugin is correctly installed! Then I will start learning more about customisation. I hope that answers your question.

Dana K · Accepted Answer · 2014-05-15 18:11:50Z

0

Your looking for the plugins js and css files in the owl-carousel folder. Your folder is actually named owlcarousel. No hyphen.

answered May 15, 2014 at 18:11

Dana K

3801 silver badge10 bronze badges

1 Comment

Dave Newton Over a year ago

That's an issue, but not the reason for the syntax error on page load.

Collectives™ on Stack Overflow

Installing jquery plugin

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related