I'm trying to imitate this jsfiddle: http://jsfiddle.net/kevin11189/uZCC6/1269/ however the thumbnails are not appearing.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Gallery</title>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="">
<style>
.hidden {
display: none;
}
</style>
<!-- Add jQuery library -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox-thumbs.js"></script>
<link rel="stylesheet" href="css/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox-buttons.js"></script>
<link rel="stylesheet" href="css/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox-media.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
<script>
$('.fancybox-thumbs').fancybox({
prevEffect : 'fade',
nextEffect : 'fade',
closeBtn : true,
arrows : true,
nextClick : true,
helpers : {
thumbs : {
width : 40,
height : 40
}
}
});</script>
</head>
<body>
<a class="fancybox-thumbs" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/4_b.jpg"><img src="http://fancyapps.com/fancybox/demo/4_s.jpg" alt="" /></a>
<a class="fancybox-thumbs hidden" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt="" /></a>
<a class="fancybox-thumbs" data-fancybox-group="thumb2" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt="" /></a>
<a class="fancybox-thumbs hidden" data-fancybox-group="thumb2" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt="" /></a>
</body>
</html>
jsfiddle: http://jsfiddle.net/3bbkjdcc/
i added the same resources as in the working jsfiddle but it didn't work.Any help?
You need to add absolute URL paths in external resources option, not relative. See the Console errors in Firebug.
Example: http://fancyapps.com/fancybox/source/jquery.fancybox.js instead of just jquery.fancybox.js
Check this: JSFiddle, I forked your JSfiddle and edited the external sources.
Related
The images in list with .slider class are not being displayed in browser window using MaterializeCSS, but it can be seen in elements. Do sequence of .css and .js loading in head matter?
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Yellowtail' rel='stylesheet' type='text/css'>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="slider">
<ul class="slides">
<li>
<img src="416.jpg">
</li>
<li>
<img src="417.jpg">
</li>
</ul>
</div>
</body>
</html>
First of all, you are including two versions of jQuery, remove the <script> tag for jquery-2.1.1.min.js.
The images are not being displayed because you are not initializing the slider. Add the following jQuery code:
<script>
$(function(){
$('.slider').slider();
});
</script>
Remove opacity: 0 for .slider .slides li
Jquery is not working. when, have not add it js in other page. Here, I present small example. I have 2 pages(index.html and about.html). Slideshow banner add in index page. but, banner is not available in about page. So, if, I have not add banner js(owl.carousel.min.js) in about page. So, Other jquery(back to top function) is not work in about page.
Here, I know, I can add slideshow jquery function in index page & remove from custom.js file. So, It is working fine. but, I don't want. because, this is small example. Our site is big(lots of page & js).
what can i do?
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="image/favicon.png" rel="icon" />
<title>HomePage</title>
<!-- CSS Part Start-->
<link rel="stylesheet" type="text/css" href="js/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
<!-- CSS Part End-->
</head>
<body>
<div id="content" class="col-sm-12">
<!-- Slideshow Start-->
<div class="owl-carousel">
<div class="item"> <img src="image/image1.jpg" alt="" /></div>
<div class="item"> <img src="image/image2.jpg" alt="" /></div>
</div>
<!-- Slideshow End-->
</div>
<div id="back-top"><a data-toggle="tooltip" title="Back to Top" href="javascript:void(0)" class="backtotop"><i class="fa fa-chevron-up"></i></a></div>
<!-- JS Part Start-->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<!-- JS Part End-->
</body>
</html>
about.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="image/favicon.png" rel="icon" />
<title>About Us</title>
<!-- CSS Part Start-->
<link rel="stylesheet" type="text/css" href="js/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
<!-- CSS Part End-->
</head>
<body>
<div id="content" class="col-sm-12">
<!-- Slideshow Start-->
<h1>About US</h1>
Content Here
<!-- Slideshow End-->
</div>
<div id="back-top"><a data-toggle="tooltip" title="Back to Top" href="javascript:void(0)" class="backtotop"><i class="fa fa-chevron-up"></i></a></div>
<!-- JS Part Start-->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<!-- JS Part End-->
</body>
</html>
custom.js
$(document).ready(function(){
//====== Slideshow ======//
$('.owl-carousel').owlCarousel({
items: 6,
autoPlay: 3000,
singleItem: true,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
pagination: true
});
//====== Scroll to top ======//
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 180) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
});
jQuery('.backtotop').click(function(){
jQuery('html, body').animate({scrollTop:0}, 'slow');
});
//
});
Include the owl.carousel.min.js file in the about page as well.
--About Page--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="image/favicon.png" rel="icon" />
<title>About Us</title>
<!-- CSS Part Start-->
<link rel="stylesheet" type="text/css" href="js/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
<!-- CSS Part End-->
</head>
<body>
<div id="content" class="col-sm-12">
<!-- Slideshow Start-->
<h1>About US</h1>
Content Here
<!-- Slideshow End-->
</div>
<div id="back-top"><a data-toggle="tooltip" title="Back to Top" href="javascript:void(0)" class="backtotop"><i class="fa fa-chevron-up"></i></a></div>
<!-- JS Part Start-->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<!-- JS Part End-->
</body>
</html>
Edit the custom js with the following
$(document).ready(function () {
//====== Slideshow ======//
if($('.owl-carousel').length > 0){
$('.owl-carousel').owlCarousel({
items: 6,
autoPlay: 3000,
singleItem: true,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
pagination: true
});
}
//====== Scroll to top ======//
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 180) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
});
jQuery('.backtotop').click(function () {
jQuery('html, body').animate({
scrollTop: 0
}, 'slow');
});
});
keeping the owl slider script inside the condition will solve your issue.
Not sure why my fancy box isn't working. Hoping someone can help
HTML Code:
<div class ="homeimage">
<a class ="fancybox" rel="group" href ="images\image9.jpg"><img src ="images\image9.jpg" alt ="Photo by Tom Harper"/></a>
</div>
Import and JavaScript Code:
<head>
<title>Tom Harper - Videographer</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<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>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
The folder which contains all the fancybox files is in the same directory as the webpage. All that happens when I click the image is that the image opens in a new page because of the <a> tags that are now reference the image.
First: Download the Fancybox plugin here
secondly: unzip fancybox plugin and implement into your header.
exp...: link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" "fancybox" is my
unpacked plugin directory.
thirdly: Follow this Documentation or just copy and paste HTML and JavaScript part.
and it will work.
<script type="text/javascript">
$(document).ready(function() {
$("#single_1").fancybox({
helpers: {
title : {
type : 'float'
}
}
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>Tom Harper - Videographer</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- Add jQuery library -->
<!-- Add mousewheel plugin (this is optional) -->
<!-- Add fancyBox -->
<!-- Optionally add helpers - button, thumbnail and/or media -->
</head>
<script type="text/javascript">
$(document).ready(function() {
$("#single_1").fancybox({
helpers: {
title : {
type : 'float'
}
}
});
});
</script>
<body>
<a id="single_1" href="http://farm2.staticflickr.com/1661/24170619595_ca34ef74d9_b.jpg" title="Bos 3 (p.vanhaastrecht)">
<img src="http://farm2.staticflickr.com/1661/24170619595_ca34ef74d9_m.jpg" alt="" />
</a>
</body>
</html>
I'm quite new to js and jQuery, just using it from templates.
My goal is to use magnific popup like a video lightbox, but I can't make it work.
I've tried to remove some other libraries that I used but don't seem to change anything.
Where have I made a mistake? I've uploaded it here.
<!DOCTYPE HTML>
<!--
Overflow 1.1 by HTML5 UP
html5up.net | #n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="shortcut icon" href="../favicon.ico">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic" rel="stylesheet" type="text/css" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.poptrox.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
<script type="text/javascript"> document.createElement('video');document.createElement('audio');document.createElement('track'); </script>
<script src="js/video.js"></script>
<script> videojs.options.flash.swf = "js/video-js.swf"</script>
<link rel="stylesheet" href="css/effets_perso.css" />
<link rel="stylesheet" href="css/video-js.css">
<link rel="stylesheet" href="css/perso.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<noscript>
<link rel="stylesheet" href="css/skel-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Generic -->
<article class="container box style3">
<header>
<h2>Generic Box</h2>
<p>Just a generic box. Nothing to see here.</p>
</header>
<section>
<header>
<h3>Paragraph</h3>
<p>This is a byline</p>
</header>
<a class="test-popup-link" href="images/pic02.jpg">Image</a>
<script type="text/javascript">
$(document).ready(function() {
$(".test-popup-link").magnificPopup({
type: "image"
// autres options
});
});
</script>
<div align="center">
<a class="popup-youtube" href="http://www.youtube.com/watch?v=miTfXsMn5ms">video YouTube </a><br>
<a class="popup-vimeo" href="https://vimeo.com/45830194">video sur Vimeo </a><br>
<a class="popup-gmaps" href="https://maps.google.com/maps?q=epfl+&hl=en&ll=46.521666,6.56652&spn=0.016005,0.038581&sll=37.0625,-95.677068&sspn=37.683309,79.013672&t=h&hq=epfl&z=15&iwloc=A">EPFL sur Google Map</a>
<script type="text/javascript">
$(document).ready(function() {
$(".popup-youtube, .popup-vimeo, .popup-gmaps").magnificPopup({
disableOn: 700,
type: "iframe",
mainClass: "mfp-fade",
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
});
</script>
</div>
</video>
</section>
</section>
</article>
</body>
</html>
I don't know if this is the complete problem but the order of your javascript tags is definitely part of the problem.
<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.poptrox.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
As you can see you are loading the js/jquery.magnific-popup.js before you actually load the jquery library (js/jquery.min.js). This is an important distinction because your magnific-popup.js uses jquery. If you look at the console on your web page (type ctrl+i, and switch to the console tab) you will see several errors that have to do with jquery not being loaded, and thus the functions in magnific-popup.js not being defined.
So move your jquery script to the top
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/jquery.poptrox.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
and if it still doesn't work. Look at the console, and try to include the errors when writing an Stack Overflow question.
I thought I had the same problem as in these two posts:
Fancybox width not applying
fancybox width doesn't apply
But I have been through the solutions on both and still the issue remains.
Essentially When I click on the image link the width and height properties are ignored and instead a box circa 30 x30 is shown. The video is loading and the close windows button etc all work.
I'm using I.E 8 / 9
My code is as follows:
<b>
<%# Page Language="C#" %>
<html dir="ltr">
<head runat="server">
<META name="WebPartPageExpansion" content="full">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled 1</title>
<meta name="Microsoft Theme" content="Lacquer 1011, default">
<!-- J Query Includes -->
<script type="text/javascript" src="http://mynationwideteam/sites/financial_performance/JavaScript/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://mynationwideteam/sites/financial_performance/JavaScript/jquery.SPServices-0.7.1a.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="http://mynationwideteam/sites/financial_performance/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://mynationwideteam/sites/financial_performance/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="http://mynationwideteam/sites/financial_performance/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://mynationwideteam/sites/financial_performance/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="http://mynationwideteam/sites/financial_performance/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="http://mynationwideteam/sites/financial_performance/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="http://mynationwideteam/sites/financial_performance/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script>
$(document).ready(function() {
$(".fancyvideo").fancybox({
width : 600,
height : 498,
fitToView : false,
autoSize : false,
type : 'swf'
});
});
</script>
</head>
<body>
<a class="fancyvideo" ID="vid1" href="http://www.youtube.com/v/92c3dX-AoXs"><img src="images/Templates/Financial_Performance/banner001.jpg" width="475" height="69" style="border-style: solid; border-width: 2px"></a>
</body>
</html>
</b>
Try to force the with of your content, for example you can do somethink like this (in the file that you want to include):
<div style="width:600px">
//your fancy content
</div>
It's working for me!
Unless you're using an older version having that property, autoSize doesn't exist. Try with autoDimensions: false and/or autoScale: false