<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>
Related
I have the following script that allows me to resize the image, however, I am not able to drag the image around and change its position
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="home.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
</head>
<body>
<div class="row">
<div class="div1">
<h1> About Us </h1>
<p class="card-text">
general description
</p>
<div id="draggableHelper" style="display:inline-block">
<img id="image" src = "images/jimslogo2.png"/>
</div>
</div>
<div class="div2">
<span class="dot">
<div>
<div id="rotator"></div>
</div>
<p class="textScale">
<b>Featured Products </b>
</p>
</span>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#draggableHelper').draggable();
$('#image').resizable();
});
</script>
</body>
</html>
The image I'm trying to drag is contained in its own div tag within the "row" class div. I'm not sure this isn't working
What is your purpose in the draggable, you need to define the options for it
https://jqueryui.com/draggable/
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="home.css" >
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="row">
<div class="div1">
<h1> About Us </h1>
<p class="card-text">
general description
</p>
<div id="draggableHelper">
<img id="image" src = "images/jimslogo2.png"/>
</div>
</div>
<div class="div2">
<span class="dot">
<div>
<div id="rotator"></div>
</div>
<p class="textScale">
<b>Featured Products </b>
</p>
</span>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#draggableHelper').draggable();
$('#image').resizable();
});
</script>
</body>
</html>
Use these two links instead.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
You can try my answer here https://jsfiddle.net/a68mdzes/
Hope it works :)
You appear to have two versions of jQuery (3.5.1 & 1.9.1) in your script. You are also using an older version of jQuery UI (1.9.2). It would be best to ensure you are using the latest versions.
$(document).ready(function() {
$('#draggableHelper').draggable();
$('#image').resizable();
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="row">
<div class="div1">
<h1> About Us </h1>
<p class="card-text">general description</p>
<div id="draggableHelper" style="display:inline-block">
<img id="image" src="https://dummyimage.com/100x100/000/fff.png&text=IMAGE" />
</div>
</div>
<div class="div2">
<span class="dot">
<div>
<div id="rotator"></div>
</div>
<p class="textScale">
<b>Featured Products </b>
</p>
</span>
</div>
</div>
The above test allows for both to work as expected. You will notice I am using only one version of jQuery and jQuery UI.
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!
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>
I'm trying to get a simple carousel to work from Twitter Bootstrap 3.1.1. I've stripped it down to the simple generic Bootstrap mark-up with no styling but I've still had no luck getting the images to slide. Would appreciate any suggestions. My mark-up is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="test/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
<style type="text/css">
.container{
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<!-- carousel -->
<div id="this-carousel-id" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="images/sample1.svg" alt="" />
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/sample2.svg" alt="" />
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/sample3.svg" alt="" />
<div class="carousel-caption">
</div>
</div>
</div>
<!-- .carousel-inner -->
<!-- next and previous controls here
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div>
<!-- .carousel -->
<!-- end carousel -->
</div><!-- /container -->
<!-- Javascript-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
<!-- Bootstrap jQuery plugins compiled and minified -->
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('.carousel').carousel({
interval: 4000
});
});
</script>
</body>
</html>
It's probably because you're not pointing to a CDN version of bootstrap.min.js.
I say this because you're referencing jquery and the css from CDN locations but you're looking for the bootstrap.min.js to be local to your site. Is this how you have it configured?
Change it to use
http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js
See http://jsfiddle.net/8vvqf/
Maybe you open the html file directly, instead of from a server. Then the CDN url will become
file://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
change
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
to
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
and try again?
I'm trying to add a lightbox using bootstrap, but when I click on the link to the lightbox nothing happends.
My HTML code is as follows:
<head>
<link href="css/bootstrap-lightbox.css" rel="stylesheet" type="text/css"/>
<link href ="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href ="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<title>Bootstrap RC1</title>
<div class="container">
<div class="row">
<div class="col-lg-12">`
<h2>Bootstrap Lightbox - Creativity Tuts</h2>
<div id="demolightbox" class="lightbox fade hide" tabindex="-1" role="dialog" aria-hidden="true">
<div class="lightbox-content">
<img src="images/beautiful-image.jpg">
<div class="lightbox-caption"><p>This is my background image</p></div>
</div>
</div>
<a data-toggle="lightbox" href='#demolightbox'><p>Open lightbox</p></a>
</div>
</div>
</div>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap-lightbox.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
I think you have used two jquery files in your code,
<script src="js/jquery-2.0.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
I think you should use one at a time, and put this script above of rest of all the embeded scripts
Also two bootstrap files added to this code, only one is required. So remove one of below file from the code
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
I think all you need to do is put the ajax.googleapis.com... above all the other scripts, and it'll work!
Try This
<html>
<head>
<!-- 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">
<!-- 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://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.min.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">`
<h2>Bootstrap Lightbox - Creativity Tuts</h2>
<div id="demolightbox" class="lightbox fade hide" tabindex="-1" role="dialog" aria-hidden="true">
<div class="lightbox-content">
<img src="img_fjords.jpg"/>
<div class="lightbox-caption">
<p>This is my background image</p>
</div>
</div>
</div>
<a data-toggle="lightbox" href="#demolightbox" class="span2 thumbnail">
<p>Open lightbox</p>
<img src="img_fjords.jpg"/>
</a>
</div>
</div>
</div>
</body>
</html>