0

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>

2 Answers 2

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({
2
  • I have revised the codes. The problem I find is in thejquery script. Thanks.
    – S Das
    Jan 21, 2015 at 1:08
  • Its ok I think it was a combination of both since your new code shows the selector changed :)
    – torresomar
    Jan 21, 2015 at 17:28
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.