Vs. 2 Drop Down Gallery with Dot Navigation

2nd Version. Click on the small box to drop down the gallery. Click on the dot navigation to change slides. You will be able to close the gallery no matter which slide you are on. A special thank you to a LinkedIn group member who provided this option.

by Carin Camen

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>2nd Version. Click on the small box to drop down the gallery. Click on the dot navigation to change slides. You will be able to close the gallery no matter which slide you are on. A special thank you to a LinkedIn group member who provided this option.</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: 15px;
     height:15px;
     float: left;
     margin-top:10px;
     margin-right:10px;
     border: 3px solid #000;
     border-radius: 20px;
 }
 #red {
     background: #f00;
 }
 #green {
     background: #0f0;
 }
 #blue {
     background: #00f;
 }

JavaScript

$(document).ready(function () {

    $(".dot").each(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 () {
        $(this).each(function () {
            $(".slide").attr("id", $(this).attr("id"));
            $(".dot").fadeTo(300, .50);
            $(this).fadeTo(300, 1);
        })

    });



});