Simple image gallery

I was looking for a very simple image gallery and found this plugin

I have done everything correct I think, but if I click a thumbnail the image is not changing but instead the page is jumping to the top. This is the HTML:


<!DOCTYPE html>

<html lang="nl">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1">

<title>Tomossloop.nl | Occasions van Tomossloop.nl</title>

<meta name="description" content="Koop uw occasions bij Tomossloop.nl">

<meta name="keywords" content="occasions,bromfietsen,snoorfietsen,scooters">

<meta name="robots" content="index, follow">

<meta name="revisit-after" content="7 days">

<link rel="stylesheet" type="text/css" href="/css/website.css">

<link rel="stylesheet" type="text/css" href="/css/form-values.css">

<link rel="stylesheet" type="text/css" href="/css/responsiveslides.css">

<link rel="stylesheet" type="text/css" href="/css/zebra_pagination.css">

<link rel="stylesheet" type="text/css" href="/css/jquery-ui.min.css" media="screen">

<link rel="stylesheet" type="text/css" href="/css/ui-dialog.css" media="screen">

<link rel="stylesheet" type="text/css" href="/css/jquery.fancybox.css" media="screen">

<link rel="stylesheet" type="text/css" href="/css/simplegallery.css" media="screen">

<link rel="stylesheet" href="/css/responsive.css">

</head>

<body id="occasions_">

<div id="wrapper">




<section id="top-line">




  <div class="inside">

    <h2>06-53877887</h2>

    <form action="/artikelen/zoeken" method="post" name="zoek-form" id="zoek-form">

      <input name="nieuw" type="text" placeholder="Onderdelen nieuw">

      <input name="gebruikt" type="text" placeholder="Onderdelen gebruikt">

      <button type="submit">Zoeken</button>

    </form>

  </div>




</section>




<header>




  <div class="inside">

  


    <section id="logo">

      <a href="/"><img src="/images/logo.png"></a>

    </section>

    


    <section id="alt_logo">

      <a href="/"><img src="/images/alt_logo.png"></a>

    </section>

    


    <div class="winkelmandje">

    <ul>

      <li><i>0</i></li>

    </ul>    

    </div>

    


    <nav id="main-nav">

      <ul>

            <li><a href="/" class="home">Home</a></li>

            <li><a href="/catalogus" class="catalogus">Catalogus</a></li>

            <li><a href="/videos" class="videos">Videos</a></li>

            <li><a href="/gastenboek" class="gastenboek">Gastenboek</a></li>

            <li><a href="/contact" class="contact">Contact</a></li>

            </ul>      

    </nav>

    


    <div class="rdw">

      <img src="/images/rdw.png" alt="Tomossloop.nl is RDW erkend"> 

    </div> 

    


  </div>

        


</header>

<div class="static-wrapper">

  <li><img src="/images/slides/ts03.jpg"></li>  

</div>




<main id="main">




  <aside id="sidebar">




  <section class="sidebox">

    <h2>Onderdelen nieuw</h2>

    <ul>

            <li class="framedelen_nieuw"><a href="/artikelen/categorieen/framedelen?conditie=nieuw" >Framedelen</a></li>

            <li class="motordelen_nieuw"><a href="/artikelen/categorieen/motordelen?conditie=nieuw" >Motordelen</a></li>

            <li class="electrichedelen_nieuw"><a href="/artikelen/categorieen/electrichedelen?conditie=nieuw" >Electrische delen</a></li>

            <li class="diversen_nieuw"><a href="/artikelen/categorieen/diversen?conditie=nieuw" >Diversen</a></li>

          </ul>

  </section>

  


  <section class="sidebox">

    <h2>Onderdelen gebruikt</h2>

    <ul>

            <li class="framedelen_gebruikt"><a href="/artikelen/categorieen/framedelen?conditie=gebruikt" >Framedelen</a></li>

            <li class="motordelen_gebruikt"><a href="/artikelen/categorieen/motordelen?conditie=gebruikt" >Motordelen</a></li>

            <li class="electrichedelen_gebruikt"><a href="/artikelen/categorieen/electrichedelen?conditie=gebruikt" >Electrische delen</a></li>

          </ul>

  </section>




  <section class="sidebox">

    <h2>Occassions</h2>

    <ul>

      <li><a href="/occasions/catagorie/bromfietsen">Bromfietsen</a></li>

      <li><a href="/occasions/catagorie/snorfietsen">Snorfietsen</a></li>

      <li><a href="/occasions/catagorie/scooters">Scooters</a></li>

      <li><a href="/occasions/catagorie/diversen">Diversen</a></li>

    </ul>

  </section>

  


  <section class="sidebox">

        <h2>Bezoekers</h2>

    <p>Vandaag<span>8</span></p>

    <p>Online<span>1</span></p>

  </section>

</aside>  

  <div id="content">




	<h1>Header</h1>

	<div id="occasion_fotos">

    	


        <div class="fotos content">

                    <img src="/images/occasion_fotos/fotos/f7e4bd9d9267f17ebc0dfb7b1a44a35c.jpg" class="image_1"  alt="" />

                    <img src="/images/occasion_fotos/fotos/720e815fd1443ccb8df4ba396c37c62c.jpg" class="image_2"  style="display:none"  alt="" />

                    <img src="/images/occasion_fotos/fotos/3cf51158ca31587c56ae6687886a178d.jpg" class="image_3"  style="display:none"  alt="" />

                    <img src="/images/occasion_fotos/fotos/bf6daea0612c705cfcc05bb8d4a4e414.jpg" class="image_4"  style="display:none"  alt="" />

                  </div>

        


        <div class="thumbnails thumbnail">

                    


          <div class="thumb">

          		<a href="#" rel="1">

                	<img src="/images/occasion_fotos/thumbs/f7e4bd9d9267f17ebc0dfb7b1a44a35c.jpg" id="thumb_1" alt="" />

                </a>

        


          </div>

                    


          <div class="thumb">

          		<a href="#" rel="2">

                	<img src="/images/occasion_fotos/thumbs/720e815fd1443ccb8df4ba396c37c62c.jpg" id="thumb_2" alt="" />

                </a>

        


          </div>

                    


          <div class="thumb">

          		<a href="#" rel="3">

                	<img src="/images/occasion_fotos/thumbs/3cf51158ca31587c56ae6687886a178d.jpg" id="thumb_3" alt="" />

                </a>

        


          </div>

                    


          <div class="thumb">

          		<a href="#" rel="4">

                	<img src="/images/occasion_fotos/thumbs/bf6daea0612c705cfcc05bb8d4a4e414.jpg" id="thumb_4" alt="" />

                </a>

        


          </div>

                  </div>







	</div>

  


</div></main>




</div>




<footer>

  <div id="footer">




  <section class="column">

    <h2>Informatie</h2>

    <ul>

            <li><a href="/contact" class="contact">Contact</a></li>

            <li><a href="/algemene_voorwaarden" class="algemene_voorwaarden">Algemene voorwaarden</a></li>

            <li><a href="/privacy_beleid" class="privacy_beleid">Privacy beleid</a></li>

            <li><a href="/cookies" class="cookies">Cookies</a></li>

          


    </ul>

  </section>

  


  <section class="column">

  


  </section>

  


  <section class="column">

    <h2>Nieuwsbrief</h2>

    <div id="nieuwsbrief-status"></div>

    <form action="/add_nieuwsbrief_entry" method="post" name="nieuwsbrief-form" id="nieuwsbrief-form">

      <input name="nieuwsbrief_email" id="nieuwsbrief_email" type="text" placeholder="Email adres" required>

      <button type="submit">Aanmelden</button>

    </form>

    <ul class="social">

      <li><img src="/images/Facebook.png" alt="Like ons op Facebook"></li>

      <li><img src="/images/YouTube.png" alt="Bekijk Tomossloop.nl instructie filmpjes op Youtube"></li>

    </ul> 

  </section>




  <section id="cridentials">

    <p>Copyright &copy; 2015. All rights reserved. Tomossloop.nl&nbsp; &nbsp;|&nbsp;&nbsp;KvK-nummer:&nbsp;62491997</p>

    <p>Powered & Designed by <a href="http://www.donaldboers.nl" target="_blank">Donald Boers</a></p>

  </section>

  


</div></footer>

<div class="cookies"><p>Voor het optimaal functioneren van de website maakt Tomossloop.nl gebruik van cookies. <a class="algemene_voorwaarden" href="/cookies">Leer meer over cookies</a>  <a href="#" id="close-cookies" class="close-cookies">x</a></p></div>

<div id="bericht" style="display: none; z-index: 100000;"></div>

<script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>

<script type="text/javascript" src="/js/jquery-ui.min.js"></script>

<script type="text/javascript" src="/js/responsiveslides.min.js"></script>

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

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

<script type="text/javascript" src="/js/simplegallery.min.js"></script>

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

<script type="text/javascript">

        $('#occasion_fotos').simplegallery({

            galltime : 400,

            gallcontent: '.fotos',

            gallthumbnail: '.thumbnails',

            gallthumb: '.thumb'
 });

</script>

</body>

</html>

Does anyone see what I am doing wrong?

Thank you in advance

Is it wordpress plugin or something else?

I noticed that you are missing the simplegallery class on your DIV:
div id=“occasion_fotos” should be:
div id=“occasion_fotos” class=“simplegallery”

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.