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
Related
I'm trying to create a website using Visual Studio 2015 with Bootstrap and HTML but so far, the code I have doesn't run and I get an error message.
]
Iv'e also been following the instructions on this site: HTMLGoodies.com
Here is the code I have so far:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Time Entry</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="bootstrap.min.css" />
<script src="bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap-theme.min.css" />
</head>
<body>
<form id="form1" runat="server">
<div class="container-fluid">
<h1>Logo Book</h1>
<p>Discover Artists and Shape Your Perfect Logo</p>
</div>
<div class="row">
<div class="col-md-4" style="background-color:blue;">
Welcome to Logo Book where you can browse through potyfolios of your prefered artist and see what they have to offer.
</div>
<div class="col-md-4" style="background-color:palegoldenrod;">
Looking for an easier way to get in touch with these artists and give specific details needed for your project?
</div>
<div class="col-md-4" style="background-color:coral;">
Feel free to use our Q&A section to voice and submit your needs such as fonts and images!
</div>
</div>
</form>
</body>
</html>
I ran this exact code on my computer, and it ran just fine. How are you trying to run this code? The easiest way to test if the code works is to type it in .html file, and open it with your browser.
The code works fine in .aspx page also. On creating new web application, Global.asax page doesn't contains line numbers 2,3 and 4. To run the page just remove them and run it. It will definately run. If you want to use that line no 2 then please describe your purpose for writing that line in detail. So we can find the solution according to it.
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>
I am trying to add a simple carousel to my site. After doing a little research I found owl.carousel.js, I like the layout they use and it seems to be what I'm looking for.
Keep in mind I am new at all this. :)
My question is after I have downloaded the file and add the links to my html how do I make it work? Also I am not sure if I have to add the JS in the html or separate like I have it. On the owl site it just says call the function.
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<a link href="main.css" rel="stylsheet" type="text/css">
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
<title></title>
</head>
<body>
<div class="owl-carousel">
<div> <img src="images/images-1.jpeg"> </div>
<div> <img src="images/images-2.jpeg"> </div>
<div> <img src="images/images-3.jpeg"> </div>
<div> <img src="images/images.jpeg"> </div>
<div> <img src="images/shutterstock_204805573.jpg"> </div>
<div> <img src="images/shutterstock_221107753.jpg"> </div>
<div> <img src="images/smug%20mug%20portrait%20copy.jpg"> </div>
</div>
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
</body>
</html>
Looking at your html, it should work. Just add the snippet (that you mentioned first) right after you include owl carousel js file. So, the final should look like:
...
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
</body>
</html>
First of all just for starters, Your CSS link is set wrong, remove the hyperlink tag as link is its own tag... I think I see it, from what I see its the only option... PS You did lack a little on showing us your file locations and code...
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
Running it from the Javascript console that inspecting Chrome exposes is the best way to test IMO. Running that script is basically what you're doing when you load it via JQuery, here you're just doing it manually. If the site has a CDN, I say try it with that first, then if it's working you can download it and get it working locally.
I cannot initialize a Foundation orbit slider. Since my code was not working, I tried following strictly what the tutorial says. So I am following the tutorials in the Zurb Foundation website in order to build a basic slider:
http://foundation.zurb.com/docs/components/orbit.html
http://foundation.zurb.com/docs/javascript.html
And it is not initializing the slider. I cannot figure why after many attempts. The code I am using is the code below. If you want to test it, just uncompress the Foundation libraries and rename the folder to foundation.
When I load the page, there is no script error in the Chrome console.
Thanks for your help
<html>
<head>
<script type="text/javascript" src="foundation/js/vendor/modernizr.js"></script>
</head>
<body>
<script src="foundation/js/vendor/jquery.js"></script>
<script src="foundation/js/vendor/fastclick.js"></script>
<script src="foundation/js/foundation.min.js"></script>
<ul data-orbit>
<li>
<img src="http://foundation.zurb.com/docs/assets/img/examples/satelite-orbit.jpg" alt="slide 1" />
<div class="orbit-caption">
Caption One.
</div>
</li>
<li class="active">
<img src="http://foundation.zurb.com/docs/assets/img/examples/andromeda-orbit.jpg" alt="slide 2" />
<div class="orbit-caption">
Caption Two.
</div>
</li>
<li>
<img src="http://foundation.zurb.com/docs/assets/img/examples/launch-orbit.jpg" alt="slide 3" />
<div class="orbit-caption">
Caption Three.
</div>
</li>
</ul>
<script>
$(document).foundation();
</script>
</body>
</html>
I think you probably forgot to add the style sheets.
<link rel="stylesheet" href="./foundation/css/normalize.css">
<link rel="stylesheet" href="./foundation/css/foundation.css">
Also if the foundation foundation folder is in the same folder as your html document then the path should probably be ./foundation :
<script type="text/javascript" src="./foundation/js/vendor/modernizr.js"></script>
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?