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.
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 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.
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 have my application built with ExtJS 4.2.1
My app structure was generated using Sencha Cmd v4.0.1.45.
Im using some custom CSS in my app to give personalized style so my XTemplate items and also Im using AwesomeFont and FamFam Sprites for icons.
This is my resources directory in my app sencha cmd structure:
App.css is a custom CSS
BoxSelect.css is other custom CSS
chooser.css is other custom CSS
famfamfam.css is the CSS that will handle the famfam.png image sprite
font.css is the CSS that comes with AwesomeFont.
The application in development mode (without building) works great, but when I tried to build using Sencha CMD and then try to open the production Index.html I couldn't see any icon neither the styles applied from my custom CSS's files.
So what I ended up was to modify my app Index.html in order to move all my CSS references outside the tag.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Application</title>
<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<link rel="stylesheet" href="bootstrap.css">
<script src="ext/ext-dev.js"></script>
<script src="bootstrap.js"></script>
<!-- </x-bootstrap> -->
<!-- Ext Scheduler -->
<script src="lib/js/sch-all-debug.js"></script>
<script src="../Scripts/jquery-2.1.1.min.js"></script>
<script src="../Scripts/jquery.vegas.min.js"></script>
<script src="../Scripts/jquery.signalR-2.0.3.min.js"></script>
<!-- Ext Scheduler -->
<link rel="stylesheet" href="resources/css/sch-all-neptune.css">
<link rel="stylesheet" href="../Content/jquery.vegas.min.css">
<script src="app/Constants.js"></script>
<script src="app/Glyphs.js"></script>
<script src="app.js"></script>
<!-- </x-compile> -->
<link rel="stylesheet" href="resources/css/app.css">
<link rel="stylesheet" href="resources/css/boxselect.css">
<link rel="stylesheet" href="resources/css/fonts.css">
<link rel="stylesheet" href="resources/css/famfamfam.css">
<!-- view icons chooser style -->
<link rel="stylesheet" href="resources/css/chooser.css">
</head>
<body></body>
</html>
Doing this way worked fine but I would like to create a SASS so my custom CSS's files can be minified.
Any clue on what are the steps that I have to follow in order to create my SASS for my custom CSS's so when doing sencha app build production my CSS are minified?
Appreciate any help.
In your application folder, there should be sass folder. Move your CSS stylesheets to sass/etc/ and rename to *.scss, then run sencha app build. This should do the trick.
One caveat: I recall there was a bug in Cmd at some point, it didn't pick up extra SCSS files. If the above solution does not work for you, manually concatenate all CSS files into sass/etc/all.scss and it should work then.
I am new to AngularJS and am trying to build an Mobile Web application. As I started writing controllers, services and routes for various functionalities the index.html JS and CSS include seems to be growing day by day. For example, When I start writing controller, services for any functionality then am forced to include them in index.html. I am thinking there is a fundamental problem with the coding approach. If my home page route is "/home" or "/" then home.html should download only JS and CSS files related to home page. But home.html(view) seems to download the entire Javascript and CSS library for every page. How should I design my app in such a way only the functionality related controller, services, directives Javascript files should be downloaded for a page. I appreciate if anyone can explain with a simple example.
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/common/icomoon.css">
<link rel="stylesheet" type="text/css" href="css/lib/angular/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/menu.css">
<link rel="stylesheet" type="text/css" href="css/carousel.css">
<link rel="stylesheet" type="text/css" href="css/pdp.css">
<link rel="stylesheet" type="text/css" href="css/pdp_751_1.css">
<script src="js/lib/jquery-1.7.1.min.js"></script>
<script src="js/lib/jquery.cycle.all.js"></script>
<script src="js/lib/jquery.touchwipe.js"></script>
<script src="js/lib/angular/angular.min.js"></script>
<!-- This is the route provider for the main app... -->
<script src="js/app.js"></script>
<script src="js/controllers/c-home.js"></script>
<script src="js/controllers/c-browse.js"></script>
<script src="js/controllers/c-product-details.js"></script>
<!--<script src="js/directives/directives.js"></script>-->
<script src="js/directives/d-product-details.js"></script>
<script src="js/services/s-home.js"></script>
<script src="js/services/s-browse.js"></script>
<script src="js/services/s-product-details.js"></script>
<script src="js/lib/angular/angular-resource.min.js"></script>
<script src="js/lib/ui-bootstrap-tpls-0.1.0.js"></script>
<script src="js/lib/iscroll.js"></script>
You should not worry so much about the combined payload size of your files, but more about the build process and making sure to reduce HTTP requests as much as possible (1 css, 1 js is all you should have in your home.html). This is more important. Also minify everything. I suggest you check out ng-boilerplate. Its a starting point for angular apps and has most of the best practices you should be employing.
https://github.com/joshdmiller/ng-boilerplate
Make sure to read all the readme files at the various directory levels.