Jump to content
kuba2

Trouble with Fancybox in Foundation 6

Recommended Posts

Hi there

I know this is not the topic for this forum, but I need help and somehow can't post in the foundation forum. I am registered, but since yesterday I can't publish any posts.

Maybe someone here can give me a hint..

 
I am a Foundation 6 beginner.
 
I made a website responsive with Foundation 6. 
Fancybox via Processwire was working smoothly.
 
Now I have implemented Foundation 6, and theres no more fancybox....
 
Example:
 
Does anybody have a suggestion what the cause could be? It is exactly the same as it was before, but now with the framework nothing goes....it has to be something with F6.
 
 
Thanks for any help
 
Jakob
 
 
 
My code:
 
 
 
 
 
<!DOCTYPE html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Oli Kehrli</title>
    <link rel="stylesheet" href="<?php echo $config->urls->templates?>styles/app.css">
    <link rel="stylesheet" href="<?php echo $config->urls->templates?>styles/style.css">




<!-- 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="lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="<?php echo $config->urls->templates?>source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="<?php echo $config->urls->templates?>source/jquery.fancybox.pack.js?v=2.1.5"></script>

<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="<?php echo $config->urls->templates?>source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="<?php echo $config->urls->templates?>source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="<?php echo $config->urls->templates?>source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

<link rel="stylesheet" href="<?php echo $config->urls->templates?>source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="<?php echo $config->urls->templates?>source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>







  </head>

  <!--      _____________BACKGROUND IMAGE im BODY_______________    -->

  <body>

    <div class="background_wrap"></div>
    
    <div class="top-bar" >

        <div class="row">

          <div class="large-12 columns">








          

  <!--      ______________LOGOS RECHTS__________________ -->



             <ul class="menu align-right" class="logos">

                <li><a href="http://www.facebook.com/pages/Oli-Kehrli/111633355624653"><img class="logos" src="<?php echo $config->urls->templates?>images/logo/facebook.gif" ></a></li>
               
              

                <li><a href="https://www.youtube.com/channel/UCLPySXRIt9zfzGnj1fQ8Mvw"><img class="logos" src="<?php echo $config->urls->templates?>images/logo/youtube.gif" ></a></li>
               
               
              </ul>




<!--          _________________LOGO__________________      -->

<!-- <h1>Oli Kehrli</h1>-->



                  <a href="<?php echo $pages->get('/nojs')->url; ?>">
                    <img  class="logo-name" src="<?php echo $config->urls->templates?>images/logo/re_logo_schwarz.gif" >
                  </a>



          </div>
        
        </div>

    </div>    




<!--            _____________NAVGATION_______________           -->



<div class="row"  >

  <div class="large-12 medium-12 columns">
<!--             ____________TOGGLE MENU_____________           -->

      <div class="title-bar" data-responsive-toggle="resp-menu" data-hide-for="medium" >
          <button class="menu-icon" type="button" data-toggle></button>
          <div class="title-bar-title" >Menu</div>
      </div>



       <div class="top-bar-left" id="resp-menu" >

          <div class="top-bar-left" >

            <ul  class="dropdown vertical medium-horizontal menu" data-dropdown-menu >

            
   
                      <li ><a href="<?php echo $pages->get('/nojs')->url; ?>" >nöis</a></li>
                      <li ><a href="<?php echo $pages->get('/uftritte')->url; ?>" >uftritte</a></li>
                      <li ><a href="<?php echo $pages->get('/bio')->url; ?>" >bio</a></li>
                      <li ><a href="<?php echo $pages->get('/medie')->url; ?>" >medie</a></li>
                      <li ><a href="<?php echo $pages->get('/albe')->url; ?>" >albe</a></li>
                      <li ><a class="current" href="<?php echo $pages->get('/galerie')->url; ?>" >galerie</a></li>
                      <li ><a href="<?php echo $pages->get('/videos')->url; ?>" >videos</a></li>
                      <li ><a href="<?php echo $pages->get('/links')->url; ?>" >links</a></li>
                      <li  class="last"><a href="<?php echo $pages->get('/kontakt')->url; ?>" >kontakt</a></li>
                              
              </ul>
        
          </div>

       </div>     

     </div>    

        
</div>





<!--        ____________LINIE_____________       -->

              <div class="line"><hr class="style-two"></div>

<!--         _______________MAIN CONTENT______________                 




     medium-8 centred row innerhalb einer large-12 row                 -->



     

<!--         <div class="row">
          <div class="large-12  columns"> -->
          
              
<div class="row">
        <div class="small-12 large-7 medium-8 medium-push-1 columns" id="bg" >



                    <!--        BILDERGALLERIE MIT PHP     -->
         
         <? echo $page->seitenname; ?>

         </br>
         </br>
         </br>
        
        
       <?php

foreach($page->bildergalerie as $image) {
    $thumbnail = $image->size(180,180);
    echo "<a href='{$image->url}'  class='fancybox' rel='group' title='{$thumbnail->description}'><img src='{$thumbnail->url}' alt='{$thumbnail->description}'  ></a>";
}

?> 

</div>



               
            <!-- <div class="sidebar"> -->
    <div class="small-12 large-5 medium-4  columns" id="bg" >

<? echo $page->sidebar; ?>

</div> 
        

</div>



      <!--     </div>
        </div>
 -->




<!--             __________________Foundation Scripts___________             -->



    <script src="<?php echo $config->urls->templates?>bower_components/jquery/dist/jquery.js"></script>
    <script src="<?php echo $config->urls->templates?>bower_components/what-input/what-input.js"></script>
    <script src="<?php echo $config->urls->templates?>bower_components/foundation-sites/dist/foundation.js"></script>
    <script src="<?php echo $config->urls->templates?>js/min/app-min.js"></script>



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




  </body>
</html>
 
                
 
            
 
         
            
 
         

Share this post


Link to post
Share on other sites

You've some error in including fancybox, as the console shows this error: $(...).fancybox is not a function.

Share this post


Link to post
Share on other sites

Hello

I have also seen that, but don't know what to do with it...

I am confused, because this code worked without Foundation 6...

Thanks

Share this post


Link to post
Share on other sites

You're including jquery twice: jQuery in <head>, add fancybox to it and the jquery before </body> does overwrite the previous jquery instance with fancybox.

  • Like 1

Share this post


Link to post
Share on other sites

Sorry for my ignorance, but I am still at the point, where I don't understand why it worked before and why it doesn't now.

Even if I repeat a jquery, why is it a problem now.

Thanks for Your effort, but I have still no clue.

My brain hurts.

Share this post


Link to post
Share on other sites

You second jquery file overwrites the first instance to which fancy box did bind itself. The overwritten jquery does not know anything about the previously bound fancybox.

  • Like 1

Share this post


Link to post
Share on other sites

What would You suggest?

I tried moving it around, but it doesn't do anything.

It works with the old template, and thats the same code.....What is going on? Why does it work there and not with Foundation?

Share this post


Link to post
Share on other sites

As LostKobrakei mentioned, you should remove the second include call for jquery and see if it is working then.

So remove this line from your code:

<script src="<?php echo $config->urls->templates?>bower_components/jquery/dist/jquery.js"></script>

which is down towards the bottom.
Try this first and see if the fancybox is working.

Then I also see this error in the console:

"NetworkError: 404 Page Not Found - http://olikehrli.ch/galerie/lib/jquery.mousewheel-3.0.6.pack.js"

There seems to be a wrong path in your code where you include the jquery.mousewheel-3.0.6.pack.js script:

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="lib/jquery.mousewheel-3.0.6.pack.js"></script> //the path lib/jquery... is wrong

Try to find the file "jquery.mousewheel-3.0.6.pack.js" in your templates folder. Maybe it is in folder bower_components. Then type in the correct path, for example:

<script type="text/javascript" src="<?php echo $config->urls->templates?>bower_components/jquery_mousewheel/lib/jquery.mousewheel-3.0.6.pack.js"></script>

This is just an example and assumes that your file is in folder site/templates/bower_components/jquery_mousewheel/lib/jquery.mousewheel-3.0.6.pack.js.

Share this post


Link to post
Share on other sites

And to make things more obvious I'd suggest putting all scripts either in the head or even better all at the end of the body.

Share this post


Link to post
Share on other sites

I tried without the second jquery...didn't work

Put all the scripts in the bottom.....still doesn't work

 
 
Can there be a conflict with Foundation?
<!--             __________________Foundation Scripts___________             -->



    <script src="<?php echo $config->urls->templates?>bower_components/jquery/dist/jquery.js"></script>
    <script src="<?php echo $config->urls->templates?>bower_components/what-input/what-input.js"></script>
    <script src="<?php echo $config->urls->templates?>bower_components/foundation-sites/dist/foundation.js"></script>
    <script src="<?php echo $config->urls->templates?>js/min/app-min.js"></script>



    <!--        fancybox         -->



<script type="text/javascript" src="<?php echo $config->urls->templates?>source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript" src="<?php echo $config->urls->templates?>source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="<?php echo $config->urls->templates?>source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript" src="<?php echo $config->urls->templates?>source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>




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




  </body>
</html>

Share this post


Link to post
Share on other sites

You've still two jquery versions in there. That's like doing this and wondering why there's no " + fancybox" in the string. Just remove the jquery-latest.min.js.

$jquery = "jquery";
$jquery .= " + fancybox"; //add fancybox
$jquery .= " + foundation"; //add foundation

$jquery = "jquery";

Share this post


Link to post
Share on other sites

LostKobrakai, Du bist der Beste! It works!

I'm going to learn jquery properly now! It's not good to look , but not see.

Thanks a lot!

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Lance O.
      Does anyone know of an alternative to fancybox?
      http://fancyapps.com/fancybox/
      I've been using fancybox for years, but am finding issues with Google Tag Manager, so I'm looking for a "modern" replacement. I need the alternative to support images and hosted videos. I'm curious to know what experiences you've had with the other options out there.
    • By kuba2
      Hello
      I am using the table option from the ckeditor on two sites of my new website project, as framework I am using Foundation 6. I have to present a list of songs, so the table is very practical.
      Unfortunately the rows of the table aren't transparent , as they were before ( without framework ), and the table doesn't scale down in iphone screen.
      Any suggestions how to handle this problem?
      The two examples:
      http://olikehrli.ch/kontakt/
      http://olikehrli.ch/albe/
      Thanks
      Jakob
    • By NorbertH
      From : http://fancyapps.com/fancybox/
      Concerning to that i have to pay 15,00 € for each domain i use Fancy ?
      So maybe its not a good idea to use Fancybox at all ?
      Asking myself if that counts for backend use too, so in had to pay 15 bucks anytime i use PW on a commercial site?
    • By GuruMeditation
      Hi all, I've just spent most of the night trying to debug this to no avail.
      My site has been working as expected for a while now, but over the last two days I've noticed a few weird issues. The only thing I've changed is to update my foundation 5 files from 5.1.1 to 5.2.2, so I reckon it might be something to do with that? However, I was hoping you'd have a look at the following code to make sure I've not done something stupid.
      The following code has been cut back to the basics for troubleshooting, and should just load the duckduckgo logo in a fancybox popup window, but it loads it as a flat page instead.
      <!DOCTYPE html> <!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]--> <html class="no-js" lang="en" > <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <link rel="stylesheet" type="text/css" href="<?=$config->urls->templates;?>css/normalize.css"> <link rel="stylesheet" type="text/css" href="<?=$config->urls->templates;?>css/foundation.css"> <link rel="stylesheet" type="text/css" href="<?=$config->urls->templates;?>css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="<?=$config->urls->templates;?>css/custom.css"> <link rel="stylesheet" type="text/css" href="<?=$config->urls->templates;?>fb/jquery.fancybox.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="<?=$config->urls->templates;?>fb/jquery.fancybox.pack.js"></script> <script src="<?=$config->urls->templates;?>js/vendor/modernizr.js"></script> <title><?=$pages->get("/")->site_name;?> | <?=$page->title;?></title> </head> <body> <div class="container"> <a class='th single_1' href='https://duckduckgo.com/assets/_logo_next.png' title='duck'><img src='https://duckduckgo.com/assets/_logo_next.png' alt='duck' /></a> </div> <script src="<?=$config->urls->templates;?>js/vendor/fastclick.js"></script> <script src="<?=$config->urls->templates;?>js/vendor/jquery.js"></script> <script src="<?=$config->urls->templates;?>js/foundation.min.js"></script> <script type="text/javascript"> $(document).foundation({ orbit: { animation: 'fade', timer_speed: 8000, pause_on_hover: true, animation_speed: 500, swipe: true, resume_on_mouseout: true, slide_number: false, navigation_arrows: false, bullets: false } }); </script> <script type="text/javascript"> $('a[href*="/assets/files/"]:has(img)').addClass('th single_1'); </script> <script type="text/javascript"> $(document).ready(function() { $(".single_1").fancybox({ openEffect : 'elastic', closeEffect : 'elastic', helpers : { title : { type : 'inside' }, overlay : { locked : false } } }); }) </script> </body> </html>
    • By rizsti
      Hi guys,
      I've been running into a problem with Internet Explorer 10 and below in the backend.  Whenever I upload an image and then click on the image (when it usually pops up the image in a fancybox) it just darkens the screen but the image doesn't appear. 
      I'm wondering if anyone has encountered this before and/or has a solution for it. 
      The attached screenshot is of IE 8. 
      Thanks for any help.
      Riz

×
×
  • Create New...