Webprofis is een Forum waarin je vragen kunt stellen die webgerelateerd zijn. Heb je vragen over of problemen met je Webpagina, HTML, CSS, Javascript, PHP of andere client of serverside scriptingtalen? Stel ze dan gerust op dit forum.
Op dit forum zijn een aantal vrijwilligers actief die u graag met uw vragen willen helpen en u waar mogelijk een passend antwoord aanbieden.
Hebt u zelf veel ervaring en kennis met betrekking tot het bovenstaande? U bent van harte welkom om uw kennis met anderen te delen!
We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.
Team Webprofis
We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.
Team Webprofis
Fancy box werkt niet, grote foto verschijnt in zelfde venster.
Ik heb een grid gemaakt in een one-slider. Nu wil ik met de hulp van Fancybox de foto mooi als pop up laten verschijnen, maar op de ????n f andere manier werkt het niet. Nu heb ik via youtube verschillende filmpjes bekeken om te kijken wat ik fout doe, maar helaas zonder resultaat. Is er iemand die mij kan vertellen waar ik fout ga. een link naar de site is: psteintj.home.xs4all.nl/. De code ziet er al volgt uit:
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- fancybox -->
<link rel="stylesheet" href="js/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="js/source/jquery.fancybox.pack.js?v=2.1.5"></script> <!-- fancybox -->
<script type="text/javascript"> <!-- fancybox -->
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<title>Alternate Fixed And Scroll Backgrounds</title>
</head>
<body>
<header class="cd-header">
<div id="cd-logo"><a href="#0"><img src="img/cd-logo.svg" alt="Logo" /></a></div>
<nav class="cd-main-nav">
<ul>
<!-- inser more links here -->
<li><a href="#0">Home</a></li>
<li><a href="#0">About</a></li>
<li><a href="#0">Pricing</a></li>
<li><a href="#0">Gallery</a></li>
<li><a href="#0">Contact</a></li>
</ul>
</nav> <!-- cd-main-nav -->
</header>
<main class="cd-main-content">
<div class="cd-fixed-bg cd-bg-1">
<h1>Alternate Fixed Scroll Backgrounds</h1>
</div> <!-- cd-fixed-bg -->
<div class="container">
<div class="impressies">
<div class="span12">
<div id="main" class="row">
<div class="col-one-fourth columns">
<div class="row">
<div class="col-full columns">
<a rel="group" href="work/full/image-01-full.jpg"><img src="work/thumbs/image-01.jpg" alt="" /></a>
</div> <!-- col-full columns -->
</div> <!-- row -->
<div class="row">
<div class="col-full columns">
<a rel="group" href="work/full/image-02-full.jpg"><img src="work/thumbs/image-02.jpg" alt="" /></a>
</div> <!-- col-full columns -->
</div> <!-- row -->
<div class="row">
<div class="col-full columns">
<a rel="group" href="work/full/image-03-full.jpg"><img src="work/thumbs/image-03.jpg" alt="" /></a>
</div> <!-- col-full columns -->
</div> <!-- row -->
</div> <!-- col-one-fourth columns -->
<div class="col-one-fourth columns">
<div class="row">
<div class="col-full columns">
<a rel="group" href="work/full/image-04-full.jpg"><img src="work/thumbs/image-04.jpg" alt="" /></a>
</div> <!-- col-full columns -->
</div> <!-- row -->
<div class="row">
<div class="col-full columns">
<a rel="group" href="work/full/image-05-full.jpg"><img src="work/thumbs/image-05.jpg" alt="" /></a>
</div> <!-- col-full columns -->
</div> <!-- row -->
<div class="row">
<div class="col-full columns">
<a rel="group" href="work/full/image-06-full.jpg"><img src="work/thumbs/image-06.jpg" alt="" /></a>
</div> <!-- col-full columns -->
</div> <!-- row -->
</div> <!-- col-one-fourth columns -->
<div class="col-one-fourth columns">
<div class="row">
<div class="col-full columns">
<a rel="group" href="work/full/image-07-full.jpg"><img src="work/thumbs/image-07.jpg" alt="" /></a>
</div> <!-- col-full columns -->
</div> <!-- row -->
<div class="row">
<div class="col-full columns">
<a rel="group" href="work/full/image-08-full.jpg"><img src="work/thumbs/image-08.jpg" alt="" /></a>
</div> <!-- col-full columns -->
</div> <!-- row -->
<div class="row">
<div class="col-full columns">
<a rel="group" href="work/full/image-09-full.jpg"><img src="work/thumbs/image-09.jpg" alt="" /></a>
</div> <!-- col-full columns -->
</div> <!-- row -->
</div> <!-- col-one-fourth columns -->
<div class="col-one-fourth columns">
<div class="row">
<div class="col-full columns">
<a rel="group" href="work/full/image-10-full.jpg"><img src="work/thumbs/image-10.jpg" alt="" /></a>
</div> <!-- col-full columns -->
</div> <!-- row -->
<div class="row">
<div class="col-full columns">
<a rel="group" href="work/full/image-11-full.jpg"><img src="work/thumbs/image-11.jpg" alt="" /></a>
</div> <!-- col-full columns -->
</div> <!-- row -->
<div class="row">
<div class="col-full columns">
<a rel="group" href="work/full/image-12-full.jpg"><img src="work/thumbs/image-12.jpg" alt="" /></a>
</div> <!-- col-full columns -->
</div> <!-- row -->
</div> <!-- col-one-fourth columns -->
</div> <!-- id="main" class="row" -->
</div> <!-- span12 -->
</div> <!-- impressies -->
</div> <!-- container -->
<div class="cd-fixed-bg cd-bg-2">
<h2>Lorem ipsum dolor sit amet.</h2>
</div> <!-- cd-fixed-bg -->
<div class="cd-scrolling-bg cd-color-3">
<div class="cd-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non. Quo nisi veritatis vitae nam, labore fugit. Inventore culpa iusto, officia exercitationem. Voluptates quibusdam odit odio incidunt consequatur, consectetur aspernatur optio vitae molestias, quas repellendus fugit ullam culpa, eligendi et dignissimos voluptatibus illum? Molestias aliquam nostrum quasi ipsa culpa, iusto explicabo ut error, consequuntur enim temporibus, adipisci tempora voluptate, id consequatur mollitia eveniet blanditiis. Illo quod repellendus alias? Cum rem doloremque adipisci accusantium? Saepe, necessitatibus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non. Quo nisi veritatis vitae nam, labore fugit. Inventore culpa iusto, officia exercitationem. Voluptates quibusdam odit odio incidunt consequatur, consectetur aspernatur optio vitae molestias, quas repellendus fugit ullam culpa, eligendi et dignissimos voluptatibus illum? Molestias aliquam nostrum quasi ipsa culpa, iusto explicabo ut error, consequuntur enim temporibus, adipisci tempora voluptate, id consequatur mollitia eveniet blanditiis. Illo quod repellendus alias? Cum rem doloremque adipisci accusantium? Saepe, necessitatibus!
</p>
</div> <!-- cd-container -->
</div> <!-- cd-scrolling-bg -->
<div class="cd-fixed-bg cd-bg-3">
<h2>Lorem ipsum dolor sit amet.</h2>
</div> <!-- cd-fixed-bg -->
<div class="cd-scrolling-bg cd-color-1">
<div class="cd-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non. Quo nisi veritatis vitae nam, labore fugit. Inventore culpa iusto, officia exercitationem. Voluptates quibusdam odit odio incidunt consequatur, consectetur aspernatur optio vitae molestias, quas repellendus fugit ullam culpa, eligendi et dignissimos voluptatibus illum? Molestias aliquam nostrum quasi ipsa culpa, iusto explicabo ut error, consequuntur enim temporibus, adipisci tempora voluptate, id consequatur mollitia eveniet blanditiis. Illo quod repellendus alias? Cum rem doloremque adipisci accusantium? Saepe, necessitatibus!
</p>
</div> <!-- cd-container -->
</div> <!-- cd-scrolling-bg -->
<div class="cd-fixed-bg cd-bg-4">
<h2>Lorem ipsum dolor sit amet.</h2>
</div> <!-- cd-fixed-bg -->
</main> <!-- cd-main-content -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>
Login of Registreer om te reageren.
Reacties
Doordat je in de footer jquery later laad dan fancybox krijg je de error: fancybox is not a function
Naar de header moet verplaatsen, zeg maar onder:
Nogmaals dank voor de moeite
Als ik dit vergelijk met jouw code zie ik dat:
1. het anchor geen classe "fancybox" heeft wat wel moet voor de popup te krijgen
2. je laadt de jquery.fancybox.pack.js?v=2.1.5 ipv de jquery.fancybox.js?v=2.1.5
3. in de body onderaan laadt je: wat niet nodig is omdat in de head de latest al wordt geladen ( althans: voor de fancybox niet nodig!, misschien gebruik je die voor iets anders)
Pas dit eens aan en kijk wat ie doet
Nogmaals dank
Veel scripts herschrijven een stukje voor optimale werking, en als je dan weer jquery na een bepaald scripts doet laden dan wordt weer een gedeelte herschreven ( dit was bij jou het geval ).
Altijd dus eerste jquery dan een script zoals ( fancybox ) en dan de functies.