Image not displaying after clicking in lightbokv2.6 - javascript

I am using lightbox 2.6 my thumbnails are displaying but when i click on image a lightbox appear but it does not display image instead it keep loading the image but does not display it.
my code is-
<!doctype html5>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
<link href="css/screen.css" rel="stylesheet" />
</head>
<body>
<img src="img/image-2.jpeg">
<img src="img/image-3.jpeg">
<img src="img/image-4.jpeg">
</body>

Use Firefox Firebug or Opera Dragonfly to check if big images are exist and are accessible. Also check error console.
Usage of different extension (jpg and jpeg) is intentional?

Related

Make DIV load CSS file

For the program I'm writing I have a main navigation page where the user get landed after he / she log into the system.
On this screen I use 2 DIV's one div is for the navigation bar second one is used as an iFrame.
I'm using w3.css library to create the navigation bar but this actually mess up my CSS main CSS file when I load the target file in the second div. But it works fine if I use an iFrame which I really don't like to do.
If I could load my CSS file when the div loads the target link file the problem will be solved.
So my problem is how to load the CSS file in to the div when the external file loads.
This is my HTML:
<html>
<head>
<title>Time Sheet</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Style Sheets -->
<link rel="stylesheet" type="text/css" href="../../CSS/w3.css">
<link rel="stylesheet" type="text/css" href="../../CSS/main.css">
<!-- Java Scripts -->
<script language="JavaScript" type="text/javascript" src="../../jScripts/jquery-3.2.0.min.js"></script>
<script language="javascript" type="text/javascript" src="../../jScripts/navBar.js"></script>
<script language="JavaScript" type="text/javascript" src="../../jScripts/fileLoader.js"></script>
</head>
<body>
<div class="w3-bar w3-light-gray w3-card-4" style="z-index: 991">
Home
Link 1
Link 2
Link 3
</div>
<div id="My-container">
<!-- All pages load here -->
</div>
</body>
</html>
My NavBar JavaScript:
$(document).ready(function(){
$('#main').click(function () {
$('#My-container').load('listUser.php');
})
});
File loader JavaScript:
$(document).ready(function(){
if($("#my-container").size>0){
if (document.createStyleSheet){
document.createStyleSheet('../../CSS/main.css');
}
else {
$("head").append($("<link rel='stylesheet' href='../../CSS/main.css' type='text/css' media='screen' />"));
}
}
});
Above file loader function is not mine I found it on a site and tried to use it but when I do console throws an error saying "Size" is not a function. When I change it to length the error goes away but code doesn't work.
If any one asks why don't you just copy paste the nav bar to all the files my answer is I'm lazy.
Any way please show me the light.
It seems you want to check if that specific dom exist or not. For that you need to use length. Also the dom id seems to be My-container but not my-container.
You can try the following
if($("#My-container").length>0){
// rest of the code
}

Scripts on page - the page doesnt open on a first attempt

I need help. I am just a beginner in writing web pages, so I hope my question isnt silly. The problem is, that my page doesnt load on a first attempt on a mobile device. (On desktop PC it works normally). I will give you a little background, what steps I made before this problem happened.
I have created websites with lightbox script loading at the start of the page. (I have adjusted the script to work in lower resolutions on mobile phones first) It made it work not properly, when it was opened on a mobile device. The windows were not fitting well on the screen etc..
I have solved this by putting the script at the end of html body. The lightbox works well now, but the page with the gallery doesnt open on a first attempt. I have to refresh the page and then the page appears normally and works without problems.
I have been searching for possible solution to this problem through the whole web, but with no success.
I am attaching my code (I have avoided some metatags, paragraphs with text, navigating toolbar etc. to shorten it and make it easier for you to read it and decode the problem.
I will be glad for any help I can get. :) Thanks a lot. Please, let me know on my e-mail, when answered or a problem with my question.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>...</title>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="canonical" href="http://www.merryberry.eu/galerie.html">
<link href="jquery-mobile/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="stylesheetmobil.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.11.1.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div class="Body">
<div class="header">
<div class="menu">
<nav id="primary_nav_wrap"> </nav>
</div>
</div>
<div class="picture">
<img src="Images/barvenidekorace.jpg" style="width: 100%; height: auto;">
</div>
<div class="text"></div>
<div class="footer"></div>
</div>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</body>
</html>

Everyone recommended lightbox... it still doesn't do what it apparently should

I'm trying to make an image gallery on my site so that I can put screenshots onto blog articles where they will be relevant. After spending several hours working on a custom jquery solution using my own code and getting no help whatsoever from anywhere on the net, I caved and decided to use lightbox.
I followed the instructions to set it up on this page however, it still does nothing. Essentially all I've done is put a link to the image on my page...
Here's my code as rendered on the page (url below):
<head>
<link href="/js/lightbox/css/lightbox.css" rel="stylesheet" />
<!--[if lte IE9]>
<link href="/css/ie.css" type="text/css" rel="stylesheet" />
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="/js/lightbox/js/lightbox.min.js"></script>
<script src="/js/lightbox/js/jquery-1.11.0.min.js"></script>
</head>
<body>
<!-- skipping irrelevant content -->
<h3 id="screenshots">Screenshots</h3>
<div class="screenshots">
Image #1
<img src="http://www.loganyoung.za.net/images/articles/logan-mvc-error-big.png" alt="" width="150" height="150" class="alignleft" />
<img src="http://www.loganyoung.za.net/images/articles/logan-mvc-error-small.png" alt="" width="150" height="150" class="alignleft" />
</div>
<!-- skipping more irrelevant content -->
</body>
</html>
URL http://loganyoung.za.net/error-reporting-in-mvc/
If anyone can tell me what I did wrong, I'd greatly appreciate it.
Just made sure jQuery was referenced in the right place (above all the lightbox crap) woopdeedoo

jquery mobile loading image not shown

My code:
<!DOCTYPE html>
<html>
<head>
<title>a</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.mobile-1.2.0-alpha.1.min.js"></script>
</head>
</html>
<script>
$(document).ready(function(){
$.mobile.loading('show');});
</script>
But the beautiful spinner image is not showing.It just shows a grey circle in the middle of the screen.
I think your syntax is off, to display a loading message you should use $.mobile.showPageLoadingMsg Also make sure you have the images folder included.
Edit:
Sorry I see that you are using the alpha of JQM 1.2, it looks like the $.mobile.loading method was added in this release. At any rate make sure that you have the JQM images folder and that it is located in the same folder as the js file. To test try replacing your links with links to the CDN
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>

Cufon console error, not replacing font. (ReferenceError: Can't find variable: Cufon)

My first attempt at using Cufon has caused me a few problems as I just can't seem to get it to work. The Coda's Javascript log is giving me this error (ReferenceError: Can't find variable: Cufon) From a few tutorials I have followed them precisely have been back and forth downloading the libraries over and over and nothing is working. If you guys could have a look and help me out, it would be much appreciated.
Here is my code;
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<!-- Styles go here -->
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
<!-- End styles here -->
<!-- Scripts go here -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="scripts/A.font.js"></script>
<script type="text/javascript" src="scripts/cufon.js"></script>
<script type="text/javascript">
Cufon.replace("p");
</script>
<!-- Scripts end here -->
</head>
<body>
<p>Test</p>
Test
</body>
</html>
Thanks.
This error occurred because you've loaded Cufon after the font has been loaded that requires it, so try to change the order, first load the cufon.js
<script type="text/javascript" src="scripts/cufon.js"></script>
and then load the A.font.js
<script type="text/javascript" src="scripts/A.font.js"></script>
I know this doesn't directly answer your question, but please don't use Cufon. Use CSS 2.1's #font-face instead. It's very easy and 100% accessible whereas Cufon is not.
Here are the only 2 links you need to use #font-face in your CSS:
http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
http://www.fontsquirrel.com/fontface/generator

Categories