How I can to use lightbox 2 options? How to include in document? It does not work as specified on the site http://lokeshdhakar.com/projects/lightbox2/#options
<script>
lightbox.option({
'resizeDuration': 200,
'wrapAround': true
})
</script>
<a class="example-image-link" data-lightbox="example-set" href="pic.png">
<img style="width: 100%" src="pic.png">
</a>
How do you set the lightbox options?
Make sure you are including both the lightbox.js AND lightbox.css stylesheet.
You will also need jQuery 1.7 or greater (as stated in step 4 of the Getting Started section of the Lightbox website). You should include the jQuery script before the lightbox script.
This setup worked for me:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" />
<script src="jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js"></script>
</head>
<body>
<a class="example-image-link" data-lightbox="example-set" href="pic.png">
<img style="width: 100%" src="pic.png">
</a>
<script>
lightbox.option({
'resizeDuration': 200,
'wrapAround': true
})
</script>
</body>
</html>
Related
I believe this question has been asked multiple times and I have researched many other articles but I'm afraid I'm at a complete impasse...
I am trying to make a very basic flexslider but it simply does not seem to want to work for me. The images appear as lists, so the HTML and the image links would seem to be Ok. This leads me to believe I have missed something in the JS.
Would anybody be able to advise me?
Many Thanks in advance.
Ryan
<!DOCTYPE html>
<html>
<head>
<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
</head>
<body>
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="../lachantongeimg/group.jpg" alt=""/>
</li>
<li>
<img src="../lachantongeimg/howtojoin.jpg" alt=""/>
</li>
<li>
<img src="../lachantongeimg/playmusic.jpg" alt=""/>
</li>
</ul>
</div>
</body>
</html>
If your photos appear like a list, must be the CSS file. Make sure the file exist or fix your path.
The only difference that I found with the official documentation is the option to animate:
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
here there is a basic example working exactly as you have:
https://jsbin.com/jicodadace/2/edit?html,console,output
Link to jQuery plugin github and documentation
It is the exact same code, the only difference being that I link to several sources/external files instead of just throwing them all into one big file like on jsfiddle. But I get no error in the browser console, everything is linked properly.
It image lightbox works, the video light almost works, I just get a black blank empty light when clicking on the video link. When clicked this gets added to the HTML, but the HTML is empty inside the iframe. But on jsfiddle it is not.
<iframe class="lg-video-object lg-youtube " src="//www.youtube.com/embed/VXEkoXgb4bI?wmode=opaque&autoplay=1&enablejsapi=1" allowfullscreen="" height="315" frameborder="0" width="560">
#document
<html>
<head></head>
<body></body>
</html>
</iframe>
I've been over and over this, and I can't even come up with one reason why it happens, I've tested in Firefox, Chrome and even IE. And since it works on jsfiddle in Firefox, so it can't really be the browser.
Any help is really appreciated, I'm so in the woods. I'm hoping it is just something really simple that I can't see because I've stared at intensely for hours.
Thanks.
Link to jsfiddle: http://jsfiddle.net/vtkv4j2h/5/
Link to the local files: https://mega.nz/#F!4QhXhQaY!vaIMGXqYSzJf8s8qkVouqg
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Why doesn't this work, when it works on jsfiddle</title>
<link rel="stylesheet" href="lightgallery.min.css" media="screen" title="lightgallery">
</head>
<body>
<div id="lightgallery">
<a href="https://dummyimage.com/1200x700/000/fff.jpg">
<img src="https://dummyimage.com/300x200/000/fff.jpg" />
</a>
<a href="https://dummyimage.com/1200x700/d40fd4/0011ff.jpg">
<img src="https://dummyimage.com/300x200/d40fd4/0011ff.jpg.jpg" />
</a>
<a href="https://dummyimage.com/1200x700/44d613/0011ff.jpg">
<img src="https://dummyimage.com/300x200/44d613/0011ff.jpg" />
</a>
<a href="https://dummyimage.com/1200x700/1ff068/0011ff.jpg">
<img src="https://dummyimage.com/300x200/1ff068/0011ff.jpg" />
</a>
<a href="https://dummyimage.com/1200x700/5e6063/0011ff.jpg">
<img src="https://dummyimage.com/300x200/5e6063/0011ff.jpg" />
</a>
<a href="https://www.youtube.com/watch?v=VXEkoXgb4bI" data-poster="https://dummyimage.com/1200x700/fc1241/313de6.jpg&text=click-to-play">
<img src="https://dummyimage.com/300x200/fc1241/313de6.jpg&text=Video1"/>
</a>
<a href="https://www.youtube.com/watch?v=VkzVgiYUEIM" data-poster="https://dummyimage.com/1200x700/73f00c/313de6.jpg&text=click-to-play">
<img src="https://dummyimage.com/300x200/73f00c/313de6.jpg&text=Video2"/>
</a>
<a href="https://www.youtube.com/watch?v=7BWWWQzTpNU" data-poster="https://dummyimage.com/1200x700/f7ff00/313de6.jpg&text=click-to-play">
<img src="https://dummyimage.com/300x200/f7ff00/313de6.jpg&text=Video3"/>
</a>
</div>
<script src="jquery.js" charset="utf-8"></script> <!-- jQuery v3.1.0 -->
<script src="lightgallery.min.js" charset="utf-8"></script>
<script src="lg-video.min.js" charset="utf-8"></script>
<script src="js.js" charset="utf-8"></script>
</body>
</html>
js.js
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
Thank you all for help and suggestions.
#Novice was right.
Are you sure using a web-server to access if your url shows something
like this file:/// rather than http:// then its a problem
Switching to a properly virtual box solved the issue.
I want to create a book style page turn effect on some images so I decided to use the JQuery plugin, JFlip. The plugin seems to be doing what it is supposed to do except display the image. I have checked the Network tab and the images are being loaded. Also, I can see the Canvas element JFlip has created but it is just a blank space.
I have some code:
<ul id="g1">
<li>
<img src="img/proforma.jpg">
</li>
<li>
<img src="img/proforma2.jpg">
</li>
</ul>
And some javascript:
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.jFlip.js"></script>
<script type="text/javascript">
$("#g1").jFlip(700,230,{background:"green",cornersTop:false});
</script>
It does work, just the plugins are a bit old. See my code below :
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<!--[if IE]><script type="text/javascript" src="http://www.jquery.info/scripts/jFlip/excanvasX.js"></script><![endif]-->
<script src="http://www.jquery.info/scripts/jFlip/jquery.jflip-0.3.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul id="g1">
<li>
<img src="http://keith-wood.name/img/calendar.gif">
</li>
<li>
<img src="http://keith-wood.name/img/calendar.gif">
</li>
</ul>
</body>
</html>
JS:
$("#g1").jFlip(700,230,{background:"green",cornersTop:false});
See the full solution here : http://jsbin.com/iqaran/1/edit . Remember to run with js in jsbin
Cheers !
Turns out that script is so old (2008), you need to include the jQuery migrate script.
JSFiddle
Scripts
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.jFlip.js"></script>
HTML
<ul id="g1">
<li>
<img src="http://placehold.it/300x300"/>
</li>
<li>
<img src="http://placehold.it/300x300" />
</li>
</ul>
Also make sure to wrap your executing code in a document.ready so the images get the change to render.
JS
<script>
$(document).ready(function() {
$("#g1").jFlip(700,230,{background:"green",cornersTop:false});
});
</script>
I cannot get Bootstrap Carousel to start, um, carousel-ing. Below is all the code that is involved with what I'm trying to do. When it renders in the browser, all I see are two images, one above the other, and a less-than and greater-than beneath them. It's just rendering the DIVs as defined by the HTML as opposed to rendering in a Carousel. I verified that the jQuery.ready function is being called, and is calling the code to initialize the carousel. I also tried this on multiple browsers - IE9, Chrome, and Firefox. I'm running out of ideas. Any help would be appreciated. Thanks!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link type="text/css" href="styles/carousel.css" />
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-transition.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-carousel.js"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
$('#carousel').carousel();
});
</script>
<div id="carousel" class="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="images/APM_icon_big.png" alt="Some Alt Text" />
<div class="carousel-caption">
Some caption
</div>
</div>
<div class="item">
<img src="images/appdev_icon_big.png" alt="Some Alt Text" />
<div class="carousel-caption">
Some caption
</div>
</div>
…
</div>
<a class="carousel-control left" href="#carousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#carousel" data-slide="next">›</a>
</div>
</body>
</html>
It seems to be working just fine in this fiddle
Be sure to include the styles defined by bootstrap for the carousel : the css included in the fiddle comes from the twitter-bootstrap custom download page selecting only the JS components > Carousel.
It might not hurt to put your <script> inside the <head> or at the end of your page.
I figured it out. I was missing a rel="stylesheet" in my LINK tag!
I'm trying to get this vertical list to load the document titles I put inside the Load_content() during an Onclick event. The satisfactory outcome will be that everytime I click a new link... a new PDF loads into the iframe
<html>
<head>
<title> Literature of Andrew Willis
</title>
<link rel="stylesheet" href="mycss.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/cssverticalmenu.css" />
<script language="javascript" type="text/javascript">
function load_content (link) {
document.getElementById("iframe").setAttribute("src","link" );
}
</script>
</head>
<body>
<div id="logo">
<img src="mainlogo.jpg" height=100 width=400>
</div>
<div id="content">
<div id="leftcolumn">
<ul class="glossymenu">
<li>Short Essays</li>
<li><a href="#" onclick="load_content(hangmansdog.pdf)" >Poetry</a></li>
<li><a href="http://www.pourinpourout.com" >Blog</a></li>
</ul>
</div>
<div id="rightcolumn">
<div id="content">
<iframe id="iframe1" src="#"></iframe>
</div>
</div>
</div>
</body>
You have a few typos in your code. You gave your iframe an id of "iframe1" but referenced it in your JS using "iframe". You also shouldn't have quotes around link because you are using it as a variable, line 13 should look like this:
document.getElementById("iframe1").setAttribute("src",link );
You will however, probably want to put single quotes around the links themselves when you go to link them. i.e. onclick="load_content('Look at me now.pdf')"