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'.
Related
I expect there just to be a single load, but it looks like it's loading DM Sans three times when it's only loading Catamaran once. I'm loading the fonts using next.js in the _document.tsx file.
Here's the code
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght#0,100;0,200;0,300;0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Catamaran:wght#100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
Here's the font logs
I'd expect to only see one load for DM+Sans, but see three?
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
Now I am making Angular JS app.No error is shown in terminal, but by using Google's verification, many errors are shown in console like
I wrote in html file like
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/angular-ui-grid/ui-grid.css" />
<link rel="stylesheet" href="bower_components/angular-ui-grid/ui-grid.min.css" />
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
<link rel="stylesheet" href="bower_components/selectize/dist/css/selectize.css" />
so I think href cannot be found in program, for example href="bower_components/angular-ui-select/dist/select.css"
bower_components is under User directory so I added User/ to href, it is like
<link rel="stylesheet" href="User/bower_components/selectize/dist/css/selectize.css" />
However,same error happens.How can I fix this?I think url is wrong, but another thing cause error?
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.
<html lang="en">
<head>
<!-- favicon.ico -->
<link ng-if="A" href="images/favicon_a.ico" rel="icon" />
<link ng-if="B" href="images/favicon_b.ico" rel="icon" />
<link ng-if="B" href="images/animated_favicon_b.gif" rel="icon" type="image/gif" />
...
</head>
I want to display one icon, depending on what I have. In Chrome and Firefox everything is perfect, but in IE (even 11) I have problems:
ng-if doesn't work and I take only one icon every time
In IE 9 I cannot display the icon at all.
I tried everything with no results.
Any ideas?