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();
});
Related
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>
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>
This is the code in the script.js:
$(document).ready(function() {
$('#mainobject').fadeOut('slow');
});
And this is the code in the index.html:
<!DOCTYPE html>
<html>
<head>
<title>Hitler Map</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"></link>
<script type="text/javascript" src="script.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="header">
<h1 id="title">
Content
</h1>
</div>
<div id="footer">
</div>
<div id="mainobject">content1
<div id="aides">subcontent
<ul id="list1">
<li class="items">nananana batman</li>
<li class="items">woohoo</li>
</ul>
</div>
<div id="family">Family
<ul id="list2">
<li class="items">spoder-man</li>
<li class="items">dolan</li>
</ul>
</div>
</div>
</body>
</html>
The stylesheet works fine, but the Javascript is working neither locally nor on a server. Please help? It is a simple enough code.
You are not including Jquery
Add the following line inside head tag:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
Also close ul tag
<ul>
<li id="mainobject">some content</li>
</ul>
Assuming you added Jquery plugin to your document.
And
Wrong html
<ul>
<div id="mainobject">some content
<ul>
should be
<ul>
<li id="mainobject">some content </li> //seems here li.Div not allowed
</ul>
jQuery
$(document).ready(function() {
$('#mainobject').fadeOut('slow');
});
HTML
- Changed <div> to li, since div isn't allowed inside an <ul></ul> unordered list.
Always make sure you close all elements that need to be closed in HTML. In your sourcecode you forgot to close the <div> on which you wanted to use jQuery.
<head>
<title>some content</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"></link>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="header">
<h1 id="title">
Some more content
</h1>
</div>
<div id="footer">
</div>
<ul>
<li id="mainobject">some content</li>
<ul>
In case that your script.js is not the jQuery lib, add into the <head> tag
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
you must include your external script AFTER jQuery
Put script.js below the jquery, because it depend on jquery
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="script.js"></script>
Note: use minified version of jquery spped up the webpage
use <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> instead of <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
Also use Jquery migrate plugin for deprecated function works
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
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>
I have implemented a Phone Gap application using jQuery Mobile and java script for iPhone and android.
My app is almost completed.
Till now I used single index.html file for all the pages.
Now I need to use different html files for different pages.
So I have created multiple external html files for different pages, linked the references and added them in to www folder.
in that the i have a list view its css not visable
Main Page:- See page2 and page3 ref in index.html file
<div data-role="content">
<ul data-role="listview" data-theme="e" data-header-theme="a" data-dividertheme="a" id="List view">
<li data-role='list-divider' ><big>Lis view</big></li>
<li><a href='#page1' id='Page1' data-panel='main'>Page1 Information</a></li>
<li><a href='page2.html' rel="external" id='pagetwoid' data-panel='main'>Go to Page 2</a></li>
<li><a href='page3.html' rel="external" id='pagethreeid' data-panel='main'>Go to Page 3</a></li> </ul>
</div>
Page2:-
<!DOCTYPE html>
<html>
<head>
<title>Multiple htmls</title>
<meta id="viewport" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<!--
<link rel="stylesheet" href="inc/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="inc/jquery.mobile.splitview.css" />
<link rel="stylesheet" href="inc/jquery.mobile.grids.collapsible.css" />
<link rel="stylesheet" href="inc/jquery.mobile.structure-1.0.1.min.css" />
-->
<link rel="stylesheet" href="inc/jquery.alerts.css" />
<link rel="stylesheet" href="inc/jquery.mobile.datebox.css" />
<script charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" src="inc/jquery-1.7.1.js"></script>
<script type="text/javascript" src="inc/jquery.mobile.splitview.js"></script>
<script type="text/javascript" src="inc/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="inc/jquery.alerts.js"></script>
<script type="text/javascript" src="inc/iscroll-wrapper.js"></script>
<script type="text/javascript" src="inc/iscroll-lite.js"></script>
<script type="text/javascript">
alert('js Loadfed');
</script>
<style>
alert();
alert('css loaded');
</style>
</head>
<body>
<!--============= Page2 ===============--->
<div data-role="page" id="siteContacts" data-theme="e" >
<div data-role="header">
<h1>Page 2 </h1>
<a href="page2.html" id="EditButton" data-role="button" data-icon="gear" class="ui-btn-right" data-theme="e" >Edit</a>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" class="ui-listview" data-dividertheme="a">
<li data-role="list-divider"> <!--list Header --->
<div class="ui-grid-c"> <!--Section Headers Grid--->
<div class="ui-block-a" ><big> aaaa</big> </div>
<div class="ui-block-b" ><big> bbbb</big> </div>
<div class="ui-block-c" ><big> ccc</big> </div>
<div class="ui-block-d" ><big> e-sss</big> </div>
</div>
</li>
</ul>
</div>
</body>
</html>
Maybe I'm reading your code wrong, but it looks like the links to the jquery mobile stylesheets are commented out. You definitely need to have them defined in the HTML to get the styles applied.
Are you loading them someplace else that it not apparent from the code you posted?
PhoneGap requires you to manually set/allow aspects of your app in your "config.xml" file in the root directory.
The solution you are looking for, I believe, is this line:
<access origin="http://code.jquery.com" subdomains="true" />
You are allowing access to the external resource of "http://code.jquery.com" and allowing all of its subdomains. This means that you have just unlocked jquery mobile, which is what you are going for, as seen by your script tags:
<script type="text/javascript" src="inc/jquery-1.7.1.js"></script>
<script type="text/javascript" src="inc/jquery.mobile.splitview.js"></script>
These "src" attributes are now seen as "subdomains" of http://code.jquery.com, which you have just successfully allowed!