I'm trying to get lightbox to run on my gallery. Jquery works since I tested it by having an alert() in the documet.ready() function. But besides that lightbox doesn't seem to work. Or at least I only the links work normally. Here's my code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title></title>
<meta charset="UTF-8" />
<meta name="ROBOTS" content="ALL" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
<link href="/fuelcms/assets/css/klang.css?c=943916400" media="all" rel="stylesheet"/>
<base href="http://localhost/fuelcms/index.php" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="robots" content="index, follow" />
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/lightbox/prototype.js"></script>
<script type="text/javascript" src="assets/js/lightbox/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="assets/js/lightbox/lightbox.js"></script>
<link rel="stylesheet" href="assets/css/lightbox.css" type="text/css" media="screen" />
</head>
<body class="gallery index">
<!--<div class="header"><ul>
<li class="first">Repertoire</li>
<li>Über uns</li>
<li>Kontakt</li>
<li>Agenda</li>
<li>Gallerie</li>
<li class="last">Links</li>
</ul>
</div>-->
<ul>
<li class="first">Repertoire</li>
<li>Über uns</li>
<li>Kontakt</li>
<li>Agenda</li>
<li>Gallerie</li>
<li class="last">Links</li>
</ul>
<div class="fullpage">
<div class="colmask">
<div class="col3">
<div class="pagination">‹ First < 7 8<strong>9</strong></div><br><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Gong.JPG"><img src="http://localhost/fuelcms/assets/images/fotos_site/thumbs/Gong_thumb.jpg" alt=""/></a></div><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Fatamorganaschatten.JPG"><img src="http://localhost/fuelcms/assets/images/fotos_site/thumbs/Fatamorganaschatten_thumb.jpg" alt=""/></a></div><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Bumentopf2.JPG"><img src="http://localhost/fuelcms/assets/images/fotos_site/thumbs/Bumentopf2_thumb.jpg" alt=""/></a></div><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Blumentopfdynamik.JPG"><img src="http://localhost/fuelcms/assets/images/fotos_site/thumbs/Blumentopfdynamik_thumb.jpg" alt=""/></a></div><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Blumentopf.JPG"><img src="http://localhost/fuelcms/assets/images/fotos_site/thumbs/Blumentopf_thumb.jpg" alt=""/></a></div><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Blument1.JPG"><img src="http://localhost/fuelcms/assets/images/fotos_site/thumbs/Blument1_thumb.jpg" alt=""/></a></div></div></div><div class="footer" />
</body>
</html>
I've also tried with the script tag in the head tag but no difference, please help.
greez almightybob
you are coding in XHTML (using self-closing tags) but not declaring the XHTML doctype. check this question in SO
<link>,<meta> and <base> are self-closing by itself, however, <script> should always be closed by a </script> for safety measures, regardless if external or internal. my IDE (Aptana Studio 3) does it that way (knowing it has built-in validation, it must be "best-practice" in my opinion)
although not sure but i think you can omit the # when selecting the lightbox using the latest jQuery: $('a[rel*=lightbox]').lightBox()
how long ago was 1.4? try a more recent jQuery version!
I've had this problem before and solved it by putting the following right before the ending body tag:
<script>
$.noConflict();
</script>
Maybe that will help you out.
Note: this worked for me using the most recent jQuery (1.7.1) hosted on Google's CDN, and with Lightbox 2.05 located here. Are you using a different Lightbox implementation? If not, you are definitely holding on to very old versions of both jQuery and Lightbox.
Related
I have looked around but still can't get my code to load my html file. From my index.html file I have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>David Anderson, Georgia Tech Professor</title>
<link rel="stylesheet" href="Assets/Stylesheets/default.css">
<link rel="stylesheet" href="Assets/Stylesheets/header.css">
<link rel="stylesheet" href="Assets/Stylesheets/body.css">
<link rel="stylesheet" href="Assets/Stylesheets/footer.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#header').load('header.html');
alert("Does this load!!!??")
</script>
</head>
<body>
<div id="header"></div>
<section class="section_2 index_section">
...
</section>
...
</body>
</html>
And such.
I included the alert for debugging purposes and it works fine, but it never loads my header.html file. I have included both files in the same directory and level.
My header.html includes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="Assets/Stylesheets/default.css">
<link rel="stylesheet" href="Assets/Stylesheets/header.css">
<link rel="stylesheet" href="Assets/Stylesheets/body.css">
<link rel="stylesheet" href="Assets/Stylesheets/footer.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<!------------
- Header -
------------->
<header class="section_1" id="header">
<img src="Images/David's_typical_Profile_Picture.jpg" alt="David Anderson" id="prof_pic">
<h1 id="name_plate">
<a class="name_plate" href="about.html">David Anderson</a>
</h1>
<h2 id="institution_name">
Georgia Institute of Technology
</h2>
<nav id="main_nav">
<ul class="semantic_list">
<li>Home</li>
<li>Courses
<ul>
<li>ECE 6254</li>
<li>ECE 6271</li>
</ul>
</li>
<li>Lab</li>
<li>Consulting</li>
<li>About</li>
</ul>
</nav>
</header>
</html>
I have looked around everywhere, including Adding jQuery to sublime text 2, Why does jQuery or a DOM method such as getElementById not find the element?, https://learn.jquery.com/using-jquery-core/document-ready/ as well as websites about writing/including javascript: https://www.sitepoint.com/community/t/multiple-pages-without-repeating-the-site-structure/8251/3, https://www.sitepoint.com/community/t/calling-multiple-htmls-into-single-html-file/216583/2, but I still run into the same problem, where it simply doesn't load header.html. Ever.
I am loading it on safari using a local path, not a website.
If anyone has a solution/or answer I'd be very grateful.
Thanks!
Hi i am trying implement DRY by using jQuery load(). I want to have navbar.html that is on each page and is called by load() rather than having it on each html. All my files are in the same directory at the moment but I cannot seem to make the navbar load on the services page. please see my code below. I think there is a simple solution maybe its my syntax.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A_D Acupuncture in Amsterdam | Best In Amsterdam</title>
<meta name="description" content="A_D Ac upuncture is one of the best acupuncturists in Amsterdam. Make an appointment to get the very best service.">
<meta property="og:title" content="A_D Acupuncture in Amsterdam | Best In Amsterdam">
<meta property="og:image" content="facebook-card.jpg">
<meta property="og:description" content="A_D Acupuncture is one of the best acupuncturists in Amsterdam. Make an appointment to get the very best service.">
<meta property="og:site_name" content="A_D Acupuncture"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lora:700|Merriweather" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script type="text/javascript" src="test.js" async=""></script>
hello world /* test */
<-- Navbar.html -->
<div class="navbar-ad">
<div class="navbar-logo">
<img id="logo" src="../images/logo.png">
</div>
<div class="navbar-right">
Home
Services
Contact
</div>
</div>
$(document).ready(() => {
$("#nav-placeholder").load("navbar.html");
$('#h1').html("heeey") /* test line to make sure filepath is correct */
});
I have been trying to use unslider (jQuery) on a project of my own. Despite following the instructions on the https://idiot.github.io/unslider/ website, I can't seem to get things to work.
Would anyone be kind enough to take a look at my code and give some feedback as regards to what can be going wrong here?
Thanks!
--
<!doctype html>
<html>
<head>
<title>Testing unslider</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/unslider-master/dist/css/unslider.css">
<link rel="stylesheet" href="/unslider-master/dist/css/unslider-dots.css">
</head>
<body>
<div class="my-slider">
<ul>
<li>My slide</li>
<li>Another slide</li>
<li>My last slide</li>
</ul>
</div>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="/unslider-master/src/js/unslider.js"></script>
<script>
jQuery(document).ready(function($) {
$('.my-slider').unslider();
});
</script>
</body>
</html>
I'm assuming you're running this locally (you're not serving this through a web server). If that's the case, here's what you need to fix:
First, You need to get rid of the forward slash in your unslider asset URL's. Using the forward slash means that the browser will look for the file relative to the root of the URL which is not what you want. Instead, you want the browser to look for the file in the current directory.
Second, use https for the protocol in the jQuery asset URL to fetch it directly from the web. \\ is useful because it allows the URL to be protocol independent when making the request from a server that may or may not use https. However, when you're fetching files from your file system you'll end up with a URL like file://code.jquery.com/jquery-2.1.4.min.js which will fail because jQuery is not on your machine.
Here's a working version:
<!doctype html>
<html>
<head>
<title>Testing unslider</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="unslider-master/dist/css/unslider.css">
<link rel="stylesheet" href="unslider-master/dist/css/unslider-dots.css">
</head>
<body>
<div class="my-slider">
<ul>
<li>My slide</li>
<li>Another slide</li>
<li>My last slide</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="unslider-master/src/js/unslider.js"></script>
<script>
jQuery(document).ready(function($) {
$('.my-slider').unslider();
});
</script>
</body>
</html>
I have implemented Flexslider2 both locally and on a jsfiddle. Each uses the exact same code. However when view my page locally on (Firefox, Chrome and IE9) the Flexslide only resizes the images width.
The jsfiddle, http://jsfiddle.net/T64Gp/3/, produces the desired outcome where the image's aspect ratio is maintained
My local code (HTML) is as follows. There are no styles outside of the flexslider.css and no additional javascript outside of jQuery and flexslider.js.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="flexslider.css">
</head>
<body>
<div class="flexslider">
<ul class="slides">
<li>
<img src="1.jpg" alt="1" title="1">
</li>
<li>
<img src="2.jpg" alt="2" title="2">
</li>
<li>
<img src="3.jpg" alt="3" title="3">
</li>
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="flexslider.js"></script>
<script>
$('.flexslider').flexslider({});
</script>
</body>
</html>
Any insight on why this might be happening would be appreciated.
Two suggestions you could try:
Your code above and the jsFiddle are using different versions of jQuery. The flexslider example page uses jQuery 1.9.1 so maybe it's best to stick with this for now
The most likely cause though is that you should initialise flexslider with
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
This will ensure that the page content is loaded before flexslider initialises.
Good luck!
I have an index.html and edit.html and trying to do the following, but by clicking the second and third link, the emulator showed me an error saying: Application Error, A network error occurred (file://android_asset/www/edit.html?id=2) and (file://android_asset/www/edit.html?id=3)
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title">
<script type="text/javascript" charset="utf-8" src="cordova-1.8.0.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
</head>
<body id="stage" class="theme">
<h1>Welcome to XXX!</h1>
1
2
3
</body>
</html>
my edit.html is just a html header and body.
Any idea why?
Yes, this is a bug in Android not PhoneGap. Go star this Google issue to add your voice:
http://code.google.com/p/android/issues/detail?id=17535
In other news we believe we will have a work around in the 1.9.0 release which will be out at the end of the month.