0

I have tried to use fancybox to display a gallery of images. I have also tried bootstrap 3 Lightbox (http://www.jasonbutz.info/bootstrap-lightbox/) but i cant get that to work either.

I have tried tons of different formats, however none of them are working.

Header:

<link rel="stylesheet" type="text/css" href="/css/libs/gallery/jquery.fancybox.css">

Scripts:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/js/libs/jquery.fancybox.pack.js"></script>

Included at bottom of the page where i display the images:

<script>

$(function() {
    $('a.grouped_elements').fancybox({
                   type: 'image',
                   padding: 0,
                   scrolling: 'no',
                   helpers : {
                        overlay: {
                           css: {'background-color': '#000'},
                           opacity: 0.3
                        },
                        title : { type : 'inside' }
                   }
         });
});


</script>

I have tried without the function call, and within a document.ready call, but this doesn't make any difference. I have tried the simple format $('a.grouped_elements').fancybox(); and also just calling the class without calling a first.

Where I display the images: 

@foreach ($user->photos()->get() as $photo)
        <a class="grouped_elements" rel="group1" href="{{ $photo->path }}" >
           <img class="galleri" style="width:200px;height:200px;margin-bottom:10px; 
                margin-right:5px;" src="{{ $photo->path }}" alt="" title="" />
        </a>
@endforeach

All images display. The scripts and css are called correctly as these show if i go to the source and press them.

Whenever i click on an image, it shows the image in large format, but not in a "fancybox".

If i call alert('Hello'); i do get an alert box.

I have other stuff included on the page, such as google maps etc. and all of this works fine.

I have tested if jQuery is working using this example, and the example works fine.

What am i doing wrong, and how can i fix this problem?

Patrick
  • 166
  • 2
  • 14
  • Are any JavaScript errors displayed in your browser's console? I [can't reproduce the issue](https://jsfiddle.net/mm7ke063/). – showdev Jan 18 '16 at 22:49
  • Hi @showdev , I have the following issuces, but they seem to be part of google maps, but the google maps work: `ReferenceError: google is not defined` & `ReferenceError: $ is not defined` & `"Google Maps API warning: InvalidVersion: https://developers.google.com/maps/documentation/javascript/error-messages"` – Patrick Jan 18 '16 at 23:01
  • Hi again @showdev , i see that the `ReferenceError: $ is not defined` is referencing the $ in $('a.grouped_elements').fancybox({... how can i define it? – Patrick Jan 18 '16 at 23:04
  • Try removing the Google Maps code and see if your FancyBox starts working. It seems that its throwing an ["InvalidVersion" error](https://developers.google.com/maps/documentation/javascript/error-messages#invalid-version). – showdev Jan 18 '16 at 23:08
  • Hi @showdev, if i delete the Google Maps code and remove the script for google maps, and i then only get the `ReferenceError: $ is not defined` which is referencing this `$('a.grouped_elements').fancybox({...` it still doesn't work, and when i click an image, it still just shows the image in the "normal" way. – Patrick Jan 18 '16 at 23:13
  • Are you sure the jQuery library is loaded correctly? See [jQuery is not defined](http://stackoverflow.com/questions/2194992/jquery-is-not-defined) – showdev Jan 18 '16 at 23:14
  • Hi @showdev, I have tried this example: http://www.w3schools.com/js/tryit.asp?filename=tryjs_myfirst and it works fine without any problems – Patrick Jan 18 '16 at 23:16
  • That code does not appear to use jQuery. – showdev Jan 18 '16 at 23:27
  • Hi @showdev, I have tried this http://stackoverflow.com/questions/7341865/checking-if-jquery-is-loaded-using-javascript and used the Selected Answer, and i get the "Yeah" alertbox, which i would guess means that jQuery is working. – Patrick Jan 18 '16 at 23:33
  • Hi @showdev, i found the solution, by putting the code inside a `window.onload = function() {` function. Thanks for all your help! :) – Patrick Jan 18 '16 at 23:35

0 Answers0