i found this lightbox example on stackoverflow:
Why is the lightbox jQuery plugin not working for me?
i did ask a question there but it was deleted and i was told to use the "ask a question button" so here i am
this code does not run:
<html>
<head>
<!--
**** Things you need to do****
1. SPECIFY LIGHTBOX CSS FILE
2. SPECIFY JQUERY JS (jquery-1.7.2) FILE
3. SPECIFY LIGHTBOX JS FILE
-->
<link rel="stylesheet" href="http://lokeshdhakar.com/projects/lightbox2/css/lightbox.css" type="text/css" media="screen" />
<script src="http://lokeshdhakar.com/projects/lightbox2/js/jquery-1.7.2.min.js"></script>
<script src="http://lokeshdhakar.com/projects/lightbox2/js/lightbox.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li>Spring</li>
<li>Summer</li>
<li>Fall</li>
<li>Winter</li>
</ul>
<div id="tabs-1">
<a href="https://www.google.de/logos/doodles/2015/229th-anniversary-of-the-first-ascent-of-mont-blanc-5711572991213568.2-hp.jpg" rel="lightbox" >
<img src="https://www.google.de/logos/doodles/2015/229th-anniversary-of-the-first-ascent-of-mont-blanc-5711572991213568.2-hp.jpg" width="300" height="200">
</a>
</div>
</div>
</body>
</html>
all the "versions" are specified...how can it not work? i just get a small picture and if i click on it it behaves like a normal link.
If you copied this verbatim, the error is the fact that the jQuery script included in that sample no longer exist. You can notice this easily in your browser's developer console. So you have to find the required jQuery version from some other place.
I would recommend using some other scripts that are usable with more current jQuery version though, otherwise you'll be forced to use an ancient one.
Include your scripts before </body> tag. Then lightbox will be work correctly.
Related
Lightbox shows the enlarged image in a popup, but nothing else. No title and no navigation and closing symbols, no frame-creating animation behavior. I must use chrome's back arrow to return to the original image. I tested Lightbox in www.yurowcreates.com/Lville60. (To view, use the tab labeled "May 3rd" then click the picture in the upper left-hand corner.) I am also using Bootstrap. Could there be any conflicts? I have followed all installation instructions including providing paths to the navigation symbols and using the proper ordering of my HTML link tags and javascript script tags. (See below)
My HTML markup is as follows:
In the head section:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/css/bootstrap.min.css" integrity="sha384-
PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
crossorigin="anonymous">
<link rel="stylesheet" href="Style.css" type="text/css">
<link rel="stylesheet" href="lightbox.css" type="text/css">
In the body section;
<div class="container">
<div class="row mb-3">
<div class="col">
<img class="mb-5 mb-sm-0" src="images/sandyandstu.jpg" width="300" height= "200">
</div>
...two other images in the same row go here...
</div>
,,,
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
... (ajax and bootstrap scripts)...
<script src="lightbox.js"></script>
</body>
Check that image paths are correct and modify lightbox.css accordingly to your file structure
I need to include Google Maps API in my AngularJS application. To do so, I've created this Plunker from this JSFiddle.
I think I have to edit index.html but I do not know how.. Thanks for your help
index.html:
<div ng-app="mapsApp" ng-controller="MapCtrl">
<div id="map"></div>
<div id="class" ng-repeat="marker in markers | orderBy : 'title'">
{{marker.title}}
</div>
</div>
Here is an updated plunkr. ideally put the script that i've put in script tags in a javascript file (save as all files> .js) and then link it in as <script src= "location.js"></script> or whatever you call it (make sure your path is correct). put the style in a css stylesheet and include it like <link rel = "stylesheet" src="style.css"> or whatever.
don't forget to include
<script src="http://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js"></script>
you didn't have this in your initial plunker. it was an external resource in the fiddle.
I have tried to implement the latest version of Lightbox as of 30 June 2015. I have loaded the js files (jquery.min.js and lightbox.js in that order). I also have added the css line to my head section as well. I have even tried loading lightbox.min.js
I have added the data-lightbox attribute to the image ink. When I click on the link to show the image, all that happens is I go to the image itself. It is like I opened the image from my local machine in a browser. No lightbox effect or features at all.
The page in question can be seen at http://www.kilajager.com/new/bs.php
The 5 images side by side at the top are my links to the full image.
Below are snippets of the code:
<head>
<title>Kila Jager Modeling Portfolio | Portfolio</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
<link href="css/lightbox.css" rel="stylesheet" type="text/css" media="all">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<script src="js/jquery.min.js"></script>
<script src="js/lightbox.js"></script>
</head>
<a href="images/bs02.jpg" class="b-link-stripe b-animate-go thickbox play-icon" data-lightbox="bonnie" data-title="Image 02">
<img src="images/bsslid2.png" class="img-responsive" alt="" />
</a>
The simple instructions in Lightbox 2 website are currently inadequate (as of now, they have been updated to be adequate).
Lightbox 2 will not work with versions of jQuery below 1.7. And the placement of the <script> tag matters.
Use jQuery 1.7 or above.
If you don't already use jQuery in your page, simply use lightbox-plus-jquery.min.js instead as it includes jQuery 2.1.4.
If you already use it, upgrade to jQuery 1.7 or above and test out your existing jQuery-based code and plugins. Hopefully nothing else breaks =)
Put the Lightbox 2 <script> tag (for the JavaScript file) at the end of the page, just before the body closing tag (</body>).
The <link> tag for the CSS can remain in the <head> tag.
Why does adding AngularJS to a page break it? What can I do to allow it to function correctly? Controls stop rendering. Menus stop expanding.
I am trying to divide the index.html page of an existing Bootstrap theme into partials / templates. Unfortunately, as soon as I move the HTML out of the index.html the controls on that page break.
The theme I am using is KingAdmin v1.3 from WrapBootstrap.com: https://wrapboo...
The only markup I'm adding is...
ng-app="app"
<div ng-include="'shell.html'"></div>
<script src="assets/thirdparty/angular/1.2.26/angular.js"></script>
<script src="assets/app/app.js"></script>
The shell.html contains only the portion of the body that was in the index originally...
WITHOUT ANGULAR:
WITH ANGULAR:
INDEX.HTML:
<head>
<title>Dashboard | KingAdmin - Admin Dashboard</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="KingAdmin - Bootstrap Admin Dashboard Theme">
<meta name="author" content="The Develovers">
<!-- CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/css/main.css" rel="stylesheet" type="text/css" media="screen">
<!--[if lte IE 9]>
<link href="assets/css/main-ie.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/css/main-ie-part2.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/kingadmin-favicon144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/kingadmin-favicon114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/kingadmin-favicon72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="assets/ico/kingadmin-favicon57x57.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
</head>
<body class="dashboard">
<div ng-include="'shell.html'"></div>
<!-- Javascript -->
<script src="assets/js/jquery/jquery-2.1.0.min.js"></script>
<script src="assets/js/bootstrap/bootstrap.js"></script>
<script src="assets/js/plugins/modernizr/modernizr.js"></script>
<script src="assets/js/plugins/bootstrap-tour/bootstrap-tour.custom.js"></script>
<script src="assets/js/king-common.js"></script>
<script src="assets/js/plugins/stat/jquery.easypiechart.min.js"></script>
<script src="assets/js/plugins/raphael/raphael-2.1.0.min.js"></script>
<script src="assets/js/plugins/stat/flot/jquery.flot.min.js"></script>
<script src="assets/js/plugins/stat/flot/jquery.flot.resize.min.js"></script>
<script src="assets/js/plugins/stat/flot/jquery.flot.time.min.js"></script>
<script src="assets/js/plugins/stat/flot/jquery.flot.pie.min.js"></script>
<script src="assets/js/plugins/stat/flot/jquery.flot.tooltip.min.js"></script>
<script src="assets/js/plugins/jquery-sparkline/jquery.sparkline.min.js"></script>
<script src="assets/js/plugins/datatable/jquery.dataTables.min.js"></script>
<script src="assets/js/plugins/datatable/dataTables.bootstrap.js"></script>
<script src="assets/js/plugins/jquery-mapael/jquery.mapael.js"></script>
<script src="assets/js/plugins/raphael/maps/usa_states.js"></script>
<script src="assets/js/king-chart-stat.js"></script>
<script src="assets/js/king-table.js"></script>
<script src="assets/js/king-components.js"></script>
<script src="assets/thirdparty/angular/1.2.26/angular.js"></script>
<script src="assets/app/app.js"></script>
</body>
</html>
UPDATE 2014-11-25
I've confirmed this is not me. I had a friend attempt to convert a single page in the template to Angular partials using ng-include tags and setting it up behind a proper Node.JS server. He had the same results. As soon as Angular renders the first page, tons of functionality breaks. the expand/collapse logic everywhere stops working. Most of the controls stop rendering properly.
NOTE
Someone mentioned that the problem might be caused by the use of ng-include tags and partials WITHOUT the partial file having a contoller. The side bar, top bar, breadcrumb are all being included as static HTML / Jade files via an ng-include. A route is passing in the controller for the main body, however the problems exist within this area as well.
Here is a link to the template on the developer's site:
KingAdmin Dashboard Theme
And here is how it currently looks:
Quick look at the modifications from the index.html page:
PARTIALLY RESOLVED:
Not sure if this would be considered a hack. Someone with more knowledge of jQuery and Angular could / should chime in to tell you if this is safe.
STILL UNRESOLVED:
This seems to work while the page is being loaded for the first time. It does NOT work if you navigate away from the page and back again (using the back button, for example). I believe this is happening due to Angular injecting the body and NOT re-rendering the entire page... or the scripts. There's probably something that can be done within each template that uses jQuery (re-init somehow, etc.).
There seem to be tons of questions / examples discussing similar problems with the DOM, jQuery, and using timeouts to correct them:
AngularJS: How can I run a directive after the dom has finished rendering?
The entire fix is in with your common resource scripts, king-common.js, etc.. They each have several rendering functions that appear to be called up front, however the DOM is still being rendered.
Example:
$(document).ready(function(){
$('.main-menu .js-sub-menu-toggle').click( function(e){
[snip]
$li.find('.sub-menu').slideToggle(300);
});
By wrapping each of these operations in a setTimout you postpone rendering until after the DOM is modified:
$(document).ready(function(){
setTimeout(function(){
$('.main-menu .js-sub-menu-toggle').click( function(e){
[snip]
$li.find('.sub-menu').slideToggle(300);
},1000);
);
These have been moved to the tail end of your scripts.jade / scripts.html file. This was done initially as an attempt to delay the firing of these methods, so this might be unnecessary. Still, that's part of how we arrived at a functioning template.
Your problem is Bootstrap is not watching for the newly created elements on your page that angular compiles for you. You can create directives that can call the the Bootstrap jQuery method that add the Bootstrap bindings to your element, such as ($('.dropdown').dropdown()).
There is a wonderful AngularJS library that replaces that is an angular agnostic rewrite of bootstrap.js that may fix this for you: http://angular-ui.github.io/bootstrap/
For a quick hack, if you want all your elements with the .dropdown class to use Bootstrap dropdown, you would create a directive like this.
angular.module('app')
// Directives: https://docs.angularjs.org/guide/directive
.directive('dropdown', [
// Use window dependency
'$window',
// Returns a directive
function ($window) {
return {
// Restrict to attribute, or class name so can be used like so:
//
// <a class="dropdown btn btn-primary">Dropdown button</a>
// or
// <a dropdown class="btn btn-primary">Dropdown button</a>
restrict: 'AC',
link: {
post: [
// This dependency gives you the element with
// the directive wrapped as a jQuery object
'$element',
function ($element) {
$element.dropdown();
}
]
}
};
})
I think you should reconsider your dependencies. The elements broken in your UI seems to require jquery, for instance: jquery.easypiechart.min.js
At https://docs.angularjs.org/misc/faq you can read:
Does Angular use the jQuery library? Yes, Angular can use jQuery if
it's present in your app when the application is being bootstrapped.
If jQuery is not present in your script path, Angular falls back to
its own implementation of the subset of jQuery that we call jQLite.
Angular 1.3 only supports jQuery 2.1 or above. jQuery 1.7 and newer
might work correctly with Angular but we don't guarantee that.
Notice that angular requires jQuery 2.1 or above, whilst Bootstrap require the latest 1.1.x version of jQuery (Bootstrap does not support jQuery 2+ due to jQuery 2 does not support IE8).
After reading the above you should also read:
Does one need jQuery when using Twitter Bootstrap with Angular.js?
https://github.com/angular-ui/bootstrap/issues/2765
I'm trying to do the AngularJS tutorial here for v1.2.12, and what I'm getting on my localhost is much different from the live demo they have on the tutorial itself.
Mainly, just starting with the first couple steps, it is not reading my expressions. They are just there in plain text, like they're cut and paste out of the code.
For instance in step 0, my local host is giving me
Nothing here {{'yet' + '!'}}
while the live demo on the site gives
Nothing here yet!
The same seems to happen for other steps. For some reason step #1 works just like it does on the webpage.
What's up with this? Did I forget to install some part of Angular? Or what? Is the tutorial just messed up?
Here's an example of the code that still does it wrong:
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<script src="bower_components/angular/angular.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</div>
<div class="col-md-10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I used git checkout -f step-5 for this one, and instead of giving me a long list of phones like it does in the demo, I just see {{phone.name}} and {{phone.snippet}} when I run index.html on a local server.
Answered!
The NPM install was not allowing bower to do the proper installs.
This was fixed by installing Bower globally, and executing "bower install" from the command line while in the proper directory that the tutorial is saved in.
Probably You are missing something. All basic angular tutorials works. Unfortunately without code its impossible to give a real reason. We can only guess that:
You are not including properly angularjs.js files, and angular cant bootstrap Your code.
You are trying to run Your html locally straight via browser by opening html file, not by serving it by any server instance (like apache or nodejs).
Such solution will not work whrn including scripts because of some safety restrictions. Use a server, or instead linking script file from disk, try using CDN angular links.
3 . Your angular code is wrong.
this is a demo hope this will help you
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
Nothing here {{'yet' + '!'}}
</body>
</html>
i think you forget to add "angular js" or ng-app directive