I am following online tutorial for bootstrap lightbox thumbnail. I typed exact same code multiple times but it is not working. Whenever I click on the image, it opens up in new tab instead of popping up in the same window.
Here is the code,
<title>Lightbox</title>
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="F:/LightBox/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--
<link rel="stylesheet" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
-->
<link rel="stylesheet" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="1.jpg" alt="" class="img-thumbnail"
</div>
</div>
</div>
<!--
<script src="F:/LightBox/lightbox.js"></script>
-->
</body>
I tried adding lightbox.js file at different positions but, still not working.
You have some errors in your HTML:
Your img tag isn'g closed.
You have this inside your a tag href="1.jpg"="image=1", just
link to the image path once.
You aren't using the data-attribute for the plugin:
data-lightbox="" on your a tag either.
Review the Docs: Lightbox2
Working Example
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-3">
<a class="img-thumbnail" href="http://placehold.it/350x350/f00" data-lightbox="example-set" data-title="title">
<img class="img-thumbnail" src="http://placehold.it/350x350/f00" alt="alt">
</a>
</div>
<div class="col-sm-3">
<a class="img-thumbnail" href="http://placehold.it/350x350/000" data-lightbox="example-set" data-title="title">
<img class="img-thumbnail" src="http://placehold.it/350x350/000" alt="alt">
</a>
</div>
<div class="col-sm-3">
<a class="img-thumbnail" href="http://placehold.it/350x350/ff0" data-lightbox="example-set" data-title="title">
<img class="img-thumbnail" src="http://placehold.it/350x350/ff0" alt="alt">
</a>
</div>
<div class="col-sm-3">
<a class="img-thumbnail" href="http://placehold.it/350x350" data-lightbox="example-set" data-title="title">
<img class="img-thumbnail" src="http://placehold.it/350x350" alt="alt">
</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.min.js"></script>
Related
I have a figure and a figcaption and I would like to have one picture and when I click on it, have more thumbnails/pictures.
My figure :
<!-- Bootstrap CSS -->
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<div class="col-6 col-lg-3">
<figure>
<figcaption>
<h3>project</h3>
<h4>project test</h4>
<img src="https://picsum.photos/300/100" alt="loupe.svg">
</figcaption>
<br>
<img src="https://picsum.photos/300/101" alt="imagexs.jpg">
</figure>
</div>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap 4 JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Thank you.
One way you could do it would be to set the intital display of images to none and on click display them
$(document).ready(function() {
var MoreImages = document.getElementById("moreImages");
var ShowImages = document.getElementById("showImages");
MoreImages.style.display = "none";
ShowImages.addEventListener("click", function() {
document.getElementById("moreImages").style.display = "";
});
});
img {
height: 150px;
width: 150px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap 4 JS -->
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<figure>
<figcaption>
<h3>project</h3>
<h4>project test</h4>
<span id="showImages"
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</figcaption>
<div class="row" id="moreImages">
<div class="col-4">
<span
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</div>
<div class="col-4">
<span
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</div>
<div class="col-4">
<span
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</div>
</div>
</figure>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>
When I click on the image itself, the lightbox loads but the image itself doesn't - instead, all I see is a white box. Basically, the lightbox shows up, but the image doesn't load. I'm not sure what I am doing wrong. I watched a youtube video on how to create a lightbox and followed the steps exactly. I don't know what I am doing wrong. I included the links to the proper javascript and css files.
Please help!!
This is my html below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description:" content="Image Gallery">
<meta http-equiv="author" content="Fiona Blumin" />
<title>Image Gallery</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="lightbox.min.css" type="text/css">
<script type="text/javascript" src="lightbox-plus-jquery.min.js"></script>
</head>
<body>
<div class="Welcome">
<h1>My Travels through Europe</h1>
</div>
<div class="Pictures">
<div class="container-fluid">
<div class="row">
<div class="col">
<a href="images/pic1.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic1 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic2.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic2 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic3.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic3 copy.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col">
<a href="images/pic4.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic4 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic5.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic5 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic6.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic6 copy.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col">
<a href="images/pic7.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic7 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic8.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic8 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic9.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic9 copy.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col">
<a href="images/pic10.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic10 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic11.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic11 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic12.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic12 copy.jpg" alt="">
</a>
</div>
</div>
</div>
</div>
</body>
</html>
This how it looks when I click on an image in my gallery:
maybe this is the problem
src="images/pic1 copy.jpg"
try to do it like this
src="images/pic1copy.jpg"
and make sure you are targeting the right picture with the right path. Let me know if it works
I have an image gallery that I created with jQuery, it works very well when I click on each image and it appears in another div. Everything was created with Bootstrap. But I would also like to add a prev and back arrow buttons and I have no clue on how to do that.
This is the HTML:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<style>
.selected { border: 2px solid #000; }
.output img {
margin:0 auto;
}
</style>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="JS/lightbox.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container container-fluid ">
<div class="row text-center gallery">
<h2>Gallery</h2>
<div class="col-sm-4 ">
<p>Dimebag</p>
<img src="http://img.wennermedia.com/article-leads-horizontal/rs-3616-rectangle.jpg" class="img-responsive" alt="Dimebag">
</div>
<div class="col-sm-4 ">
<p>Zack Wylde</p>
<img src="http://loudwire.com/files/2016/05/Ozzfest-Knotfest-ZakkSabbath-20160512-KathyFlynn-4393.jpg?w=630&h=420&zc=1&s=0&a=t&q=89" class="img-responsive" style="width:100%" alt="Zack">
</div>
<div class="col-sm-4 ">
<p>Slash</p>
<img src="http://mmusicmag.com/m/wp-content/uploads/2015/01/Slash-Issue-No37.jpg" class="img-responsive" style="width:100%" alt="Slash">
</div>
</div><!--row-->
<hr>
<div class="row ">
<div class="text-center arrows">
<a class="prev" >❮</a>
<a class="next" >❯</a>
</div><!--arrows-->
<div class="col-md-12 output"></div>
</div><!--row-->
</div>
</div><!--container-fluid-->
</body>
</html>
And this is the jQuery code:
$(document).ready(function(){
$(".output").hide();
$(".arrows").hide();
$('img').click(function(){
$(".output").html('<img class="img-responsive " src="' + $(this).attr('src') + '"/>').fadeIn();
$(".arrows").fadeIn();
});//click
//Arrows
$('.next').click(function(){
//Code Here
});//next
});
I know that I have to add some coding in the function that target the arrow with the class next but Im not sure what.
I'm really new to Modals and Javascript for that matter and I would like to implement this Modal but it only shows for a quarter of a second then disappears without it being touched or anything.
I have read others' questions about it before and yes, I only have bootstrap.min.js loaded onto my index file. I don't have the bootstrap-modal.js.
Here's my code:
<!-- First Item -->
<div class="item col-md-4 col-sm-6 col-xs-12 mix apps">
<a href="#" data-toggle="modal" data-target="#portfolio-item1">
<img src="http://unsplash.it/680/380?random=4" alt="item" class="img-responsive">
<div class="overlay">
<div class="content">
<h3>Project Name</h3>
<p>Description? Category maybe?</p>
</div>
</div>
</a>
</div>
<!-- Modal-->
<div id="portfolio-item1" tabindex="-1" role="dialog" class="modal fade">
<div role="document" class="modal-dialog">
<div class="modal-content">
<div data-dismiss="modal" aria-label="Close" class="close-btn"><i class="icon-close"></i></div>
<div class="container-fluid">
<div class="row">
<div class="mockup col-md-8">
<div class="device-mockup macbook_2015 portrait gold">
<div class="device">
<div class="screen"><img src="http://unsplash.it/680/380?random=4" alt="..." class="img-responsive"></div>
</div>
</div>
</div>
<div class="text col-md-4">
<h2>Item Name</h2>
<p class="lead">Desription.</p>View on Behance
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Modal-->
Any suggestions is greatly appreciated!
EDIT: Here's a jsfiddle for it.
EDIT: Here's how my external resources are structured:
HEAD:
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/lightbox.min.css">
<link href="css/theme.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
</head>
FOOTER:
</footer>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/lightbox.min.js"></script>
<script src="js/plugin.js"></script>
<script src="js/theme.js"></script>
It seems like the problem has to do with your inclusion of external resources. In your application, it's important that you include:
jQuery
Bootstrap JS
Bootstrap CSS
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
You can use CDNs or simply add the files to your project and reference them there, but here's an updated jsfiddle in which the only thing that I changed was including the external resources.
Note: jQuery should be included before Bootstrap's JS.
I figured out what was wrong. Bootstrap JS was being called twice. I had it in the plugin.js and I also had the bootstrap.min.js
Thank you all for your help!
<div class="salt">
<a href="#" data-reveal-id="myModal" data-animation="fadeAndPop">
<img src="img/CLR.jpg" width="116px" height="48px">
</a>
</div>
<div id="myModal" class="reveal-modal">
<h1>Title</h1>
<p>content could go in here.</p>
<a class="close-reveal-modal">×</a>
</div>
</div>
on click that image nothing will display.
reavel.js link is
https://dl.dropboxusercontent.com/u/48992367/AppzVenture/extra/jquery.reveal.js
jsfiddle link
http://jsfiddle.net/8Leu4/2/
here is what's missing in your code :
the link of the reveal CSS file ;
<link rel="stylesheet" type="text/css" href="reveal.css">
include the jquery 1.4.4 or higher
and include jquery reveal
the files needed for this can be downloaded from here
so your code should be like this :
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="reveal.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.reveal.js"></script>
</head>
<body>
<div class="salt">
<a href="#" data-reveal-id="myModal" data-animation="fadeAndPop">
<img src="img/CLR.jpg" width="116px" height="48px"/>
</a>
</div>
<div id="myModal" class="reveal-modal">
<h1>Modal Title</h1>
<p>Any content could go in here.</p>
<a class="close-reveal-modal">×</a>
</div>
</body>
</html>