3
\$\begingroup\$

Here is my HTML:

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

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');
        });
    });
\$\endgroup\$
  • \$\begingroup\$ 1) Where are the <div>s for .artist-ken and .artist-kina? 2) The <div>s for .ken-gallery and .kina-gallery are marked display:none, so they would be invisible and therefore unclickable, right? \$\endgroup\$ – 200_success Sep 8 '14 at 2:18
  • \$\begingroup\$ @200_success Sorry about that. I included it into the post. It's in the .artists-home div. The two galleries are initially marked as display:none and shown when .artist-ken or .artist-kina are clicked. \$\endgroup\$ – Desi Sep 8 '14 at 2:24
2
\$\begingroup\$

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.

  <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');
        });
    });

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

| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.