I used to have an hyperlink that is anchored to an image.
But I now when I click the image it needs to zoom in first so I used Fancy box, then the zoom in image must have the link.
Is it possible? Here is my code below
<html>
<head>
<meta charset="utf-8">
<title>My page</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
</head>
<body>
<a href="image.jpg" data-fancybox data-caption="www.google.com" data-width="2048" data-height="1365">
<img class="fancybox" src="thumbnail.jpg" alt="" />
</a>
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.fancybox.min.js"></script>
</body>
</html>
For future reference, it is possible but you need to create a form for your fancy box and not a direct image.
<html>
<head>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.5"></script>
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.5" media="screen" />
</head>
<body>
<img class="fancybox" src="thumbnail.jpg" alt="" />
<div id="divForm" style="display:none">
<img class="fancybox" src="thumbnail.jpg" alt="" />
</div>
<script type="text/javascript">
$("#btnForm").fancybox();
</script>
</body>
</html>
Related
[enter code here][1]I'm trying to map an area on an image.
This image is part of a turn.js code.
It's a magazine flip, but now I want a clickable area on the image.
I can't figure out how to, I feel like the JS code is overwriting the clickable area.
Can somebody help me out? Would be GREAT.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>turn.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body background="BOOKLETS/background.jpg" >
<div id="magazine">
<div>
<span class="text">
<img class="img-fluid" src=BOOKLETS/test1.jpg>
</span>
</div>
<div>
<span class="text">
<a herf="www.youtube.com">
<img class="img-fluid" src="BOOKLETS/test2.jpg" usemap="#image-map">
<map name="image-map">
<area href="www.youtube.com" coords="1430,1440,931,816" shape="rect">
</map>
</a>
</span>
</div>
<div>
<span class="text">
<img class="img-fluid" src=BOOKLETS/test3.jpeg>
</span>
</div>
<div>
<span class="text">
<img class="img-fluid" src=BOOKLETS/test4.jpg>
</span>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>
I stuck into this problem. My separate header and footer only show after the data in js file is completely fetched. When the data is loading, I can see the input (search image) and another text input but I can't see the header and footer. Any suggestion for getting the header and footer first before executing js file?
Thanks.
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script>
$(function(){
$("#header").load("../header/index.html");
$("#footer").load("../footer/index.html");
});
</script>
<link rel="stylesheet" href="../header/style.css">
<link rel="stylesheet" href="../footer/style.css">
</head>
<body>
<div id="header"></div>
<section>
<div>
<input type="image" src="search.png" id="submitKeywordButton" onclick="submitKeyword();" />
<div style="overflow: hidden;">
<input type="text" name="subscribe" placeholder="keyword" id="keyword"/>
</div>
</div>
</section>
<div id="footer"></div>
<script src="./main.js"></script>
</body>
</html>
Header file
<link rel="stylesheet" href="./style.css">
<header>
<div class="container">
<div id="branding">
<img src="../img/icon.png" height="40" width="160"/>
</div>
<nav>
<img src="../img/firstFlag.png" height="20" width="30"/>
<img src="../img/secondFlag.png" height="20" width="30"/>
</nav>
</div>
</header>
Give this a try:
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../header/style.css">
<link rel="stylesheet" href="../footer/style.css">
</head>
<body style="display: none">
<div id="header"></div>
<section>
<div>
<input type="image" src="search.png" id="submitKeywordButton" onclick="submitKeyword();" />
<div style="overflow: hidden;">
<input type="text" name="subscribe" placeholder="keyword" id="keyword"/>
</div>
</div>
</section>
<div id="footer"></div>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="./main.js"></script>
<script>
$(function(){
$("#header").load("../header/index.html", function (){
$("#footer").load("../footer/index.html", function() {
$("body").fadeIn(1000);
});
});
});
</script>
</body>
if load method is sync, then try change your html structure like this :
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../header/style.css">
<link rel="stylesheet" href="../footer/style.css">
<script src="../node_modules/jquery/dist/jquery.js"></script>
</head>
<body style="display: none">
<div id="header"></div>
<div id="footer"></div>
<script>
$("#header").load("../header/index.html");
$("#footer").load("../footer/index.html");
</script>
<section>
<div>
<input type="image" src="search.png" id="submitKeywordButton" onclick="submitKeyword();" />
<div style="overflow: hidden;">
<input type="text" name="subscribe" placeholder="keyword" id="keyword"/>
</div>
</div>
</section>
<script src="./main.js"></script>
</body>
I'm using AOS plugin, and once I run the plugin on localhost it fails to appear, but if I run it on codepen it runs perfectly.
I have the same code as it appears in codepen and I've used AOS.init inside a <script> tag to run it.
Also I have CDN stylesheet and script in my code.
<html>
<head>
<title>What To Eat - Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="javascript/script.js"></script>
<script>
AOS.init({
duration: 1200,
})
</script>
</head>
<body>
<div class="item" data-aos="fade-up">1</div>
<div class="item" data-aos="fade-down">2</div>
<div class="item" data-aos="fade-right">3</div>
<div class="item" data-aos="fade-left">4</div>
<div class="item" data-aos="zoom-in">5</div>
<div class="item" data-aos="zoom-out">6</div>
<div class="item" data-aos="slide-up">7</div>
<div class="item" data-aos="flip-up">8</div>
<div class="item" data-aos="flip-down">9</div>
<div class="item" data-aos="flip-right">10</div>
<div class="item" data-aos="flip-left">11</div>
</body>
</html>
And CSS is the same as you can see in codepen.
I believe the browser version (Chrome - latest version) isn't the problem since I able to see the result in CodePen good enough.
How can I run this plugin in my localhost?
You need to call your script after the page is rendered, this will allow to bind the events to your elements after being created:
<html>
<head>
<title>What To Eat - Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="javascript/script.js"></script>
</head>
<body>
<div class="item" data-aos="fade-up">1</div>
<div class="item" data-aos="fade-down">2</div>
<div class="item" data-aos="fade-right">3</div>
<div class="item" data-aos="fade-left">4</div>
<div class="item" data-aos="zoom-in">5</div>
<div class="item" data-aos="zoom-out">6</div>
<div class="item" data-aos="slide-up">7</div>
<div class="item" data-aos="flip-up">8</div>
<div class="item" data-aos="flip-down">9</div>
<div class="item" data-aos="flip-right">10</div>
<div class="item" data-aos="flip-left">11</div>
</body>
</html>
<script>
AOS.init({
duration: 1200,
})
</script>
Hi I was advised to use ui-router due to having problems with nested views.
I'm trying to create a form like this to go in the middle of my page.
the form
However it doesn't work and it's made my website not being able to load properly. I cannot view anything from the header down. The logo and the header works...but No body and no footer. Form pages are in partials/form.html etc. The body and footer loaded fine before I edited the code to include the forms.
Here's my plunker my app
here's index.html
<html ng-app="financeApp">
<head>
<meta charset="utf-8">
<!-- CSS -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<header>
<div class="wrap">
<!-- logo -->
<img class="logo" src="img/logo.png" />
</div>
<body ng-controller = "demoCtrl">
<ul class="nav nav-pills pull-right">
<li ng-class="{active: isState('home') }">
<a ui-sref="home">Home</a>
</li>
<li ng-class="{active: isState('form') }">
<a ui-sref="form">Form</a>
</li>
<li ng-class="{active: isState('contact') }">
<a ui-sref="contact">Contact</a>
</li>
</ul>
<h3 class="text-muted">Demo Page</h3>
<br>
<div ui-view=""></div>
</div>
<!-- Loading the Footer -->
<div id="footer" ng-include="'partials/footer.html'"></div>
<!-- App JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-route.min.js"> </script>-->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js"> </script>-->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"> </script>
<script src="js/script.js"></script>
<!--<script src="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>-->
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"> </script>
<script src="https://code.jquery.com/jquery-git2.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/controllers/controllers.js"></script>
<script src="js/directives/directives.js"></script>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="bootstrap#*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Thanks
New to JQuery and web dev in general.
I have been trying to get the confirm override simplemodal demo to work, so that it pops up with on alert on initial load of my site.
The below is the standard sample, but I have included the $(document).ready() function to try and fire the modal dialog on startup.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/confirm.js'></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$('#confirm-dialog').modal();
});
</script>
</head>
<body>
<div id='container'>
<div id='content'>
<div id='confirm-dialog'>
<input type='button' name='confirm' class='confirm' value='Demo'/>
</div>
<!-- modal content -->
<div id='confirm'>
<div class='header'><span>Confirm</span></div>
<div class='message'></div>
<div class='buttons'>
<div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
</div>
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='img/confirm/header.gif' alt='' />
<img src='img/confirm/button.gif' alt='' />
</div>
</div>
</div>
</body>
</html>
However, this does not fire, and from what my limited experience with Firebug, I cannot see any errors so must be my code logic that is the issue?
It works for me in JSFiddle. What about using .dialog method of jquery UI library:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.ui.js'></script>
<script type='text/javascript' src='js/confirm.js'></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$('#confirm-dialog').dialog({modal: true});
});
</script>
</head>
<body>
<div id='container'>
<div id='content'>
<div id='confirm-dialog'>
<input type='button' name='confirm' class='confirm' value='Demo'/>
</div>
<!-- modal content -->
<div id='confirm'>
<div class='header'><span>Confirm</span></div>
<div class='message'></div>
<div class='buttons'>
<div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
</div>
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='img/confirm/header.gif' alt='' />
<img src='img/confirm/button.gif' alt='' />
</div>
</div>
</div>
</body>
</html>
You can download jquery.ui file from here