Drop Down Gallery with Dot Navigation

Click the small black box to show the large rectangle box. Then click circles to replace galleries. Large circle dot will move with corresponding small circle dot and increase opacity with changing gallery. For demonstration purposes I have color coded dots to match respective gallery.

by Carin Camen

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
    <p>Click the arrow to show the large rectangle box. Then click circles to replace galleries. Large circle dot will move with corresponding small circle dot and increase opacity with changing gallery. For demonstration purposes I have color coded dots to match respective gallery.</p>
    
<div class="arrow">
    <div id="downArrow"></div>
    <div id="downTriangle"></div>
</div> 
    <div class="container">
        <div class="gallery01"> 
            <div class="slide01"></div>
            <div class="dotNav">
                            <div class="lgDot01"></div>
                            <div class="smDot01"></div>
                            <div class="smDot02"></div>
                            <div class="smDot03"></div>
                        </div>
         </div>
            
         <div class="gallery02"> 
            <div class="slide02"></div>
            <div class="dotNav">
                            <div class="lgDot02"></div>
                            <div class="smDot01"></div>
                            <div class="smDot02"></div>
                            <div class="smDot03"></div>
                        </div>
         </div>
            
         <div class="gallery03"> 
            <div class="slide03"></div>
           <div class="dotNav">
                            <div class="lgDot03"></div>
                            <div class="smDot01"></div>
                            <div class="smDot02"></div>
                            <div class="smDot03"></div>
                        </div>
         </div>
    </div>
</body>

CSS

.arrow{
   margin-top: -100px;
    margin-left: 100px;
}

#downArrow{
    position: relative;
    margin-top: 100px;
    margin-left: 140px;
    border-right:4px solid black;
    border-bottom:4px solid black;
    width:30px;
    height:30px;
    transform: rotate(45deg);  
}

#downTriangle{
    position: relative;
    margin-top: -23px;
    margin-left: 137px;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid black;
}
.gallery01 {
    position: absolute;
    width: 530px;
    height: 215px;
    top: 140px;
    left: 10px;
    background-color: black;
}

.slide01 {
    position: relative;
    width: 510px;
    height: 195px;
    top: 10px;
    left: 10px;
    background-color: green;
}
.gallery02 {
     position: absolute;
    width: 530px;
    height: 215px;
    top: 140px;
    left: 10px;
    background-color: black;
}

.slide02 {
    position: relative;
    width: 510px;
    height: 195px;
    top: 10px;
    left: 10px;
    background-color: blue;
}
.gallery03 {
    position: absolute;
    width: 530px;
    height: 215px;
    top: 140px;
    left: 10px;
    background-color: black;
}

.slide03 {
    position: relative;
    width: 510px;
    height: 195px;
    top: 10px;
    left: 10px;
    background-color: red;
}
.dotNav{
    position: relative;
    width: 528px;
    height: 40px;
    top:20px;
    left: 0;
}


.lgDot01{
    position: relative;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    border: 3px solid black;
    top: 47%;
    left: 45%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

.smDot01{
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 45%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: green;
    opacity: .50;
}

.lgDot02{
    position: relative;
    width: 23px;
    height: 23px;
    border-radius: 50%;
 ...

JavaScript

/* Gallery slide out */

$(document).ready(function(){
    $('.gallery02').hide();
    $('.gallery03').hide();
    $(".container").hide();
    $('.smDot01').fadeTo(300, 1.0);

    $('.arrow').click(function(event){
        event.preventDefault ();
         $(".container").toggle();
        
/* use this code in place of the line above, if you have multiple galleries on the page to drop down only the one gallery being selected by the .arrow that is being clicked on. $(this).next(".container").toggle();
*/
    });

    $('.smDot01').click(function(event){
        event.preventDefault ();
        $("[class^=gallery]").hide()
        $('.gallery01').show();
                $('.lgDot01').fadeIn(300);
                $('.smDot01').fadeTo(300, 1.0);
                $('.smDot02').fadeTo(300, .50);
                $('.smDot03').fadeTo(300, .50);
      
                     
    });


    $('.smDot02').click(function(event){
        event.preventDefault ();
        $("[class^=gallery]").hide()
        $('.gallery02').show();
                $('.lgDot02').fadeIn(300);
                $('.smDot02').fadeTo(300, 1.0);
                $('.smDot01').fadeTo(300, .50);
                $('.smDot03').fadeTo(300, .50);
                     
    });

    $('.smDot03').click(function(event){
        event.preventDefault ();
        $("[class^=gallery]").hide()
        $('.gallery03').show();
                 $('.lgDot03').fadeIn(300);
                $('.smDot03').fadeTo(300, 1.0);
                $('.smDot01').fadeTo(300, .50);
                $('.smDot02').fadeTo(300, .50);
                    
    });
});