HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Combining four functions for toggling gallery displays

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
gallerycombiningdisplaystogglingfourforfunctions

Problem

Here is my HTML:


        
            Ken
            Kina
        
        
            
        
        
            
        
    


This is some jQuery I set up to have the divs fadeIn/FadeOut. Is there a way to combine all of these together or a more elegant way of writing it? I feel I'm repeating things too much.

$('.ken-gallery .gallery-home').click(function( e ){
        e.preventDefault();
        $('.ken-gallery').fadeOut(function() {
            $('.artists-home').fadeIn('slow');
        });
    });

    $('.kina-gallery .gallery-home').click(function( e ){
        e.preventDefault();
        $('.kina-gallery').fadeOut(function() {
            $('.artists-home').fadeIn('slow');
        });
    });

    $('.artist-ken').click(function( e ){
        e.preventDefault();
        $('.artists-home').fadeOut(function() {
            $('.ken-gallery').fadeIn('slow');
        });
    });

    $('.artist-kina').click(function( e ){
        e.preventDefault();
        $('.artists-home').fadeOut(function() {
            $('.kina-gallery').fadeIn('slow');
        });
    });

Solution

The way I have read the code, it looks like you can see 1 gallery at a time or the home links but not both.

It's not much of a saving in code, but you could simplify it a little and assume that if artists-home is clicked that all galleries fade out.


        
            Ken
            Kina
        

            
                
              
            
                
            
        
    

   $('.gallery-home').click(function( e ){
        e.preventDefault();
        $('.gallery').fadeOut(function() {
            $('.artists-home').fadeIn('slow');
        });
    });


Then for showing the gallery we could use a data tag instead of class names to identify the links and galleries, then you could easily extend the code to include more galleries, with no extra js

$('.artist').click(function( e ){
    e.preventDefault();

    var artist = $(this).data('artist');

    $('.artists-home').fadeOut(function() {
        $('.gallery[data-artist' + artist + ']).fadeIn('slow');
    });
});


Please note, this code is not tested, I might have missed something

Code Snippets

<section id="artists">
        <div class="artists-home" style="display: block;">
            <a class="artist" data-artist="ken" href="#">Ken</a>
            <a class="artist" data-artist="kina" href="#">Kina</a>
        </div>


            <div class="gallery" data-artist="ken" style="display: none;">
                <a class="gallery-home" href="#"><img src="img/rewind.png" alt="Back to main gallery" width="50"></a>
              </div>
            <div class="gallery" data-artist-"kina" style="display: none;">
                <a class="gallery-home" href="#"><img src="img/rewind.png" alt="Back to main gallery" width="50"></a>
            </div>
        </div>
    </section>



   $('.gallery-home').click(function( e ){
        e.preventDefault();
        $('.gallery').fadeOut(function() {
            $('.artists-home').fadeIn('slow');
        });
    });
$('.artist').click(function( e ){
    e.preventDefault();

    var artist = $(this).data('artist');

    $('.artists-home').fadeOut(function() {
        $('.gallery[data-artist' + artist + ']).fadeIn('slow');
    });
});

Context

StackExchange Code Review Q#62247, answer score: 2

Revisions (0)

No revisions yet.