I try to integrate Lightbox2 in an existing website.
Head Code:
<head>
<link rel="stylesheet" media="screen" type="text/css" href="/css/style.css">
<link rel="stylesheet" type="text/css" href="/css/lightbox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="/js/lightbox.js">
</head>
Image Code:
<div class="image-wrapper">
<a href="/img/projects/folder/image_big.jpg" data-lightbox="lightboxImage">
<img src="/img/projects/folder/image_thumbnail.jpg" alt=" " class="project-image">
</a>
</div>
My problem is when I click the thumbnail it only opens the big image in a blank browser window instead of opening it in a lightbox.
I already checked the paths. And the browser console shows no errors.
I think I just missed something. But I don't know what it could be.
Would appreciate some help. Thank you!
According to instruction from the Lightbox2 Homepage you have to put the script tag refering to /js/lightbox.js file at the bottom of the </body> tag.
Include the Javascript at the bottom of your page before the closing <body> section:
<script src="path/to/lightbox.js"></script>
Related
When I do the CTRL click in both visual studio and chrome console, the link goes to the right stylesheet so I know the link is right but for some reason it doesn't show in the console under "sources", only the index and js. Its not loading any of the CSS either. No idea why.
<head>
<link ref="stylesheet" type="text/css" href="stylesheet.css">
<script src='javascript.js' defer></script>
</head>
<body>
As long as the stylesheet is in the same folder as this HTML file, you'll want to change your <link> tag to read: <link rel="stylesheet" type="text/css" href="stylesheet.css"> (Source: https://www.w3schools.com/css/css_howto.asp)
I'm trying to use Steroids with AngularJS for an application. Below is the stuff in my head tag.
<link rel="stylesheet" href="/vendor/ionic/css/ionic.css" />
<link rel="stylesheet" href="/stylesheets/application.css" />
<script src="http://localhost/cordova.js"></script>
<script src="/components/steroids-js/steroids.js"></script>
<script src="/components/angular/angular.min.js"></script>
<script src="/components/angular-touch/angular-touch.min.js"></script>
<script src="/components/lodash/dist/lodash.min.js"></script>
<script src="/components/restangular/dist/restangular.min.js"></script>
<script src="/models/<%= yield.controller %>.js"></script>
<script src="/controllers/<%= yield.controller %>.js"></script>
Now, I can tell the scripts are working, because the Angular stuff is. But the CSS won't load at all. It's in the /dist folder under the correct location, but it just won't load. Copy and pasting into a <style> works.
Any idea how I can fix this?
Thanks!
Try removing the DOCTYPE tag on your layout html file. It is a known issue, hope they fix this problem soon.
I've used colorbox in my project to show some details in a jQuery popup window. But the target page does not appear.
This is the code :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/colorbox.css" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.colorbox.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$(".iframe").colorbox({iframe:true, width:"70%", height:"70%"});
});
</script>
</head>
<body>
Click here
</body>
</html>
You can see at Here.
What's the problem ?
You are trying to display google.com in an iframe which is not as easy as with other sides.
It should work the way you did it with almost any other side.
Read this for more information: How to show google.com in an iframe?
I'm not sure with your purpose but if you want to embed google search on your website with iframe, you can try http://www.google.com/custom.
You can see demo here http://jsfiddle.net/devchill/LVunZ/
Click here
$(".iframe").colorbox({iframe:true, width:"70%", height:"70%"});
i am new to anything JQuery and only know basic HTML codes.
So I was wondering what why
<div data-inline="true">
Cancel
Save
</div>
did not work in my html file, even though I blatantly copied off the Jquery Documentation. The buttons did not appear side by side. Whereas when I tried
Cancel
Save
and the buttons appeared side by side.
Does it have to do with my importing the script?
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script
I'm not sure, but it is probale that:
the surrounding div causes that the anchors cannot be found by jQuery (or have different style)
you miss data-inline="true" in the upper lines
Cheers
i think you're referring to the documents from here.
my guess is that you didn't include the css file. jqm-docs.css
<head><base href="http://jquerymobile.com/test/docs/buttons/buttons-inline.html">
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>jQuery Mobile Docs - Buttons</title>
<link href="../../themes/default/" rel="stylesheet">
<link href="../_assets/css/jqm-docs.css" rel="stylesheet">
<script src="../../js/jquery.js"></script>
<script src="../../js/"></script>
<script src="../docs/docs.js"></script>
</head>
I am teaching myself how to build a gallery website for my artwork using CSS, and Dreamweaver as the script editor. I have found some good pdf's and the site was coming along nicely until I tried to incorporate Lightbox or prettyphoto. My thumbnails change to fullsreen but the effects aren't there. Are there any tutorials to show which files go where and examples of code?
Both of the options come with their own documentation, and typically an example download that you can view. If this isn't present, examine the source of of online demos to see how CSS files are referenced.
Lightbox / How to use?
# reference both jQuery and lightbox
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>
# reference the stylesheet
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" />
# indicate which links are lightbox links
<a href="bigImage.jpg" class="lightbox">
<img src="littleImage.jpg" />
</a>
# activate lightbox on lightbox links
$("a.lightbox").lightBox();
Prettyphoto / How to use?
# reference both jQuery and prettyphoto
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
# reference the stylesheet
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" />
# indicate which links are prettyphoto link
<a href="bigImage.jpg" rel="prettyPhoto">
<img src="littleImage.jpg" />
</a>
# activate prettyphoto on prettyphoto links
$("a[rel^='prettyPhoto']").prettyPhoto();