Simple jQuery Gallery

In this example below you will see how to do a Simple jQuery Gallery with some HTML / CSS and Javascript

Just a simple, light gallery.

Thumbnail
This awesome code was written by projodesign, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright projodesign ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <div id="wrapper">

<div id="main-image"><img src="" /><iframe width="1280" height="720" src="//www.youtube.com/embed/Sgr1xC-e9TA" frameborder="0" allowfullscreen></iframe></div>

<div id="thumbs">
    <ul class="thumbs">
        <li style="list-style-type: none;">
            <a class="thumb" name="thumb" href="http://farm8.staticflickr.com/7118/7422821064_3f3bf8c057_z.jpg" title="">
    	    	<img src="http://farm8.staticflickr.com/7118/7422821064_3f3bf8c057_t.jpg" alt="" />
            </a>
        </li>      
        <li style="list-style-type: none;">
            <a class="thumb" name="thumb" href="http://farm8.staticflickr.com/7262/7422665420_bdd63362c1_z.jpg" title="">
    	    	<img src="http://farm8.staticflickr.com/7262/7422665420_bdd63362c1_t.jpg" alt="" />
            </a>
        </li>
        <li style="list-style-type: none;">
            <a class="thumb" name="thumb" href="http://farm9.staticflickr.com/8156/7420558992_f0bcb782f6_z.jpg" title="">
    	    	<img src="http://farm9.staticflickr.com/8156/7420558992_f0bcb782f6_t.jpg" alt="" />
            </a>
        </li>
    </ul>
</div>
  
</div>

/*Downloaded from https://www.codeseek.co/projodesign/simple-jquery-gallery-hsucG */
    #wrapper{
  width: 87%;
  margin: auto;
  padding: 0 10px;
  background-color: rgba(255,255,255,0.9);
  overflow: hidden;
  box-shadow: 0 0 5px #eee;
}

a {text-decoration: none;}

li {
  display: inline;
  padding: 0px 5px 5px 0px;
}

#main-image{
  width: 540px;
  overflow: hidden;
  margin: 0 auto
}

#main-image img {
  max-height: 400px;
  width: auto;
}

.thumbs{text-align: center;}



/*Downloaded from https://www.codeseek.co/projodesign/simple-jquery-gallery-hsucG */
    jQuery(document).ready(function() {
    jQuery(".thumb").click(function() {
          
          var big_url = jQuery(this).attr("href");
          jQuery("#main-image img").attr("src", big_url)
        return false;
    });

});


Comments