coolio83000 coolio83000 - 1 month ago 7
jQuery Question

hide or delete image not found with $("img").error(function()

In my page I can have images not uploaded yet or removed by error so I'm looking for something who can remove or hide the warning about my img src not found ?

you can check my code here or in this link ->

http://www.booclin.ovh/tom/2/

here is my code



$("img").error(function() {
$(this).parent().remove();
});

$("a.fancyboxgallery").fancybox();

<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/6.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/06.jpg" alt=""/>
</a>

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/5.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/05.jpg" alt=""/>
</a>

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/4.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/04.jpg" alt=""/>
</a>



<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/3.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/03.jpg" alt=""/>
</a>

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/2.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/02.jpg" alt=""/>
</a>

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/1.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/01.jpg" alt=""/>
</a>




Answer

The error you have in console : $ is not defined mean jQuery is NOT loaded.

You load it inside <div class="rightpart"> within the <body>.

Try loading it in the <head> right before: <script type="text/javascript" src="index/js/jquery.fancybox.js"></script>

EDIT

Here is your HTML copied for the code inspector of your live link:

<html lang="en" class="js backgroundsize"><!--<![endif]-->
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=1.0">
        <meta name="apple-mobile-web-app-capable" content="yes">

        <link property="stylesheet" rel="stylesheet" type="text/css" href="index/css/style.css" class="--apng-checked">

        <link property="stylesheet" rel="stylesheet" type="text/css" href="index/font/font.css" class="--apng-checked">

        <link rel="stylesheet" type="text/css" media="screen" href="index/css/jquery.fancybox.css" class="--apng-checked">

        <link rel="stylesheet" media="screen" href="index/js/jquery.fancybox.css" type="text/css" class="--apng-checked">

        <script type="text/javascript" src="index/js/jquery.fancybox.js"></script>

        <script type="text/javascript" src="index/js/fancybox.js"></script>

        <style type="text/css" class="--apng-checked">.fancybox-margin{margin-right:0px;}</style>
    </head>

    <body>

        <div class="leftpart">
            <a href="#">PROJECT</a>
        </div>

        <div class="rightpart">
            <div id="globalgalerie">


                <a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/3.jpg" title="">
                <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/03.jpg" alt="">
                </a>

                <a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/2.jpg" title="">
                <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/02.jpg" alt="">
                </a>

                <a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/1.jpg" title="">
                <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/01.jpg" alt="">
                </a>
            </div>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

        <script type="text/javascript" src="index/js/modernizr.custom.js"></script>

        <script type="text/javascript" src="index/js/jquery.fancybox.js"></script>

        <script type="text/javascript" src="index/js/fancybox.js"></script>

        <script type="text/javascript">
            $("img").error(function() { $(this).parent().remove(); });
            $("a.fancyboxgallery").fancybox();
        </script>   

    </body>
</html>

So what I mean is to move these line in the <head> section:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<script type="text/javascript" src="index/js/modernizr.custom.js"></script>

<script type="text/javascript" src="index/js/jquery.fancybox.js"></script>

<script type="text/javascript" src="index/js/fancybox.js"></script>

These ones are already in the <head>... No need to duplicate them.

<script type="text/javascript" src="index/js/jquery.fancybox.js"></script>

<script type="text/javascript" src="index/js/fancybox.js"></script>

Your error function is ok at the end of the <body>.

Comments