I'm currently trying to implement lightbox onto my website, but I cannot get it to work, I don't think there is anything conflicting with it, and I have placed all of the files in the correct locations and linked them how it tells you to on the lightbox 2 website. (http://lokeshdhakar.com/projects/lightbox2/)
Just to double check:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet">
is in the head tags,
<script src="js/lightbox.js"></script>
Is at the bottom of the page, just before the closing body tag.
lightbox.css is in the css directory
lightbox.js is in the js directory
<li><img src="images/1.png" data-lightbox="image-1" /></li>
and above is what all of my image tags look like.
I'm unsure why it isn't working. I have the files uploaded to a server, and it doesn't work on there either.
Thanks in advance
The problem is that you're using an img tag, and they explicity say to use an anchor a one.
For me, it's working like a charm:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.1/js/lightbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.1/css/lightbox.min.css" rel="stylesheet" />
<ul>
<li>
Cute baby panda
</li>
<li>
Another
</li>
<li>
Last one
</li>
</ul>
The documentation says to use <a> (anchor tag) to trigger the lightbox.
<li>
<a href="images/1.png" data-lightbox="image-1">
<img src="images/1.png" />
</a>
</li>
Related
I'm having an issue where the JQuery isn't firing on a button click. I've been looking through the Chrome debugger but nothing is coming up. No errors and when the button is clicked nothing happens.
I am using a fresh build of MVC with the initial references for Web API and MVC. The plugin I wish to get working is the Menu Slider here
I have tried to strip out as much as possible, the sidr.js and the sidr.css are the same as taken from the above link.
Can anyone see what I'm doing wrong? I've reordered the scripts to get the jquery-1.9.1.min to load first but still no dice.
Update
I have just rebuilt the below code on another computer, same IIS, Visual Studio etc and it works (with the button) what could be making JQuery not run (I've gone through the references and they match up) as I'm out of ideas.
Layout
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<script src="#Url.Content("~/Scripts/jquery-1.9.1.min.js")"></script>
<script src="#Url.Content("~/Scripts/modernizr-2.6.2.js")"></script>
<link href="#Url.Content("~/Content/jquery.sidr.dark.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery.sidr.js")"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('#slide').sidr();
});
</script>
</head>
<body>
<div id="sidr">
<ul>
<li>#Html.ActionLink("Home", "Index", "Home")</li>
</ul>
</div>
<button id="slide">Reveal Menu</button>
<div>
#RenderBody()
#RenderSection("scripts", required:false)
</div>
</body>
</html>
I believe that this plugin needs to be instantiated on markup with a list inside. Something like this:
<a id="demo" href="#slide">Reveal Menu</a>
<div id="slide">
<ul>
<li>Menu Item</li>
</ul>
</div>
If you want JQuery to do something on click try this.
https://api.jquery.com/click/
$( "#target" ).click(function() {
alert( "Handler for .click() called." );
});
Here is a fiddler where Jquery pops an alert on button click.
https://jsfiddle.net/wncdr034/
Maybe you can trigger the slide from within the event function?
As per their documentation they have the below code:
<a id="demo" href="#sidr">Toogle menu</a>
<div id="sidr">
<ul>
<li>Side <a href="http://www.jqueryscript.net/menu/">Menu 1</a></li>
<li class="active">Side Menu 2</li>
<li>Side Menu 3</li>
</ul>
</div>
They have mentioned href to the anchor which is the id of sliding div but here you have button and have initialized .sidr() on that which will not have href attribute! I suspect the plugin may work on the href attribute of the anchor. So my suggestion is why don't you just replace your button with anchor and provide href value with the div id as below:
<div id="sidr">
<ul>
<li>#Html.ActionLink("Home", "Index", "Home")</li>
</ul>
</div>
<a id="slide" href="#sidr">Reveal Menu</button>
I'm trying to make my website check the screen resolution and replace installed font icons (using #webfont) with plain text links, so that the site is more mobile friendly. Im using Opera Mobile Emulator to check if it works. the user interface I am using clearly comes back with a res of 480x320 (in the very top left of the page), yet the .innerHTML javascript isn't firing off. Any help?
<!DOCTYPE html>
<html>
<head>
<title>Harry's Bar</title>
<meta name="keywords" content="Harry's, bar, st. petersburg, florida, kenneth city, drink specials" />
<meta name="description" content="Harry's Bar in St. Petersburg, Florida. Drink specials every night!" />
<meta name="author" content="Internet Solutions of Florida" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<script type="text/javascript">
var width=screen.width;
var height=screen.height;
document.write(width+'x'+height);
if (width<700)
{document.getElementById("homelink").innerHTML="Home";}
</script>
<div class="frame">
<div class="header">
<img class="logo" src="img/logo.png" alt="Harry's Bar" />
<div class="menu">
<ul>
<li><a id="homelink" href="index.html" title="home"></a></li>
<li><a id="drinklink" href="drinks.html" title="drink menu"></a></li>
<li><a id="piclink" href="images.html" title="picture gallery"></a></li>
<li><a id="directionslink" href="directions.html" title="directions"></a></li>
<li><a id="contactlink" href="contact.html" title="contact us"></a></li>
</ul>
</div>
</div>
That javascript is executing before the HTML is being loaded. So there is no element with the id of "homelink" when the javascript fires.
Additionally, by using document.write, you're effectively overwriting your original HTML, so the tag will never load anyway.
Get rid of the document.write call and place the script just before your closing body tag and it should work as intended.
document.write() is not needed. If you want to diagnose you may use document.title or create a div and divid.innerHTML
Make sure your testing on a <700 area
Add a DOM ready fire.
Place this at the end of the
Things should work then :)
I'm having some issues regarging Bootstrap, I'm following a basic tutorial and all works however the CSS file is not loading properly. I've searched around on StackOverflow however none of it worked. My HTML file is in the exact same folder as the css folder is. This is my code :
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”></meta>
<title>This is a title, oh-ehm-GHEE</title>
<link rel=”stylesheet” href=”css/bootstrap.css” type=”text/css”/>
</head>
<body>
<div class="”container”">
<h1>Bootstrap Site</h1>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src=”js/bootstrap.js”></script>
</body>
</html>
It looks like fancy quotes snuck into your code, as seen on these two lines:
<div class="”container”">
<h1>Bootstrap Site</h1>
Note the difference between the inner and outer quotes. The same quotes are in your meta tag, the link for the stylesheet, and your final script tag.
Replace the fancy quotes with standard quotes, and as long as your directory structure is right, it should work.
If your html is the same folder as you css? Then there is no css folder or your html is within the css folder am I right?
Try something like this
<link rel=”stylesheet” href=”bootstrap.css” type=”text/css”/>
Did you download the zip file from http://getbootstrap.com/? Typically the CSS, ICO and JS files are in "assets". So you need to upload those files and reference those files in your HTML. Make sure you have the files uploaded and are referencing correctly.
Also be sure you are referencing the CDN version of jQuery like so:
<script src="//code.jquery.com/jquery.js"></script>
Using the //code.jquery.... will ensure that your JS will always be up to date and if you ever use "https" on your website your JS files will be secured as well.
Hope that helps.
I have been pulling my hair out trying to get functional smooth scrolling to ids on the same page. I have tried just about every solution I have found on google. I get to a point where when it seems everything should work but then even the basic non-js id linking breaks. I am currently using the smooth-scrolling plugin downloaded from the jquery website. The code as it currently stands is such. I don't know a ton about JS or Jquery so I assume I am just missing something. I inspecting the code on functional versions of the smooth scrolling but even when
I do the in-page linking breaks entirely:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Simon Moon Landings</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Noticia+Text:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.smooth-scroll.js"></script>
<script>
$(document).ready(function() {
$('ul.mainnav a').smoothScroll();
});
</script>
</head>
<body>
<div class="container">
<div class="menu">
<nav>
<ul class="mainnav">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</nav>
<img class="logo" src="images/smlogo.gif" width="450" height="288" alt="Simon Moon Landings Logo" onmouseover="on();" onmouseout="off();"></nav>
</div>
<div class="content">
<div class="section" id="one">
<h4>One</h4>
</div>
<div class="section" id="two">
<h4>Two</h4>
</div>
<div class="section" id="three">
<h4>Three</h4>
</div>
<div class="section" id="four">
<h4>Four</h4>
</div>
<div class="section">
<a id="five"><h4>Five</h4></a>
</div>
<div class="section">
<a id="six"><h4>six</h4></a>
</div>
</div>
</div>
</body>
</html>
I found the problem. It was not in the script at all, but in the CSS. I have a two column layout, the menu and anchors are in one column (.menu) and the target divs are in another column (.content) I applied poisiton:fixed to the menu and it started working.
It works fine here.
Make sure that the URL of jquery-smooth-scroll is correct.
I used this copy of jquery-smooth-scroll to test your code: https://github.com/kswedberg/jquery-smooth-scroll
It works for me. See this example: http://jsbin.com/ixefet/1/edit
All I did was change the src for the smooth scroll JavaScript to the online version (https://raw.github.com/kswedberg/jquery-smooth-scroll/master/jquery.smooth-scroll.min.js) and add some text so you can see the scrolling happen.
Sounds like you're using the wrong src for your smooth scroll script (if that's the case, your JavaScript error log should say undefined function: $.smoothScroll or something like that).
It worked for me while testing on jsfiddle,
here you go
http://jsfiddle.net/mastermindw/XvV9W/1/
I'm trying to setup PhotoSwipe (http://www.photoswipe.com/) which is a photo gallery jquery plugin which is compatible with mobile devices. But I'm having trouble implementing the plugin! I've gone through each line I was supposed to add but the plugin's not functioning at all. The images link fine obviously, but the plugin doesn't work the way that it should. I think missing something but I don't know what.
I'm relatively new to jQuery and I honestly don't know how anything works, I only know how to plug things in.
I've checked the file paths and everything seems to be pointed to the right place.
Here's my code.
in 'head' tag
<script type="text/javascript" src="js/klass.min.js"></script>
<script type="text/javascript" src="js/code.photoswipe-3.0.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
(function(window, $, PhotoSwipe){
$(document).ready(function(){
var options = {};
$("#gallery a").photoSwipe(options);
});
}(window, window.jQuery, window.Code.PhotoSwipe));
</script>
in 'body' tag
<ul id="gallery">
<li><img src="img/events/01t.jpg" rel="external" alt="" /></li>
<li><img src="img/events/02t.jpg" rel="external" alt="" /></li>
<li><img src="img/events/03t.jpg" rel="external" alt="" /></li>
<li><img src="img/events/04t.jpg" rel="external" alt="" /></li>
<li><img src="img/events/05t.jpg" rel="external" alt="" /></li>
</ul>
Oh. Actually the link to jQuery needs to come before the link to photoswipe.
So your script files should show like this:
<script type="text/javascript" src="js/klass.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/code.photoswipe-3.0.4.min.js"></script>