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

Fancy box werkt niet, grote foto verschijnt in zelfde venster.

bewerkt za 10 jan 2015 in Javascript, jQuery etc.. Posts: 24
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>

Reacties

  • PMPosts: 879
    is dat deze fancybox die je hebt? fancybox.net/
  • PMPosts: 732
    Je laad twee keer jquery zowel in header als footer.
    Doordat je in de footer jquery later laad dan fancybox krijg je de error: fancybox is not a function ;)
    If it's not fun, you're not doing it right!
  • Heren dank voor jullie reaktie, het is inderdaad deze fancybox. Houdt dit dan in dat ik:

    <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>

    Naar de header moet verplaatsen, zeg maar onder:

    <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 -->


    Nogmaals dank voor de moeite
  • bewerkt zo 11 jan 2015
    PMPosts: 879
    Dit is het minimale wat je nodig hebt voor de fancybox;

    <!DOCTYPE html>
    <html>
    <head>
    <title>fancyBox - Fancy jQuery Lightbox Alternative | Demonstration</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <!-- Add jQuery library -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>; <!-- fancybox -->

    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
    <link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />

    <script type="text/javascript"> <!-- fancybox -->
    $(document).ready(function() {
    $('.fancybox').fancybox();
    });
    </script>

    </head>
    <body>
    <p>
    <a class="fancybox" href="1_b.jpg" title="#"><img src="1_s.jpg" alt="" /></a>
    <a class="fancybox" href="2_b.jpg" title="#"><img src="2_s.jpg" alt="" /></a>
    <a class="fancybox" href="3_b.jpg" title="#"><img src="3_s.jpg" alt="" /></a>
    <a class="fancybox" href="4_b.jpg" title="#"><img src="4_s.jpg" alt="" /></a>
    </p>

    </body>
    </html>

    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:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>;
    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
  • Ik dank jullie voor de moeite. Het probleem is opgelost zelfs met het gebruik van fancybox. Ook bij het gebruik van een andere lightbox kreeg ik exact hetzelfde probleem, dus daaruit bleek dat ik iets verkeerd deed met jQuery, later bleek dat ik een jQuery conflict had door het gebruik van 2 jQuery files. Misschien dat iemand die hetzelfde probleem een keer tegenkomt hier wat aan heeft.

    Nogmaals dank
  • PMPosts: 879
    Aha, ja dat zijn lastige dingen.
  • PMPosts: 732
    Het hoeft geen probleem te zijn als je twee keer jquery doet laden, maar het probleem is vaak waar doe je ze laden.
    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.


    nuet
    If it's not fun, you're not doing it right!
Login of Registreer om te reageren.