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>
Related
I noticed that there is a problem if both popbox.css and bootstrap.css are used. Does anybody know a solution for that?
Here is a fiddle from somebody to show how popbox works.
http://jsfiddle.net/kbwood/sV4bY/
If you load the bootstrap library additional to the popbox libraries
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
it will not work anymore.
Here is a not working example. Remove the bootstrap.min.css file to make it work
<!DOCTYPE html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>PopBox</title>
<link href="../static/css/popbox.css" type="text/css" rel="stylesheet" media="screen" charset="utf-8">
</head>
<body>
<div class="container">
<h1>PopBox</h1>
<div class='popbox'>
<a class='open' href='#'>
<img src='' style='width:14px;position:relative;'> Click Here!
</a>
<div class='collapse'>
<div class='box'>
<div class='arrow'></div>
<div class='arrow-border'></div>
Content from first popup
</div>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../static/js/popbox.js" type="text/javascript" charset="utf-8"></script>
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
<script type='text/javascript'>
$(document).ready(function(){
$('.popbox').popbox();
});
</script>
The problem is due to the collapse class you have applied to the div. In Bootstrap, these are hidden by default as it's part of the accordion feature. Either remove the class from that div or use a different name for it.
Example: http://jsfiddle.net/tpjjsqg6/
I have a issue with this plug in of jquery cycle2.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Usare jQuery Cycle2 (2) | Sintesi-design.it</title>
<link rel="stylesheet" type="text/css" href="css/fonts/font.css">
<link rel="stylesheet" type="text/css" href="css/template.css">
</head>
<body>
<div class="slideshow"
data-cycle-fx=carousel
data-cycle-timeout=0
data-cycle-carousel-visible=5
data-cycle-next="#next"
data-cycle-prev="#prev"
data-cycle-pager="#pager"
>
<img src="http://malsup.github.io/images/beach1.jpg">
<img src="http://malsup.github.io/images/beach2.jpg">
<img src="http://malsup.github.io/images/beach9.jpg">
</div>
<div class=center>
<a href=# id=prev><< Prev </a>
<a href=# id=next> Next >> </a>
</div>
<div class="cycle-pager" id=pager></div>
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.cycle2.js"></script>
<script src="jquery.cycle2.carousel.js"></script>
</body>
</html>
I downloded the code of the plug in like say the documentation.
The others effects works, only this with transition not, someone know why?
Thanks
<div class="cycle-slideshow"
http://jsfiddle.net/ska2hjr0/
According to documentation:
cycle-slideshow is a special classname which tells Cycle2 to
auto-initialize the slideshow when the page is loaded.
http://jquery.malsup.com/cycle2/demo/basic.php
Another method, add jquery code to page: $( '.slideshow' ).cycle();
But auto initialization is even better.
I'm using JQuery Mobile, and now I would like to navigate through pages with the minimum of loading amount of scripts everytime a page is being loaded, I mean that I would like to import only ONCE all the general scripts of all the pages (JQuery.js, jquery_mobile.js, main.js etc...) and
So I have an index.html with the following code :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<title>Hybrid App</title>
<link rel="stylesheet" href="jqueryMobile/jquery.mobile-1.4.4.css" />
<link rel="stylesheet" href="jqueryMobile/jquery.mobile.icons-1.4.4.css" />
<link rel="stylesheet" href="css/jquery.mmenu.css" />
<link rel="stylesheet" href="css/main.css" />
<script>window.$ = window.jQuery = WLJQ;</script>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="jqueryMobile/jquery.mobile-1.4.4.js"></script>
<script type="text/javascript" src="js/jquery.mmenu.min.js"></script>
<script type="text/javascript" src="js/initOptions.js"></script>
<script type="text/javascript" src="sharedResources/customersObject.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/messages.js"></script>
</head>
<body style="display: none;">
<div data-role="page" id="page">
<link rel="stylesheet" href="css/pages/splash-view.css" />
<div data-role="header" id="header" data-position="fixed"></div>
<div data-role="content" id="pageContent">
<div id="splash-wrapper">
<div class="splash-content">
Login
</div>
</div>
</div>
<div data-role="footer" id="footer" data-position="fixed"></div>
<nav id="menu">
<ul data-role="listview" data-inset="true">
<!-- list of items in the slide sidebar menu (called drawer menu in Andorid -->
</ul>
</nav>
<script src="js/pages/splash-view.js"></script>
</div>
</body>
so when clicking on the link I go to an external HTML file located in : pages/faqs-view.html with the following code :
<div data-role="page" id="page" data-url="pages/faqs-view.html">
<link rel="stylesheet" href="css/pages/faqs-view.css">
<div data-role="header" id="header" data-position="fixed"></div>
<div data-role="content" id="pageContent">
<div id="faqs-wrapper">
<div class="faqs-content">
<div data-role="collapsible-set" data-corners="false" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" id="faq-set">
</div>
</div>
</div>
</div>
<div data-role="footer" id="footer" data-position="fixed"></div>
<nav id="menu">
<p class="employee-name">Welcome, Ali</p>
<ul data-role="listview" data-inset="true">
<!-- list of items in the slide sidebar menu (called drawer menu in Andorid -->
</ul>
</nav>
<script src="js/pages/faqs-view.js"></script>
The problem is that when loading the faqs-view.html page, I can see that none of the scripts included in the <head> are being executed, I have tried to put them after the <body> tag, but it's the same, BUT the CSS files are being interpreted.
How can I achieve that ? Thank you.
Worklight-based applications are Single Page Applications. This means you should never navigate away from the index.html. Doing so will cause the app to lose its context to the Worklight framework, thus it will begin to fail.
If you'd like to add multi-page navigation to the application, you can do so using the API provided by 3rd-party frameworks. Here you are using jQuery Mobile.
You've changed the loading order of scripts. You shouldn't.
Use the Worklight Studio wizard in order to create an app template with jQuery Mobile (new project > new hybrid application (click on "configure javascript libraries" > select the library you would like to add))
Keep initOptions.js, main.js and messages.js where they are by default, at the bottom
The index.html you get is your template with jQuery Mobile
If you want to replace the bundled jQuery, you need to comment out (slide #6) the following script tag: <script>window.$ = window.jQuery = WLJQ;</script>. Worklight is bundled with jQuery 1.9.x.
For a bare-bones example of multi-page navigation in a Worklight-based application, using jQuery Mobile, take a look at this project.
As you navigate between pages, you only replace the contents of the data-role="page". The scripts have already been loaded. You can load additional scripts per where required when loading a specific page.
They are executed in the order you put them on the page.
window.$ = window.jQuery = WLJQ;
Cannot be executed before jQuery is included.
Edit:
When you load a new page without the header it's clear that it won't be excecuted because it is not there.
When you replace html in your page you should look at the "on" function for events.
My code as follows does not work. I;ve tried including the js files, also the custom js to activate each tab individually but it does not work.
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.min.css">
<title>Bootstrap Page Layout - Sample Demo</title>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
</body>
Can anyone point what am I doing wrong?
Check your link to the bootstrap.js file. It appears you are using the minified css... you probably want the minified js file too.
<script type="text/javascript" src="js/bootstrap.min.js"></script>
Depending on your browser, check for any errors in your web developer tools. In Chrome, this link will help: https://developers.google.com/chrome-developer-tools/
EDIT
It appears jQuery is missing from your file. Include this link in the head (although I recommend loading JS in the footer for progressive enhancement / improved loading):
<script src="//code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
Bootstrap You need to download and add jquery in your script. Something like this
<script type="text/javascript" src="/script/jquery-1.7.2.min.js" />
see here for your reference i added jquery v 1.7.2
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!