Issue in galleria.js usage

Question

I am trying to implement galleria.js in my webpage. I have followed the documentation and have created index.html accordingly. All I am getting is the compilation of the images one after another, but not the galleria view.

<!doctype html>
<html>

    <head>
        <meta  charset="utf-8"/>
        <title>my photo</title>
    </head>

    <body>
        <div class="gallery">
            <img src="galleria/im/out1.jpg">
            <img src="galleria/im/out2.jpg">
            <img src="galleria/im/out3.jpg">
        </div>

        <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
        <script src="galleria/galleria-1.4.2.min.js"></script>

        <script src="galleria/themes/classic/galleria.classic.min.js"></script>
        <script>
         $(document).ready(function() {
            $('#gallery').galleria({
                transition: 'fadeslide',
                width:800,
                height:600
            });
         });
        </script>

    </body>
</html>

score 0 · Answer 1 · answered Jan 20 '15 at 23:19

0

I checked the docs of galleria.js but I think the issue is basically the selector in your code. You are getting an element with id "gallery" and you dont have any element with that id,just an element with that class :)

$('#gallery').galleria({

ans I think it should be

$('.gallery').galleria({

answered Jan 20 '15 at 23:19

torresomar

2,219
2
16
28

I have revised the codes. The problem I find is in the`jquery` script. Thanks. – S Das Jan 21 '15 at 01:08
Its ok I think it was a combination of both since your new code shows the selector changed :) – torresomar Jan 21 '15 at 17:28

S Das · Answer 2 · 2015-01-21T01:57:55.883

After several attempts the following works fine with me. I have missed to put https:// before the jquery address.

<!doctype html>
<html>
    <head>
    <meta  charset="utf-8"/>
        <title>my photo</title>
    </head>
    <body>
        <div id="gallery">
            <img src="galleria/im/out.jpg">
            <img src="galleria/im/out1.jpg">
            <img src="galleria/im/out3.jpg">
        </div>


        <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
        <script src="galleria/galleria-1.4.2.min.js"></script>

        <script src="galleria/themes/classic/galleria.classic.min.js"></script>
        <script>
         $(document).ready(function() {
            $('#gallery').galleria({
                transition: 'fadeslide',
                width:1450,
                height:740
            });
         });

        </script>
    </body>
</html>

Issue in galleria.js usage

2 Answers2