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
Related
The graphic designer gave me for each icon he created different sizes.
How to make integrate them in angular html file ?
How to use the biggest icons for desktop, smaller for tablets and smallest for mobile ?
hide each icons when you don't want to show them
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div id="big-icon" class="hidden-sm hidden-xs hidden-md"></div>
<div id="small-icon" class="hidden-lg hidden-xs hidden-md"></div>
<div id="smallest-icon" class="hidden-lg hidden-sm hidden-md"></div>
</body>
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.
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.
I've downloaded the script for the latest version of lightbox2. I've added both .js files as well as the .css file to my head tag. I've used the new attributes in my code for the images, and I've made sure all the files are in the folder that they're supposed to be in. Still, I cannot get the functionality of when you click the thumbnail, the larger image pops out.
Please help. Here is my head:
<head>
<meta charset="UTF-8" />
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah|Amatic+SC' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" HREF="index.css" />
<link href="css/lighbox.css" rel="stylesheet" />
<title>
Welcome! | DaveAyotte.com
</title>
</head>
And here is the section where I'm showing the pictures:
<div class="photobox">
<img src="img/img1thumb.jpg" />
<img src="img/img2thumb.jpg" />
<img src="img/img3thumb.jpg" />
<img src="img/img4thumb.jpg" />
<img src="img/img5thumb.jpg" />
</div>
edit: I actually just noticed that instead of creating a popout as it's supposed to, it's opening the picture outside of the main div of my website (used to hold everything in a uniform size), creating a scroll-bar that needs to be scrolled down a long way to view the clicked image.
Please check the lightbox.css file to see if its linked properly or not and add type attribute as well in the link tag of lightbox.css
You need to add rel attribute under anchor tag like this
<a href="color lef.jpg" data-type="album" rel="lightbox" >
<img src="color lef.jpg" width="100" height="100" />
</a>
<link href="css/lighbox.css" rel="stylesheet" />
should be
<link href="css/lightbox.css" rel="stylesheet" />
There is a spelling error in 'light'. Your original code is missing the 't'.
I am trying to build a tab set that would dynamically change on user action using bs-tabs angularstrap directive and ng-repeat (Say initially the tabs were a,b,c. On some user action it should change to x,y,z)
I am trying to do this by pointing the ng-repeat to a new array object on an user action say a click of a button.
Instead of the tab set getting refreshed, I am noticing a strange behavior
Ive recreated it in this plnkr, please have a look at it,
http://plnkr.co/edit/bpKDx56bieIshKaedzv6?p=preview
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>AngularStrap - Tab directive</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="//mgcrea.github.com/angular-strap/css/prettify.css" rel="stylesheet">
<!-- required libraries -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//mgcrea.github.com/angular-strap/js/angular-strap.js"></script>
<!-- optional libraries -->
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.0/fastclick.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"></script>
<link rel="stylesheet" href="style.css">
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div data-fade="1" ng-model="tabs.activeTab" bs-tabs>
<div ng-repeat="tab in tabs" data-title="{{tab.title}}"><p>{{tab.content}}</p></div>
</div>
<button type="button" class="btn btn-primary" ng-click="changeTabs()">Show different set of tabs</button>
</body>
</html>
Looking at the code it seems that the tab directive observes the active tab value and refreshes only the tab content using transclusion, whereas the tab title is only assigned initially.
I think the only way to change title dinamically is creating a new directive that creates a tab directive dinamically, initializing it with the fresh values.