Fancybox image click works isolated but not with my other code - javascript

So my problem is that when clicking an image to enable fancybox embedded with all my other code, the function is no longer working. Can anyone find why?
I tried to put the image before the container and thumbnail class but no luck..
First, I give you all my code (which makes fancybox not work), and below is the isolated code that makes the image pop up just fine as I want it to.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
<title>Title</title>
<link href='http://fonts.googleapis.com/css?family=Quicksand:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="bootstrap-3.3.2-dist/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js"></script>
</head>
<body>
<section>
<header>
TITLE
</header>
<nav>
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul></li>
<li>DDD
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul></li>
<li>EEE</li>
</ul>
</nav>
</section>
<div class='container'>
<div class="thumbnail">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<a class="fancybox" href="images/image1.jpg"><img src="images/image1.jpg"></a>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<a class="fancybox" href="image2.jpg"><img src="image2.jpg"></a>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<a class="fancybox" href="image3.jpg"><img src="image3.jpg"></a>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<a class="fancybox" href="image4.jpg"><img src="image4.jpg"></a>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<a class="fancybox" href="image5.jpg"><img src="image5.jpg"></a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script scr='bootstrap-3.3.2-dist/js/bootstrap.js'></script>
<script src="http://goo.gl/1yIJUX"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".fancybox").fancybox();
});
</script>
</body>
</html>
This is the code that is working fine:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Title</title>
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js"></script>
</head>
<body>
<a class="fancybox" rel="group" href="images/image1.JPG"><img src="images/image1.JPG" alt="" /></a>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</body>
</html>

Probably it cannot find the fancybox css and js files. It is suspicious that the URLs start with a slash: if you have a "fancybox " subdirectory, you should have
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

Related

I'm trying to create a slick slider, but my slick slider isn't working. No error shows in the console as well

So i've been trying to use slick slider for my website. I have all the files in the correct folder, there is no error in my console. My images are cards are showing but these are in line vertically, and i don't know what I'm doing wrong. here is my HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Palvisha Shoaib</title>
<link rel="stylesheet" type="text/css"href = "style.css">
<link rel="stylesheet" type="text/css"href = "slick.css">
<link rel="stylesheet" type="text/css"href = "slicktheme.css">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght#600&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
</head>
<body>
<div class="box6">
<section class="variable slider">
<div>
<div class="row">
<div class="col s12 m7">
<div class="card" style="width: 250px;">
<div class="card-content">
<p>content</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m7">
<div class="card" style="width: 250px;">
<div class="card-content">
<p>content</p>
</div></div>
</div>
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="slick.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</body>
</html>
I recommend looking on this website, it has an in-depth tutorial on the slick slider. https://kenwheeler.github.io/slick/
I can see that you don't have this function in your code
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
});
</script>

how to make fullPage.js plugin to work?

I'm so newbie in javascript !
I need your help, guys (pretty please).
I need to initialize fullPage.js plugin into my webpage, but I don't know what is missing. I've read the tutorial for this but I'm doing something wrong and I don't know what.
This is my html code:
<head>
<title>Title</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href='css/style.css' type='text/css' media='all' />
<link rel="stylesheet" type="text/css" media="all" href="css/animate.css">
<link rel="shortcut icon" href='img/favicon.ico' type='image/x-icon'/ >
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" /> <!-- fullPage.js plugin -->
<script src="js/script.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.easings.min.js"></script> <!-- fullPage.js plugin -->
<script type="text/JavaScript" src="js/jquery.fullPage.min.js"></script> <!-- fullPage.js plugin -->
<script type="text/javascript" src='js/jquery-migrate.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['first-section', 'second-section', 'third-section', 'fourth-section', 'fifth-section', 'lastPage'],
scrollingSpeed: 1000
});
});
</script>
</head>
<body>
<div class="container-fluid" id="fullpage">
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- fullPage.js plugin -->
</body>
Many thanks,
Sandra P.
I think this can help you.
And I recommend to try to replace it:
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" />
<script type="text/JavaScript" src="js/jquery.fullPage.min.js"></script>
to this
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css" />
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>
This should correct the error TypeError:. $(...).Fullpage.
Just look at the live example.
I changed your example and it works, see this.
Update
Properly include in that order:
Styles;
jQuery;
jQuery Migrate (I think you do not need it);
jQuery FullPage and other jQuery
plugins;
you code.
it should look like this
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css" />
<link rel="stylesheet" type="text/css" href="youCSS" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>
<!--other jQuery plugins-->
<script type="text/JavaScript" src="youJS"></script>
Update 2
Replace youJS :)
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#fullpage').fullpage({
anchors : ['first-section', 'second-section', 'third-section', 'fourth-section', 'fifth-section', 'lastPage'],
scrollingSpeed : 1000
});
});
</script>
</head>
<body>
<div class="container-fluid" id="fullpage">
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
</div>
</body>

How to add tax and grand total to my simplecart JS

Hello all I'm trying to use simplecart.js to create a custom checkout page for my website I want to add a simplecart_grandtotal but it doesn't seem to display. How can I go about doing that? My simple code is which i have taken from the demo http://wojodesign.com/simpleCart/myCart.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8">
<script src="js/jquery-1.7.min.js"></script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<title>simpleCart (js) Demo</title>
<link rel="stylesheet" href="example.css" type="text/css" media="screen" charset="utf-8" />
<!--[if lte IE 6]><link rel="stylesheet" href="ie6.css" type="text/css" media="screen" charset="utf-8" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" media="screen" charset="utf-8" /><![endif]-->
<script src="simpleCart2.js" type="text/javascript" charset="utf-8"></script>
<!--Make a new cart instance with your paypal login email-->
<script type="text/javascript">
simpleCart.email = "yasdasb#gmail.com";
simpleCart.cartHeaders = ['Image','Name','Price','Quantity_input','Total'];
simpleCart.checkoutTo = PayPal;
</script>
<!--Include the SimpleCart(js) script
<script src="javascripts/simpleCart.js" type="text/javascript" charset="utf-8"></script>
Make a new cart instance with your paypal login email
<script type="text/javascript">
simpleCart = new cart("brett#wojodesign.com");
</script>-->
</head>
<body>
<div class="main">
<div id="content">
<div id="sidebar" style="margin-top:20px">
<h2>You Might Also Like</h2>
<div class="alsoContainer">
<div class="alsoImage">
<img src="images/thumbs/blackGold.jpg" alt="" />
</div>
<div class="alsoInfo">
Black Gold<br/>
add to cart
</div>
<div class="alsoPrice">$58</div>
</div>
<div class="alsoContainer">
<div class="alsoImage">
<img src="images/thumbs/goldShoe.jpg" alt="" />
</div>
<div class="alsoInfo">
Gold Shoe<br/>
add to cart
</div>
<div class="alsoPrice">$58</div>
</div>
<div class="alsoContainer">
<div class="alsoImage">
<img src="images/thumbs/greenStripe.jpg" alt="" />
</div>
<div class="alsoInfo">
Green Stripe<br/>
add to cart
</div>
<div class="alsoPrice">$58</div>
</div>
<!--End #sidebar-->
</div>
<div id="left">
<!--Add a Div with the class "simpleCart_items" to show your shopping cart area.-->
<div class="simpleCart_items" >
</div>
<div class="checkoutEmptyLinks">
<!--Here's the Links to Checkout and Empty Cart-->
empty cart
Checkout
</div>
</div>
<!--End #content-->
</div>
</div>
</body>
</html>
this demo not have all the code go to https://github.com/wojodesign/simplecart-js/blob/master/simpleCart.js and take from there.
and then you can add :
<div class="simpleCart_tax"></div>
<div class="simpleCart_taxRate"></div>
<div class="simpleCart_grandTotal"></div>
http://simplecartjs.org/documentation/displaying_cart_data

GoodMap API3 with PhoneGap

I work on application in which i need map i worked in map module and in browser it shows correct result but as it is an mobile application so i run it into emulator and the following error occues
Uncaught TypeError: object is not a function at file:///android_asset/www/nav-map.html:3
my html file Nav-map.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.0.css">
<script src="js/hsmain.min.js"></script>
<link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />
<link href="photoswipe/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="photoswipe/klass.min.js"></script>
<script type="text/javascript" src="photoswipe/code.photoswipe.jquery-3.0.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jqm-datebox.min.css" />
<script src="js/jqm-datebox.core.min.js"></script>
<script src="js/jqm-datebox-1.1.0.mode.datebox.js"></script>
<script src="js/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src="js/camera.js"></script>
<script src="lib/work-space.js"></script>
<script src="lib/config.js"></script>
<script src="lib/userprofile.js"></script>
<script src="lib/loginlogout.js"></script>
<script src="lib/binder.js"></script>
<script src="lib/newsfeed.js"></script>
<script src="lib/harvestdata.js"></script>
<script src="lib/members.js"></script>
<script src="lib/pictures.js"></script>
<script src="lib/properties.js"></script>
<script src="lib/clubnewsfeeds.js"></script>
<script src="lib/jsutility.js"></script>
<script src="lib/weather.js"></script>
<script src="lib/groups.js"></script>
<script src="lib/groupnewsfeeds.js"></script>
<script src="lib/companies.js"></script>
<script src="lib/companynewsfeeds.js"></script>
<script src="lib/map.js"></script>
<script src="lib/searching.js"></script>
<script src="lib/notitfications.js"></script>
<link href="960/jquery-mobile-fluid960.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style>
#map-canvas
{
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body>
<div data-role="page" id="ClubMapPage">
<!--header-->
<script>$('#ClubMapPage').on('pageshow',function(){
UserProfile.loadProfile();
Notifications.getTopNotification();
Properties.getClubNameAndImage();
Map.getMap();
})
</script>
<div id="landing-header" data-role="header" data-position="fixed" data-tap-toggle="false">
<div class="container_12 padding5">
<div class="grid_1">
<span class="inline-button floatleft">Back</span>
</div>
<div class="grid_10">
<div class="hs-icon-wrap">
<span class="dropdown inline-button"><a class="hs-request dropdown-toggle showRequestsBtn" data-toggle="dropdown" data-role="button" href="#messages" data-iconpos="notext" >Requests</a>
</span>
<span class="dropdown inline-button"><a class="hs-notification dropdown-toggle showNotificationsBtn" data-role="button" href="#" data-toggle="dropdown" data-iconpos="notext" >Notifications</a>
</span>
</div>
</div>
<div class="grid_1">
<span class="inline-button floatright">Right</span>
</div>
</div>
</div>
<!--contents-->
<div data-role="content" class="hs-content">
<div class="hs-notifications-menu-contents-wrap feeds-content-header HSnotifications">
<div class="hs-notification-menu-heading">
Notifications
<a title="Remove" class="removebutton hideNotificationsBtn" href="javascript://" >Remove </a>
</div>
<div class="hs-notifications-menu-items-wrap" >
<ul class="hs-notificatin-list notificationul">
</ul>
</div>
<div class="hs-notification-menu-footer">
<a class="seemore" href="#" title="">
<span>See All</span>
</a>
</div>
</div>
<!-- End Of Notifications -->
<div class=" hs-notifications-menu-contents-wrap feeds-content-header HSrequests" >
<div class="hs-notification-menu-heading">
Requests
<a title="Remove" class="removebutton hideRequestsBtn" href="#" >Remove </a>
</div>
<div class="hs-notifications-menu-items-wrap" style="">
<ul class="hs-notificatin-list requestul">
</ul>
</div>
<div class="hs-notification-menu-footer">
<a class="seemore" href="#" title="">
<span>See All</span>
</a>
</div>
</div>
<!-- end of requests -->
<div class="container_12">
<div class="content-header">
<h4><img class="smallClubImage" alt="" src="images/header-small-image.png" /></h4>
Info
<div data-role="navbar" class="nav-glyphish-example" data-grid="c">
<ul>
<li class="no-border">Members</li>
<li class="active">Map</li>
<li>Harvest</li>
<li><a href="clubpages/albums.html" id="nav-picture" data-icon="custom" >Picture</a></li>
</ul>
</div>
</div>
<div class="content-wrap map-wrap">
<div id="map-canvas" style="height:500px; width:100%; margin:0; padding:0">
</div>
</div>
</div>
</div>
</div>
I had the same error but I solved it two months ago!
I was because a jquery plugin of mine was not ending in ;
You can Try to end your JS lines with ; I can see you don't follow this best practices advice. So, add it to you own js files (at the end) in order to let the files concatenation understand That a new file is really a new single function (or statement)
Sorry If this is not the solution to your problem! Thank you for reading
Hi there is some problem with your class names you put the class names same as some keywords like Image you cannot put Image as a class name also check if other same problem exist i think you should check by using some IDE it will shows the special names in different color.
also change the class name Map
I had the same error once i think it will help you
Thanks

Pinch Zoom Issue Phonegap Build stops working

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

Categories