My fancybox isn't working. I have looked through these forums and can't seem to figure out why. I'm somewhat new at this. I read that there could be an issue with the newer version of fancybox with jquery?
Any help would be greatly appreciated as I'd really like to implement fancybox into my portfolio site.
Here's a link to the site I'm working on (please bear with me as it is still in progress): http://calpoly.edu/~hmtorres/finalproject/index.html
Here's my code:
<!DOCTYPE html>
<html>
<head>
<title>Haley Torres</title>
<link rel="stylesheet" href="main.css">
<!--google font-->
<link href='http://fonts.googleapis.com/css?family=Roboto:500,400italic,700,300italic,400' rel='stylesheet' type='text/css'>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="javascript/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="javascript/fancybox/source/jquery.fancybox.pack.js"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="javascript/fancybox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="javascript/fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="javascript/fancybox/source/helpers/jquery.fancybox-media.js"></script>
<link rel="stylesheet" href="javascript/fancybox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="javascript/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="javascript/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
</head>
<body>
<div id="container">
<div id="nav">
<img src="images/identity-h80-w149.png" alt="Haley Torres">
<ul>
<li>WORK</li>
<li>ABOUT</li>
<li>RESUME</li>
<li>CONTACT</li>
</ul>
</div><!--end of nav-->
<div id="work">
<br><!--line break pulls our computer from under navbar-->
<img src="images/computer.png" alt="Work station">
<h1>My Work</h1>
<table>
<tr>
<td><a class="fancybox" href="images/moviepostermockup-large.png" alt="Movie Poster"><img src="images/moviepostermockup-small.png" alt="Movie Poster"></a></td>
<td><a class="fancybox" href="images/p4pmockup-large.png" alt="Pints for Pups Poster"><img src="images/p4pmockup-small.png" alt="Pints for Pups Poster"></a></td>
<td><img src="images/personalidentity-small.png" alt="Personal Identity"></td>
</tr>
<tr>
<td>row 2</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</table>
</div><!--end of work-->
And further down:
<!--fancybox-->
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</body><!--end of body-->
</html>
I've downloaded everything to the correct folder and it is linked properly. When I click the image, it links to the bigger image, not popping up in the fancybox.
You're calling jQuery twice in your HTML which will break Fancybox. Try removing
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
From line 143 in your HTML and it should work.
Related
I'm trying to get a carousel just like mentioned in the website of materialize
https://materializecss.com/carousel.html
However, the website generated by the below is coming up empty. I tried to shuffle the links' positions (added removed jquery cdn) but not sure where i'm going wrong.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Top AskReDDit </title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="https://i.pinimg.com/736x/50/df/34/50df34b9e93f30269853b96b09c37e3b.jpg"> </a>
<a class="carousel-item" href="#two!"><img src="https://stayhipp.com/wp-content/uploads/2019/10/reddit.png"></a>
<a class="carousel-item" href="#three!"><img src="https://images.discordapp.net/avatars/635458547127156767/29c03a44a8c4afdb088f0877c66831c8.png?size=512"></a>
<a class="carousel-item" href="#four!"><img src="https://i.pinimg.com/736x/50/df/34/50df34b9e93f30269853b96b09c37e3b.jpg"></a>
</div>
<script type ="text/javascript">
$(document).ready(function(){
$('.carousel').carousel();
});
</script>
dbsjdbsdsb
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<!--JavaScript at end of body for optimized loading-->
</body>
</html>
You to have call jquery before the materialize js.
Secondly write that js code only after calling libraries.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="https://i.pinimg.com/736x/50/df/34/50df34b9e93f30269853b96b09c37e3b.jpg"> </a>
<a class="carousel-item" href="#two!"><img src="https://stayhipp.com/wp-content/uploads/2019/10/reddit.png"></a>
<a class="carousel-item" href="#three!"><img src="https://images.discordapp.net/avatars/635458547127156767/29c03a44a8c4afdb088f0877c66831c8.png?size=512"></a>
<a class="carousel-item" href="#four!"><img src="https://i.pinimg.com/736x/50/df/34/50df34b9e93f30269853b96b09c37e3b.jpg"></a>
</div>
<!-- call jquery First -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!--Then Initialize the carouseL-->
<script type ="text/javascript">
$(document).ready(function(){
$('.carousel').carousel();
});
</script>
</body>
</html>
Here is the working Codepen link.
Please, can you help me with integration datatables bootstrap on my simple table? I add this code, and not working for me.
I also tried to add links of scripts to head, but not working too. What am I doing wrong in this code?
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="jquery/dataTables.bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="jumbotron">
<h3>Požičovňa náradia SEAS</h3>
</div>
<script>
$(document).ready(function() {
$('#tabulka_kariet').DataTable();
});
</script>
<table id="tabulka_kariet" class="table table-bordered">
<thead>
<tr>
<th>Kód karty</th>
<th>Názov karty</th>
<th>Počet ks na všetkých skladoch</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Kód karty</th>
<th>Názov karty</th>
<th>Počet ks na všetkých skladoch</th>
</tr>
</tfoot>
<tr>
<td>13245</td>
<td>Sekacie kladivo Bosch 5184</td>
<td class="pocet">12</td>
</tr>
<tr>
<td>6789</td>
<td>Brúska Bosch 5184</td>
<td class="pocet">7</td>
</tr>
</table>
<?php
?>
</div>
</body>
<script src="bootstrap/js/bootstrap.min.js" />
<script src="jquery/jquery-3.0.0.min.js" />
<script src="jquery/dataTables.bootstrap.min.js" />
<script src="jquery/jquery.dataTables.min.js" />
<script src="jquery/jquery-1.12.4.js" />
</html>
You had three problems one I didnt notice and one I found out while helping.
You called your jquery before your script was loaded(My comments on the post are wrong). Call this after the script loads this is why people were telling you to add your scripts into the head.
You used two versions of jQuery. This should not
be done as the final jQuery to load will be the one you use. If you intend to use multiple jQuery files look at no conflict between versions
You load jQuery after bootstrap where it should load before because bootstrap uses jQuery.
Below will run if you want to test it. Change the script urls to your local ones and it should still run. change the css links too to your local one
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="jquery/dataTables.bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"></link>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h3>Požičovňa náradia SEAS</h3>
</div>
<table id="tabulka_kariet" class="table table-bordered">
<thead>
<tr>
<th>Kód karty</th>
<th>Názov karty</th>
<th>Počet ks na všetkých skladoch</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Kód karty</th>
<th>Názov karty</th>
<th>Počet ks na všetkých skladoch</th>
</tr>
</tfoot>
<tr>
<td>13245</td>
<td>Sekacie kladivo Bosch 5184</td>
<td class="pocet">12</td>
</tr>
<tr>
<td>6789</td>
<td>Brúska Bosch 5184</td>
<td class="pocet">7</td>
</tr>
</table>
<?php
?>
</div>
</body>
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Datatables -->
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('#tabulka_kariet').DataTable();
});
</script>
</html>
As said in the comments you need to place the jQuery scripts above the bootstrap link. This is because bootstrap needs jQuery to work so you need to load jQuery before bootstrap loads
Try it like this:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="bootstrap/js/bootstrap.min.js" />
<script src="jquery/jquery-3.0.0.min.js" />
<script src="jquery/dataTables.bootstrap.min.js" />
<script src="jquery/jquery.dataTables.min.js" />
<script src="jquery/jquery-1.12.4.js" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="jquery/dataTables.bootstrap.min.css" />
</head>
I am working in one task in that I want to create online visiting card in html. Now, at load times it looks like this in which I have draw the different shaped.
As per you see the first image I have draw the different shaped
In this second image when I am selecting a picture at that time shaped toolkit was hide and so from that I unable to create a shaped over an image.
So as per I research in my code I realized that jquery "initialize: function()" is not load after the selecting picture. So it can be said that at load time jquery is not excuting.
Here is my code,
<script type='text/javascript' src='js/jquery.min.js'></script>
<script src="js/kinetic-v3.9.3.js"></script>
<script type="text/javascript" src="js/version1.js"></script>
<link href="css/layout.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="css/menu.css" type="text/css" media="screen" />
<!-- Menu -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie/ie.css" />
<![endif]-->
<link rel="stylesheet" href="styles/global.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/mobile.js"></script>
<script type="text/javascript" src="js/form.js"></script>
<script type="text/javascript" src="./lib/jquery.1.10.2.min.js"></script>
<!-- jquery -->
<script type="text/javascript" src="./Pixanova_files/jquery.min.1.9.0.js"></script>
<!-- backbone -->
<script type="text/javascript" src="./Pixanova_files/underscore.min.1.4.4.js"></script>
<script type="text/javascript" src="./Pixanova_files/backbone.min.0.9.10.js"></script>
<!-- wColorPicker -->
<link rel="stylesheet" type="text/css" href="./Pixanova_files/wColorPicker.css">
<script type="text/javascript" src="./Pixanova_files/wColorPicker.js"></script>
<!-- wPaint -->
<script type="text/javascript" src="./Pixanova_files/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="./Pixanova_files/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="./Pixanova_files/jquery.ui.mouse.min.js"></script>
<script type="text/javascript" src="./Pixanova_files/jquery.ui.draggable.min.js"></script>
<link rel="stylesheet" type="text/css" href="./Pixanova_files/wPaint.css">
<script type="text/javascript" src="./Pixanova_files/wPaint.js"></script>
<!-- pixanova -->
<script type="text/javascript" src="./Pixanova_files/pixanova.js"></script>
<link rel="stylesheet" type="text/css" href="./Pixanova_files/pixanova.css">
<div id="wrapper">
<!--header-->
<div id="content">
<!-- container is the div id from where the image is display -->
<div id="container" style="width:600px; height:600px; float:right"> </div>
<script type="text/javascript">
var pixanova = new PixanovaView321();
</script>
<div id="editor">
<ul id="text" style="float: left; margin-right:10px;">
<!--<div id="spinner" class="spinner" style="display:none;margin-left:80px;margin-bottom:20px;"> Image Uploading<img src="images/ajax.png" alt="loading">
</div>-->
<div id="container2" style="width:140px;"> </div>
<li>
<label> </label>
<input type="submit" id="textsubmit" value="Add Text"/>
<select name="Choice" onchange="setImage(this);">
<option value="images/blue.jpg">Photo 1</option>
<option value="images/black.jpg">Photo 2</option>
<option value="images/red.jpg">Photo 3</option>
<option value="images/redplan.jpg">Photo 4</option>
</select>
<input type='file' />
</li>
</ul>
<p class="clearing" /></p>
</div>
</div>
</div>
<!--container-->
</body>
here the external pixanova.js code from where the toolkit has calling
//This variable is calling the PixanovaView321 function in pixanova.html
var PixanovaView321 = Backbone.View.extend(
{
initialize: function()
{
alert();
//Menu option
$('#container').wPaint({
menuOffsetX: 50,
menuOffsetY: 50,
menuOrientation: 'horizontal',
strokeStyle: "yellow"
});
},
});
I'm using JQuery UI to render a tabbed layout. My markup is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/jquery-ui.min.css"/>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/jquery-ui.js" type="text/javascript">
</script>
<script src="js/jquery-ui.min.js" type="text/javascript">
</script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-
theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<script src="js/jquery-ui.min.js"></script>
<script src="jquery-ui-1.11.2.custom/external/jquery/jquery.js"></script></head>
<body>
<img src="images/logo_big.gif" alt="Logo"/><br/>
<div id="tabs">
<ul>
<li>Introduction</li>
<li>Family</li>
<li>Wills</li>
</ul>
</div>
<div id="#tabs-1">
<h1>Introduction</h1>
</div><!-- Tabs1 -->
<div id="#tabs-2">
<h2>Family Status</h2>
</div><!-- Tabs2 -->
</body>
</html>
How does the above markup need to be modified so that the Jquery UI tabs are properly rendered?
It looks like you were loading jquery twice, also I think you need to move your init function below the links to jquery, like this:
<!doctype html> <html>
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-
theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<script src="js/jquery-ui.min.js"></script>
<script src="jquery-ui-1.11.2.custom/external/jquery/jquery.js"></script>
<script>
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<img src="images/logo_big.gif" alt="Logo" />
<br/>
<div id="tabs">
<ul>
<li>Introduction
</li>
<li>Family
</li>
<li>Wills
</li>
</ul>
</div>
<div id="#tabs-1">
<h1>Introduction</h1>
</div>
<!-- Tabs1 -->
<div id="#tabs-2">
<h2>Family Status</h2>
</div>
<!-- Tabs2 -->
</body> </html>
I have a working pinchzoom in html using iscroll but when i build it for phonegap for ios and android it pinch zoom seems to stop to work.
The code below is my working code on html but when i try to port it to an ios and android app it stops working. Viewing it in a browser works.
I am not really good with javascript maybe somebody can help me fix this issue.
Here is my code.
<!DOCTYPE html>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
<link href="css/jquery.mobile.iscrollview.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/jquery.mobile.iscrollview-pull.css" media="screen" rel="stylesheet" type="text/css" />
<!-- Scripys -->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="js/jquery.mobile.iscrollview.js" type="text/javascript"></script>
<script src="js/iscroll.js" type="text/javascript"></script>
<script src="js/jquery.mobile.iscrollview.js" type="text/javascript"></script>
<script src="phonegap.js" type="text/javascript"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper',{
zoom:true, zoomMax: 4
});
}
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<!-- Start of Page - Map-->
<div id="map" data-role="page">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<div id="logo">
<img src="images/logo-dark.png">
</div>
</div>
<!-- Start of Content - Schedule [Map] -->
<div data-role="content">
<div id="wrapper" style="width:100%">
<img class="mapimage" src="images/leaf_map.jpg"/>
</div>
</div>
<!-- End of Content -->
<!-- Start of Footer -->
<div data-role="footer" data-position="fixed" data-role="footer" data-tap-toggle="false">
<div class="banner">
<div>
<a href="promo.html" data-rel="dialog" data-transition="pop">
<span>This app was created by:</span>
<span><img src="images/iwebxpert-logo.png"></span>
<span>iWebXpert</span>
</a>
</div>
</div>
<!-- Navbar / Main Navigation -->
<div data-role="navbar">
<ul>
<li>
<img src="images/home-icon.png">
</li>
<li>
<img src="images/schedule-icon.png">
</li>
<li>
<img src="images/map-icon.png">
</li>
<li>
<img src="images/design-icon.png">
</li>
<li>
<img src="images/about-icon.png">
</li>
</ul>
</div>
</div>
<!-- End of Footer -->
</div>
<!-- End of Page - Map-->
<script>loaded();</script>
Since you are loading scripts from external sources (if you haven't already) make sure you add
<access origin="*" />
to your config.xml file