Cannot initialize javascript in Foundation 5 Orbit slider - javascript

I cannot initialize a Foundation orbit slider. Since my code was not working, I tried following strictly what the tutorial says. So I am following the tutorials in the Zurb Foundation website in order to build a basic slider:
http://foundation.zurb.com/docs/components/orbit.html
http://foundation.zurb.com/docs/javascript.html
And it is not initializing the slider. I cannot figure why after many attempts. The code I am using is the code below. If you want to test it, just uncompress the Foundation libraries and rename the folder to foundation.
When I load the page, there is no script error in the Chrome console.
Thanks for your help
<html>
<head>
<script type="text/javascript" src="foundation/js/vendor/modernizr.js"></script>
</head>
<body>
<script src="foundation/js/vendor/jquery.js"></script>
<script src="foundation/js/vendor/fastclick.js"></script>
<script src="foundation/js/foundation.min.js"></script>
<ul data-orbit>
<li>
<img src="http://foundation.zurb.com/docs/assets/img/examples/satelite-orbit.jpg" alt="slide 1" />
<div class="orbit-caption">
Caption One.
</div>
</li>
<li class="active">
<img src="http://foundation.zurb.com/docs/assets/img/examples/andromeda-orbit.jpg" alt="slide 2" />
<div class="orbit-caption">
Caption Two.
</div>
</li>
<li>
<img src="http://foundation.zurb.com/docs/assets/img/examples/launch-orbit.jpg" alt="slide 3" />
<div class="orbit-caption">
Caption Three.
</div>
</li>
</ul>
<script>
$(document).foundation();
</script>
</body>
</html>

I think you probably forgot to add the style sheets.
<link rel="stylesheet" href="./foundation/css/normalize.css">
<link rel="stylesheet" href="./foundation/css/foundation.css">
Also if the foundation foundation folder is in the same folder as your html document then the path should probably be ./foundation :
<script type="text/javascript" src="./foundation/js/vendor/modernizr.js"></script>

Related

Lightbox Not Working Onto (Any)Browser

I watched a tutorial on a simple lightbox, and I am trying to figure out why it is not working for me. I am using http://lokeshdhakar.com/ version of the lightbox.
I do not know what the issue is. When I type it through the text editor I am using it just opens up the image in a new window. But just now in the code.io , it opened it up as the proper lightbox. I am so confused on what is happening.
Here is my code.
<head>
<meta charset="utf-8">
<title> Fine Art</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles5.css" rel="stylesheet" type="text/css">
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<link href="fineart.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?
family=Roboto:400,100,400italic,500,900,300,500italic,900italic"
rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/lightbox.min.js"></script>
</head>
<body>
<h1 class="fineart"> B & W Photo </h1>
<div id="page"><!--beginning of sidebar-->
<div id="sidebar">
<div><img id="logo" src="img/logo.png"/>
</div>
<div>
<ul class="sb">
<li > Home </li>
<li > About </li>
<li > Works </li>
<li > Resume </li>
</ul>
</div>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</div><!--end of sidebar-->
<div class="container-a4">
<ul class="caption-style-4">
<li>
<img src="http://i68.tinypic.com/2re64y0.jpg" alt="blur">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1><a href="http://i63.tinypic.com/9lhaj9.jpg" data-
lightbox="photos">Blur</a></h1>
<p> Photo Series </p>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
(here's the rest)
http://codepen.io/kasiariele/pen/jbjVgr
Like I said, I'm not sure why its working in the site editor, but when I save and refresh onto the browser it opens the image on a new page instead of the lightbox. Please help!
You need to order your javascript libraries correctly.
You are loading lightbox.min.js before loading jquery.min.js (which is a dependency for how you are using lightbox).
Here is a direct quote from the lightbox website.
If you already use jQuery on your page, make sure it is loaded before lightbox.js. jQuery 1.7 or greater is required.
You should also load all of your scripts together right before your </body> closing tag, like so:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="js/lightbox.min.js"></script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>

Images dont slide in orbit slider Foundation

I'm trying to add Foundation Orbit Slider to my web page. It looks easy and I've got to see the images and the prev & next buttons, but if I click on prev and next buttons the orbit slider doesn't move at all. The images doesn't slide and I don't know why, beacuse I've seen many examples and I think my code looks the same. Any help woud be appreciated
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="altiria webapp">
<link rel="stylesheet" href="assets/css/foundation.min.css">
<link rel="stylesheet" href="assets/css/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/jquery-ui.css">
<link rel="stylesheet" href="assets/css/jquery-ui.structure.css">
<link rel="stylesheet" href="assets/css/jquery-ui.theme.css">
<link rel="stylesheet" href="assets/css/app.css">
<script src="assets/js/modernizr.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery-ui.js"></script>
<script src="assets/js/foundation.min.js"></script>
</head>
<body>
<div class="orbit-container">
<ul class="example-orbit" data-orbit>
<li>
<img src="assets/images/paisaje1.jpg" alt="slide 1" />
<div class="orbit-caption">
Caption One.
</div>
</li>
<li class="active">
<img src="assets/images/paisaje2.jpg" alt="slide 2" />
<div class="orbit-caption">
Caption Two.
</div>
</li>
<li>
<img src="assets/images/paisaje3.jpg" alt="slide 3" />
<div class="orbit-caption">
Caption Three.
</div>
</li>
</ul>
<!-- Navigation Arrows -->
Prev <span></span>
Next <span></span>
<!-- Slide Numbers -->
<div class="orbit-slide-number">
<span>1</span> of <span>3</span>
</div>
<!-- Timer and Play/Pause Button -->
<div class="orbit-timer">
<span></span>
<div class="orbit-progress"></div>
</div>
</div>
<!-- Bullets -->
<ol class="orbit-bullets">
<li data-orbit-slide-number="1"></li>
<li data-orbit-slide-number="2" class="active"></li>
<li data-orbit-slide-number="3"></li>
</ol>
<script>
$(document).foundation();
</script>
</body>
It looks like you have a mix of the pre-rendered HTML and rendered HTML on your page. You don't need the chunks of code labeled with comments (navigation arrows, slide numbers, timer, bullets, etc); Foundation will render them for you.
In addition, it's possible that your class="example-orbit" is interfering and, unless you need it, I'd suggest removing it.
Important to note: According to the Foundation website, "Orbit has been deprecated, meaning that it is no longer supported." They officially recommend using a different image slider instead of their orbit.

Everyone recommended lightbox... it still doesn't do what it apparently should

I'm trying to make an image gallery on my site so that I can put screenshots onto blog articles where they will be relevant. After spending several hours working on a custom jquery solution using my own code and getting no help whatsoever from anywhere on the net, I caved and decided to use lightbox.
I followed the instructions to set it up on this page however, it still does nothing. Essentially all I've done is put a link to the image on my page...
Here's my code as rendered on the page (url below):
<head>
<link href="/js/lightbox/css/lightbox.css" rel="stylesheet" />
<!--[if lte IE9]>
<link href="/css/ie.css" type="text/css" rel="stylesheet" />
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="/js/lightbox/js/lightbox.min.js"></script>
<script src="/js/lightbox/js/jquery-1.11.0.min.js"></script>
</head>
<body>
<!-- skipping irrelevant content -->
<h3 id="screenshots">Screenshots</h3>
<div class="screenshots">
Image #1
<img src="http://www.loganyoung.za.net/images/articles/logan-mvc-error-big.png" alt="" width="150" height="150" class="alignleft" />
<img src="http://www.loganyoung.za.net/images/articles/logan-mvc-error-small.png" alt="" width="150" height="150" class="alignleft" />
</div>
<!-- skipping more irrelevant content -->
</body>
</html>
URL http://loganyoung.za.net/error-reporting-in-mvc/
If anyone can tell me what I did wrong, I'd greatly appreciate it.
Just made sure jQuery was referenced in the right place (above all the lightbox crap) woopdeedoo

Javascript not wanting to work?

For some odd reason this image slider does not want to work can anyone point out the problem i have a feeling it is with including the javascript also the does not want to work also so i went with :
<link rel="stylesheet" type="text/css" href="includes/css/slider.css"></link>
<link rel="javascript" type="text/javascript" href="includes/js/slider.js"></link>
<link type="text/javascript" src="includes/js/jquery-1.5.2.min.js"></link>
or is this the correct way either way it dont seem to work?
<link rel="stylesheet" type="text/css" href="includes/css/slider.css"></link>
<script rel="javascript" type="text/javascript" href="includes/js/slider.js"></script>
<script type="text/javascript" src="includes/js/jquery-1.5.2.min.js"></script>
Edit full code:
<div class="mask">
<ul class="imgHolder">
<li>
<img width="270" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/270px-The_Earth_seen_from_Apollo_17.jpg" />
</li>
<li>
<img width="270" src="http://www.mallorcaweb.net/masm/Planetas/Jupiter.jpg" />
</li>
<li>
<img width="270" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/280px-FullMoon2010.jpg" />
</li>
<li>
<img width="270" src="http://static.ddmcdn.com/gif/sun-update-1.jpg" />
</li>
<li>
<img width="270" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Neptune.jpg/240px-Neptune.jpg" />
</li>
</ul>
</div>
<ul class="thumbHolder">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<span class="control Bleft">Prev</span>
<span class="control Bright">Right</span>
Give this a try:
<link rel="stylesheet" type="text/css" href="/includes/css/slider.css"></link>
<script type="text/javascript" src="/includes/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="/includes/js/slider.js"></script>
Notice that I have removed the rel tag, and I have added leading slashes at the beginning of each path, so that it always loads from the root.
Make sure you include the jQuery script before all dependent scripts, i.e. all scripts that use jQuery.
--
Also, link tags are self closing and script tags are used for js files not link tags.
Link tag is used to pointing and adding css files inside page where as script tag is used to add client side script into code example vbscript and javascript etc.
One more thing you need to include jQuery before any of other jQuery plugin which are depended on jQuery.
Example
<link rel="stylesheet" type="text/css" href="includes/css/slider.css" />
<script type="text/javascript" src="includes/js/jquery-1.5.2.min.js"></script>
<script rel="javascript" type="text/javascript" href="includes/js/slider.js"></script>

How to use slicebox

I am trying to get slicebox to work in a test page. From the documentation, it seems I needed to use the slicebox css file and have a jquery script linked up along with slicebox.js. From there, I thought it was as simple as calling the function in the script as in "$('#sb-slider').slicebox(); But the pictures do not even show up.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Slicebox Test</title>
<link rel="stylesheet" type="text/css" href="css/slicebox.css" />
</head>
<body>
<ul id="sb-slider" class="sb-slider">
<li>
<img src="images/1.jpg" alt="image1"/>
</li>
<li>
<img src="images/2.jpg" alt="image2"/>
</li>
<li>
<img src="images/3.jpg" alt="image1"/>
</li>
<li>
<img src="images/4.jpg" alt="image1"/>
</li>
<li>
<img src="images/5.jpg" alt="image1"/>
</li>
<li>
<img src="images/6.jpg" alt="image1"/>
</li>
<li>
<img src="images/7.jpg" alt="image1"/>
</li>
</ul>
<div>
Next
Previous
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.slicebox.js"></script>
<script type="text/javascript">
$("#sb-slider").slicebox();
</script>
</body>
</html>
Do you have the css and the js in this folders?
css/slicebox.css
js/jquery.slicebox.js
Maybe that is the problem. You have to download and put that in that folder
I think you need to also link the included modernizer script in there.
<script type="text/javascript" src="/scripts/modernizr.custom.46884.js"></script>
I have it working but not in all browsers/platforms.
You do need to add a ready function.
$(document).ready(function() {
$("#sb-slider").slicebox();
});

Categories