Vs. 3 Drop Down Gallery with Dot Navigation

3rd Version. This version has a few more jquery tweaks and shows how to implement images in the css.

by Carin Camen

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Here is the html code. Here is the html code. Here is the html code. Here is the html code. Here is the html code. Here is the html code. Here is the html code. Here is the html code.</p> <span class="arrow"></span>

<div class="container">
    <div class="slide"></div>
    <div class="dotNav"> <span id="red" class="dot"></span>
 <span id="blue" class="dot"></span>
 <span id="green" class="dot"></span>

    </div>
</div>

CSS

.arrow {
     display: block;
     width:20px;
     margin:0 auto;
     height: 20px;
     background-color: rgb(0, 0, 0);
     clear: right;
 }
 .container {
     display: none;
 }
 .slide {
     position: relative;
     width: 510px;
     margin:10px auto 0;
     height: 195px;
     border: 10px solid #000;
 }
 .dotNav {
     margin:0 auto;
     width: 110px;
     height: 40px;
 }
 .dot {
     width: 20px;
     margin-top:10px;
     height:20px;
     float: left;
     margin-right:10px;
     border: 3px solid #000;
     border-radius: 20px;
 }
 #red {
     background: #f00;
     /*background-image: url("galery1.gif");*/
 }
 #green {
     background: #0f0;
    /*background-image: url("galery2.gif");*/
 }
 #blue {
     background: #00f;
    /*background-image: url("galery3.gif");*/
 }

JavaScript

$(document).ready(function () {
    
    $(".dot").fadeTo(300, .50);
    $(".dot:first").fadeTo(300, 1);
    $(".slide").attr("id", $(".dot:first").attr("id"));

    $('.arrow').click(function () {
        $(".container").toggle();
    });

    $('.dot').click(function () {
        $(".slide").attr("id", $(this).attr("id"));
        $(".dot").fadeTo(300, .50);
        $(this).fadeTo(300, 1);
    });
});