CODEWITHSUNDEEP
javascriptjquery
Smerald Guci
Smerald Guci

Reputation: 25

JQuery can't hide images

I've wrapped some images in a class called gallery. Then I tried to hide this class on document ready, but it's not working. What have I done wrong?

<html>

<head>
    <title>Galleria Jquery</title>
    <script src="jquery.min.js"></script>

    <script>
        <!-- Inserire in questa sezione il codice javascript -->

        $("img").wrapAll("<div class='gallery'></div>");
        $(document).ready(function(){
                          $(".gallery").hide();
                          });

    </script>

    <style>
        <!-- Inserire in questa sezione le definizione di stile -->

    </style>



</head>

<body>

    <img src="img1.jpg" />
    <img src="img2.jpg" />
    <img src="img3.jpg" />
    <img src="img4.jpg" />

    <button id="prevbutton">Prev</button>
    <button id="nextbutton">Next</button>

</body>

Upvotes: 0

Views: 129

Answers (3)

Dan Philip Bejoy
Dan Philip Bejoy

Reputation: 4391

Try this,

$(document).ready(function(){
  $("img").wrapAll("<div class='gallery'></div>");
  $(".gallery").hide();
});

Since wrapAll is synchronous the hide will only be called after the new wrappers are added to the DOM.

Upvotes: 0

brk
brk

Reputation: 50291

Put the js code inside document.ready

This is because when the js code is executed the imgtag is not present in DOM

$(document).ready(function(){
 // your code
})

alternatively you can put the js code near closing body tag

<body>
  // Html code
<script>
  /js code
</script>
</body>

Upvotes: 1

Le Nhat Anh
Le Nhat Anh

Reputation: 153

Try this

<html>

<head>
    <title>Galleria Jquery</title>
    <script src="jquery.min.js"></script>


    <style>
        <!-- Inserire in questa sezione le definizione di stile -->

    </style>



</head>

<body>

    <img src="img1.jpg" />
    <img src="img2.jpg" />
    <img src="img3.jpg" />
    <img src="img4.jpg" />

    <button id="prevbutton">Prev</button>
    <button id="nextbutton">Next</button>
    <script>
        <!-- Inserire in questa sezione il codice javascript -->
        $("img").wrapAll("<div class='gallery'></div>");
        $(document).ready(function(){
            $(".gallery").hide();
        });

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

Upvotes: 0

Related Questions